39th rounding block method. One tag, one picture.
A couple of days ago I came across an article about 38 ways to round blocks . Loved it. However, there I have not met the way that I have been using for about a year. It does not require extra tags and requires downloading only one image (sprite). Works in all modern bowsers and IE6 +
The method is applicable for blocks with a solid surrounding background and no frame (however, the background of the block itself can be arbitrary).
Actually the highlight is the way of placing the sprite in the block, where neither the width nor the height is fixed. This is achieved by the following code:
')
HTML itself looks like this:
There is no need to pay attention to the use of :: after and :: before - this is only a necessity for the proper operation of the Dan Edwards Library , which adapts this standard code for IE. By the way, I highly recommend this library for the treatment of many unpleasant features of the most popular browser.
Actually on this and all. It remains to give a link to the archive with a workable example.
Waiting for comments.
UPD: The method works only in the mode of compatibility with standards, that is, with the appropriate DOCTYPE. For those who still write their code in quirks mode, this method has not yet been adapted.
UPD2: How Dan Edwards' s pepelsbey library found can fail in IE with large amounts of CSS. So at the moment, there is another way to stop IE from perceiving the specified CSS2 code correctly.
The method is applicable for blocks with a solid surrounding background and no frame (however, the background of the block itself can be arbitrary).
Actually the highlight is the way of placing the sprite in the block, where neither the width nor the height is fixed. This is achieved by the following code:
/ * applying this class to the block we make it rounded * /
.rounded {
background: #feb;
padding: 20px;
margin: 30px auto 10px auto;
text-align: center;
overflow: hidden;
}
.rounded: before, .rounded :: before, .rounded: after, .rounded :: after {
display: block;
height: 20px;
content: url (img / corners.gif);
background: url (img / corners.gif) top right no-repeat;
margin: -30px -30px 10px -30px;
padding: 0;
text-align: left;
line-height: 0;
font-size: 0;
overflow: hidden;
}
.rounded: after, .rounded :: after {
margin: 10px -30px -30px -30px;
} ')
HTML itself looks like this:
<! DOCTYPE html PUBLIC '- // W3C // DTD XHTML 1.0 Strict // EN' 'http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd'>
<html>
<head>
<title> Rounded corners </ title>
<meta http-equiv = "Content-type" content = "text / html; charset = utf-8" />
<link type = "text / css" rel = "stylesheet" media = "screen" href = "styles.css" />
<! - [if lt IE 8]>
<script src = "http://ie7-js.googlecode.com/svn/version/2.0(beta3)/IE8.js" type = "text / javascript"> </ script>
<! [endif] ->
</ head>
<body>
<div class = "rounded">
This block should have rounded corners.
</ div>
</ body>
</ html> There is no need to pay attention to the use of :: after and :: before - this is only a necessity for the proper operation of the Dan Edwards Library , which adapts this standard code for IE. By the way, I highly recommend this library for the treatment of many unpleasant features of the most popular browser.
Actually on this and all. It remains to give a link to the archive with a workable example.
Waiting for comments.
UPD: The method works only in the mode of compatibility with standards, that is, with the appropriate DOCTYPE. For those who still write their code in quirks mode, this method has not yet been adapted.
UPD2: How Dan Edwards' s pepelsbey library found can fail in IE with large amounts of CSS. So at the moment, there is another way to stop IE from perceiving the specified CSS2 code correctly.
Source: https://habr.com/ru/post/30286/
All Articles