/* This code implements the gradient effect when the mouse slides over the link*/
a {
color: #007c21;
transition: color .4s ease;
}
a:hover { color: #00bf32; }Using CSS3 you can create rounded corners for most elements, including form elements, images, and even paragraph text, without introducing additional markup or images.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Rounded Corners</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </head> <body> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </body> </html>
Four examples using CSS rounded corners, including necessary vendor prefixes to support older versions of Android, Mobile Safari, and Safari browsers. For .circle , using 75px has the same effect as 50% because the element is 150像素*150像素.
div {
background: #999;
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
.all-corners {
-webkit-border-radius: 20px;
border-radius: 20px;
}
.one-corner {
-webkit-border-top-left-radius: 75px;
border-top-left-radius: 75px;
}
.elliptical-corners {
-webkit-border-radius: 50px / 20px;
border-radius: 50px / 20px;
}
.circle {
-webkit-border-radius: 50%;
border-radius: 50%;
} div {
background: #ff9;
border: 5px solid #326795;
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
.example-1 {
/* Makes the radius of the top-left and bottom-right corners 10px and
the top-right and bottom-left corners 20px */
border-radius: 10px 20px;
}
.example-2 {
/* Makes the radius of the top-left corner 20px, and all other corners 0 */
border-radius: 20px 0 0;
}
.example-3 {
/* Makes the radius of the top-left corner 10px, the top-right corner 20px,
the bottom-right corner 0, and the bottom-left corner 30px */
border-radius: 10px 20px 0 30px;
}-webkit-border-radius: r , where r is the radius of the fillet, expressed as length (with units). Enter border-radius: r , where r is the radius of the fillet, use the same value as in step one. This is the standard short form syntax for this property.-webkit-border-top-left-radius: r , where r is the radius of the upper left corner, expressed as length (with units). Enter border-top-left-radius: r , using the same value for r as in the first step. This is the standard long-form syntax for this property. To create a top-right corner, use top-right ; to create a bottom-right corner, use bottom-right ; to create a bottom-left corner, use bottom-left .-webkit-border-radius: x/y , where x is the radius of the fillet in the horizontal direction, y is the radius of the fillet in the vertical direction, both expressed as length (with unit). Enter border-radius: x/y , where x and y are equal to the values in the first step.-webkit-border-radius: r where r is the radius of the element (with length unit). To create a circle, use the short form of the syntax, where the value of r should be equal to half the height or width of the element. Enter border-radius: r where r is the radius of the element (with length unit), which is equal to r in the first step. This is standard no-prefix syntax. Note: Older browsers that do not support border-radius will only render elements with square corners. border-radius only affects the corners of the element to which the style is applied, not the corners of its child elements. Therefore, if a child element has a background, the background may appear at the corners of one or more parent elements, thus affecting the rounded corner style. Sometimes the background of an element (not the background of its child elements here) will show through its rounded corners. To avoid this, you can add a style rule after the element's border-radius declaration: background-clip: padding-box; .
Use text-shadow to add dynamic shadow effects to text in paragraphs, titles, and other elements without using images to represent text.
text-shadow: . Enter the values representing x-offset (horizontal offset), y-offset (vertical offset), blur-radius (blur radius) and color respectively (the first three values have length units, and there is no comma between the four values. separated), for example -2px 3px 7px #999 .text-shadow: . Enter the values of x-offset (horizontal offset), y-offset (vertical offset), blur-radius (blur radius) and color respectively (the first three values have length units, and there is no comma separation between the four values. ). The value of blur-radius is optional. Enter, (comma). Repeat step two with different values for the four properties.<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Text Shadow</title> <link rel="stylesheet" href="css/text-shadow.css" /> </head> <body> <p class="basic">Basic Shadow</p> <p class="basic-negative">Basic Shadow</p> <p class="blur">Blur Radius</p> <p class="blur-inversed">Blur Radius</p> <p class="multiple">Multiple Text Shadows</p> </body> </html>
body {
background: #fff;
color: #222;
font: 100%/1.05 helvetica, sans-serif;
padding-top: 20px;
}
p {
color: #222; /* nearly black */
font-size: 4.5em;
font-weight: bold;
margin: 0 0 45px;
}
p:last-child {
margin: 0;
}
.basic {
text-shadow: 3px 3px #aaa;
}
/* uses negative offsets--you can mix positive and negative ones, too. */
.basic-negative {
text-shadow: -4px -2px #ccc; /* a little lighter gray than #aaa */
}
.blur {
text-shadow: 2px 2px 10px gray;
}
.blur-inversed {
color: white;
text-shadow: 2px 2px 10px #000; /* black */
}
/* this example has two shadows, but you can include
more by separating each with a comma */
.multiple {
text-shadow:
2px 2px white,
6px 6px rgba(50,50,50,.25);
} These classes demonstrate several text-shadow effects. The first, second and fifth all omit the blur radius value. The .multiple class tells us that multiple shadow styles can be added to a single element, with commas separating each set of attributes. This way, by combining multiple shadow styles, you can create special and interesting effects.
That is, enter text-shadow: none; This attribute does not need to be entered and uses the manufacturer prefix.
The text-shadow property accepts four values: x-offset with length units, y-offset with length units, optional blur-radius with length units, and color value. If blur-radius is not specified, its value is assumed to be 0. x-offset and y-offset values can be positive or negative integers, which means 1px and -1px are both valid. The blur-radius value must be a positive integer. All three values can be 0. Although the syntax of text-shadow is similar to that of the border and background properties, it cannot specify four separate property values like border and background. If text-shadow is not specified, it uses the initial value none .
Use the text-shadow property to add a shadow to the text of an element, and use the box-shadow property to add a shadow to the element itself. Their base property set is the same, but box-shadow also allows the use of two optional properties: the inset keyword property and spread property (used to expand or shrink the shadow).
box-shadow attribute accepts six values: x-offset and y-offset with length units, optional blur-radius with length units, optional inset keyword, optional spread value with length units, and color value. If the values of blur-radius and spread are not specified, they are set to 0.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Box Shadow</title> <link rel="stylesheet" href="css/box-shadow.css" /> </head> <body> <div class="shadow"> <p>Shadow with Blur</p> </div> <div class="shadow-negative"> <p>Shadow with Negative Offsets and Blur</p> </div> <div class="shadow-spread"> <p>Shadow with Blur and Spread</p> </div> <div class="shadow-offsets-0"> <p>Shadow with Offsets Zero, Blur, and Spread</p> </div> <div class="inset-shadow"> <p>Inset Shadow</p> </div> <div class="multiple"> <p>Multiple Shadows</p> </div> <div class="shadow-negative-spread"> <p>Shadow with Blur and Negative Spread</p> </div> </body> </html>
body {
background: #000;
color: #fff;
}
h1 {
font-family: sans-serif;
font-size: 2.25em;
line-height: 1.1;
text-align: center;
}
/* NOTE: The background-image URLs are different below than in the example shown in the book, because I've placed the images in a sub-folder (called "img"), as is typical when organizing a site. Also, I thought it would be helpful for you to see how to construct your background-image URLs under these circumstances. Note that the URLs are relative to where the style sheet lives, NOT the HTML page that is displaying the image. */
.night-sky {
background-color: navy; /* fallback color */
background-image:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
background-position:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-x;
height: 300px;
margin: 25px auto 0; /* slightly different than book */
padding-top: 36px;
width: 75%;
} The above program is used to demonstrate the effect of using box-shadow to add one or more shadows. The first five classes each apply a different shading style from each other. The last class applies two shadows (more can be applied). Browsers that don't understand box-shadow will simply ignore these CSS style rules and render the page without a shadow.
-webkit-box-shadow: . Enter the values representing x-offset , y-offset , blur-radius , spread and color respectively (the first four values have length units), for example, 2px 2px 5px #333 . Enter box-shadow: and repeat step two.-webkit-box-shadow: . Enter the values representing x-offset , y-offset , blur-radius , spread and color respectively (the first four values have length units), for example, 2px 2px 5px #333 . Enter inset after the colon, and then enter a space (you can also enter inset and a space before the second step). Enter box-shadow: and repeat steps two and three.-webkit-box-shadow: . Enter the values representing x-offset , y-offset , blur-radius , spread and color respectively (the first four values have length units), for example, 2px 2px 5px #333 . If necessary, include the inset keyword. Enter a comma. Repeat step two with different values for each attribute. Enter box-shadow: and repeat steps two to four.-webkit-box-shadow: none; . Enter box-shadow: none; . Note: x-offset , y-offset and spread values can be positive or negative integers. The blur-radius value must be a positive integer. All three values can be zero. The inset keyword allows the shadow to be placed inside the element.
Multiple backgrounds can be applied to almost any element.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Multiple Backgrounds</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </head> <body> <div class="night-sky"> <h1>In the night sky...</h1> </div> </body> </html>
...
.night-sky {
background-color: navy; /* fallback color */
background-image:
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
background-position:
50% 102%,
100% -150px,
0 -150px,
50% 100%;
background-repeat:
no-repeat,
no-repeat,
no-repeat,
repeat-x;
height: 300px;
margin: 25px auto 0; /* slightly different than book */
padding-top: 36px;
width: 75%;
}Apply multiple background images to a single element (no need to use vendor prefixes)
Enterbackground-color: b , where b is the alternate background color you want to apply to the element. Enter background-image: u , where u is a list of url referenced by absolute or relative paths (separated by commas. For browsers that support multiple backgrounds, the images are layered and overlap each other. The first in the list is separated by commas. image at the top. ) Enter background-position: p , where p is a pair of x-offset and y-offset (can be positive or negative; with length unit or keyword, such as center top ) Sets, separated by commas. For each url specified in the second step, there should be a set of x-offset and y-offset . Enter background-repeat: r , where r is repeat-x , repeat-y , or no-repeat value, separated by commas, one value for each url specified in the second step.For multiple background images, the standard short-form syntax can be used, using commas to separate each set of background parameters. The benefit of this representation is that developers can specify either an alternate background color or an image for older browsers.
.night-sky {
/* fallback with both a color and image */
background: navy url(../img/ufo.png) no-repeat center bottom;
/* for supporting browsers */
background:
url(../img/ufo.png) no-repeat 50% 102%,
url(../img/stars.png) no-repeat 100% -150px,
url(../img/stars.png) no-repeat 0 -150px,
url(../img/sky.png) repeat-x 50% 100%;
height: 300px;
margin: 25px auto 0;
padding-top: 36px;
width: 75%;
}<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Gradient Backgrounds</title> <link rel="stylesheet" href="css/gradients.css" /> </head> <body> <div class="vertical-down"><p>default</p></div> <div class="vertical-up"><p>to top</p></div> <div class="horizontal-rt"><p>to right</p></div> <div class="horizontal-lt"><p>to left</p></div> <div class="angle-bot-rt"><p>to <br />bottom right</p></div> <div class="angle-bot-lt"><p>to <br />bottom left</p></div> <div class="angle-top-rt"><p>to top right</p></div> <div class="angle-top-lt"><p>to top left</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <section class="radial"> <div class="radial-center"><p>default</p></div> <div class="radial-top"><p>at top</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70% 90% at <br />bottom left</p></div> <div class="radial-various-1"><p>various 1</p></div> <div class="radial-various-2"><p>various 2</p></div> </section> <section class="color-stops"> <div class="color-stops-1"><p>yellow 10%, green</p></div> <div class="color-stops-2"><p>to top right, yellow, <br>green 70%, <br>blue</p></div> </section> </body> </html>
body {
padding: 1.25em; /* 20px/16px, so 20px on each side */
font-size: 100%;
}
div {
float: left;
height: 150px;
margin: 10px;
width: 150px;
}
p {
color: #fff;
font: bold 1.25em/1 sans-serif; /* 20px/16px */
padding-top: 1.65em; /* 33px/16px */
text-align: center;
}
/* NOTE: The gradients below are in the standard CSS3 syntax. The browsers that support them are Chrome 26+, Firefox 16+, IE 10+, and Opera 12.10+. See gradients-with-browser-prefixes.css for the same gradient effects, but with the vendor prefix code also included so the gradients will work on several older browsers.A background with a "fallback" comment is the color that will show in browsers that don't support the gradient syntax. You can use a backgroundimage as a fallback as well (either on its own or in combination with a color).For example, background: red url(gradient-image.jpg) no-repeat; . */
/* LINEAR GRADIENTS
------------------------------------------ */
/* :::: Vertical :::: */
.vertical-down {
background: silver; /* fallback */
/* default gradient, so you don't need to specify "to bottom" before the colors */
background: linear-gradient(silver, black);
}
.vertical-up {
background:silver;
background: linear-gradient(to top, silver, black);
}
/* :::: Horizontal :::: */
.horizontal-rt {
background: silver; /* fallback */
background: linear-gradient(to right, silver, black);
}
.horizontal-lt {
background: silver; /* fallback */
background: linear-gradient(to left, silver, black);
}
/* :::: Diagonal Angles :::: */
/* Note: The figures on page 377 show aqua as the fallback color, but I've switched it
to navy below because the white text will be easier to read on a navy background. */
.angle-bot-rt {
background: navy; /* fallback */
background: linear-gradient(to bottom right, aqua, navy);
}
.angle-bot-lt {
background: navy; /* fallback */
background: linear-gradient(to bottom left, aqua, navy);
}
.angle-top-rt {
background: navy; /* fallback */
background: linear-gradient(to top right, aqua, navy);
}
.angle-top-lt {
background: navy; /* fallback */
background: linear-gradient(to top left, aqua, navy);
}
/* :::: Angles via Degrees :::: */
.angle-120deg {
background: navy; /* fallback */
background: linear-gradient(120deg, aqua, navy);
}
.angle-290deg {
background: navy; /* fallback */
background: linear-gradient(290deg, aqua, navy);
}
/* RADIAL GRADIENTS
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
text-shadow: 0 0 3px #000;
}
.radial-center {
background: red; /* fallback */
background: radial-gradient(yellow, red); /* default */
}
.radial-top {
background: red; /* fallback */
background: radial-gradient(at top, yellow, red);
}
.radial-size-1 {
background: red; /* fallback */
background: radial-gradient(100px 50px, yellow, red);
}
.radial-size-2 {
background: red; /* fallback */
background: radial-gradient(70% 90% at bottom left, yellow, red);
}
.radial-various-1 {
background: red; /* fallback */
background: radial-gradient(closest-side at 70px 60px, yellow, lime, red);
}
.radial-various-2 {
background: red; /* fallback */
background: radial-gradient(30px 30px at 65% 70%, yellow, lime, red);
}
/* LINEAR GRADIENTS WITH COLOR STOPS
------------------------------------------ */
.color-stops div {
margin-bottom: 30px;
}
.color-stops p {
padding-top: 25px;
text-shadow: 0 0 3px #000;
}
.color-stops-2 p {
font-size: 18px;
line-height: 1.05;
}
.color-stops-1 {
background: green; /* fallback */
background: linear-gradient(yellow 10%, green);
}
.color-stops-2 {
background: green; /* fallback */
background: linear-gradient(to top right, yellow, green 70%, blue);
} Enter background: color or background-color: color , where color can be a hexadecimal number, RGB value, or any other supported color name. Images can also be used. It's best not to use RGBA, HSL, or HSLA values as fallback background colors (don't worry if you don't plan to support IE), because IE8 and previous versions do not support it.
background: linear-gradient( . If you want the gradient direction to be from top to bottom (the default direction), you can skip this step. Add a comma after the input direction, and the directions refer to top , to right , to bottom right , to top right , etc. Or add a comma after the input direction, where the direction refers to the angle value (such as 45deg , 107deg , etc.). Define the gradient color according to the "specified color" mentioned later ); complete the gradient.background: radial-gradient( . Specify the shape of the gradient. If you want to specify the size, you can determine it yourself based on the size specified in the third step. Otherwise, enter circle or ellipse . Specify the size of the gradient. If you want the size to be the automatically specified value (default value is ·farthest-corner·, the farthest corner), otherwise enter a length value representing the width and height of the gradient (such as 200px or 7em ) or a pair of values representing the width and height ( 390px 175px or 60% 85% ) Note that if only one value is used, the value cannot be a percentage or enter closest-side , farthest-side , closest-corner or farthest-corner . These keywords represent how far the gradient can stretch relative to its center. The bounds determine the size of the gradient. You can skip this step if you want the gradient to start at the center of the element. . Enter at top , at right , at bottom left , at top right , etc. to represent the value of the gradient center position. Or enter a pair of coordinates representing the gradient center position, starting with at , such as at 200px 43px , at 30% 40% , at 50% -10px , etc. Define the gradient color ); complete the gradient. Use the opacity attribute to modify the transparency of an element. The method is to enter opacity: x , where x represents the opacity of the element (two decimal places, without unit).
The default value of opacity is 1 (completely opaque), and the range is 0~1 .
By using the opacity attribute and the :hover pseudo-attribute, you can produce some interesting and practical effects. For example, img { opacity: .75; } can set the image to 75% opacity by default, img:hover { opacity: 1; } can cause the element to become opaque when the user mouseovers it. This effect is often seen when linking thumbnails to full-size versions. For visitors, levitation enhances the movement of the image.
The opacity attribute and the transparent background color set using RGBA or HSLA are two concepts that are easily confused. opacity affects the entire element (including its content), while background-color: rgba(128,0,64,.6); such a setting only affects the transparency of the background.
Using :before and :after pseudo-elements is a great way to add some incredible design effects to your pages. They can be combined with the content attribute to create so-called generated content. Generated content refers to content created through CSS rather than HTML.
... <p>This area is one of the most tranquil spaces at the Villa. As I wandered around, enjoying shade provided by sycamore and laurel trees and serenaded by splashing water from two sculptural fountains, I couldn't help but think … <a href="victoria.html" class="more">Read More</a></p> ...
/* The generated content */
.more:after {
content: " »";
} Through the above code, the element with class="more" can display a double arrow after it. If it needs to be changed in the future, you only need to modify the .more class without changing a large number of HTML pages.
Text displays quickly in the browser, but images tend to slow down page loading. To solve this problem, you can combine multiple images into a single background image ( sprite ), and then control which part of the image is displayed through CSS, using the background-position attribute.
.documents li {
margin-top: .45em;
}
/* Each link in the HTML has this class */
.icon {
display: inline-block;
line-height: 1.1;
font-size: .875em;
min-height: 16px; /* set to height of icon so it isn't cut off at all */
padding-left: 23px;
padding-top: 2px;
/* allows positioning the icon absolutely relative to elements with class="icon" in the HTML */
position: relative;
}
.icon:before {
background-image: url(../img/sprite.png);
content: " ";
display: block;
height: 16px; /* icon height */
left: 0; /* default. change this if want the icon to appear in different spot */
position: absolute;
width: 16px; /* icon width */
top: 0; /* default. change this if want the icon to appear in different spot */
}
/* Shift position of sprite image for any document filename that ends with .xls */
a[href$=".xls"]:before {
background-position: -17px 0;
}
/* Shift position of sprite image for any document filename that ends with .docx */
a[href$=".docx"]:before {
background-position: -34px 0;
} sprite can be applied to any number of elements. In the above example, use .icon:before to achieve the desired effect. In this way, sprite is the background image of the space generated by content: " "; . Set it to display: block; so you can set the height and width to match the size of the icon. Without these three properties, the image will not be displayed. By using background-position you can put the correct icon into that position.
This concludes this article about using CSS3 to enhance style effects. For more information on CSS3 style effect enhancement, please search previous articles on downcodes.com or continue to browse the related articles below. I hope you will support downcodes in the future. com!