Enhancement with CSS3
Skip text gradient
/* This code achieves the gradient effect when the mouse slides over the link */ a { color: #007c21; transition: color .4s ease; } a:hover { color: #00bf32; }
Create rounded corners for elements
Using CSS3, you can create rounded corners for most elements (including form elements, images, and even paragraph text) without introducing additional tags 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 of using CSS rounded corners contain the necessary vendor prefixes to support older versions of Android, Mobile Safari and Safari browsers. For. circle, 75 PX works the same as 50% because the size of the element is 150 pixels * 150 pixels.
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; }
Create four identical rounded corners for the element
This step is optional, input - webkit-border-radius: r, where R is the radius size of the corner, expressed as length (in units).
Enter border-radius: r, where R is the radius of the corner, using the same value as in the first step. This is the standard short form grammar for this attribute.
Create a rounded corner for the element
This step is optional, input - webkit-border-top-left-radius: r, where R is the radius of the upper left corner, expressed as length (in units).
Enter border-top-left-radius: r, where r uses the same value as in the first step. This is the standard long formal grammar for this attribute.
Create upper right corner using top-right; create lower right corner using bottom-right; create lower left corner using bottom-left.
Create oval rounded corners
This step is optional. Input - webkit-border-radius: x/y, where x is the radius of the corner in the horizontal direction and Y is the radius of the corner in the vertical direction, all expressed as length (band unit).
Enter border-radius: x/y, where x and y are equal to the values in the first step.
Create graphics using border-radius (attributes are not inherited)
Input - webkit-border-radius: r where R is the radius size of the element (unit of length). To create a circle, you can use a short form of grammar. 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 size of the element (unit of length), equal to R in the first step. This is the standard prefix-free grammar.
Note: Old browsers that do not support border-radius only present elements in square corners. Border-radius only affects the angle of the element applied to the style, but does not affect the angle of its child elements. Therefore, if a child element has a background, the background may be displayed at the corner position of one or more parent elements, thus affecting the rounded corner style. Sometimes the background of an element (not the background of a child element) passes through its rounded corners. To avoid this, you can add a style rule after the border-radius declaration of the element: background-clip: padding-box;.
Adding Shadows to Text
_Using text-shadow, we can add dynamic shadowing effects to text in paragraphs, headings and other elements without using images to represent text.
Adding shadows to the text of the element
Enter text-shadow:.
Enter values representing x-offset (horizontal offset), y-offset (vertical offset), blur-radius (ambiguous radius) and color (the first three values have length units, and the four values are not separated by commas), such as -2px 3px 7px#999.
Adding multiple shadows to the text of the element
Enter text-shadow:.
Enter the values of x-offset (horizontal offset), y-offset (vertical offset), blur-radius (ambiguous radius) and color (the first three values are units of length, and there is no comma separation between the four values). The value of blur-radius is optional.
Input (comma).
Repeat the second step with different values for the four attributes.
<!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 grey than #aaa */ } .blur { text-shadow: 2px 2px 10px grey; } .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 s. The first, second and fifth values of the fuzzy radius are omitted. The. multiple class tells us that multiple shadow styles can be added to a single element, separated by commas between each set of attributes. In this way, special and interesting effects can be created by combining multiple shadow styles.
Change text-shadow (property is inherited) back to the default value
_is to enter text-shadow: none; this property does not need to enter the manufacturer prefix.
_text-shadow property accepts four values: x-offset with length unit, y-offset with length unit, optional blur-radius with length unit, and color value. If blur-radius is not specified, its value is assumed to be 0. The values of x-offset and y-offset can be either positive or negative integers, that is to say, 1px and -1px are valid. The blur-radius value must be a positive integer. All three values can be zero. Although the grammar of text-shadow is similar to the grammar of border and background attributes, it cannot specify four attribute values independently as border and background attributes. If text-shadow is not specified, it uses the initial value none.
Adding shadows to other elements
_Use text-shadow attributes to add shadows to the text of the element, and box-shadow attributes to add shadows to the element itself. Their basic set of attributes is the same, but box-shadow also allows the use of two optional attributes: inset keyword attributes and spread s attributes (for expanding or shrinking shadows).
The_box-shadow attribute accepts six values: x-offset and y-offset with length units, blur-radius with length units, inset keywords, spreads with length units and color values. If the values of blur-radius and spreads are not specified, 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 adding one or more shadows using box-shadows. The first five classes each apply a different shadow style. The last class applies two shadows (more shadows can also be applied). Browsers that don't understand box-shadows ignore these CSS styling rules and render shadowless pages.
Adding Shadows to Elements
Enter - webkit-box-shadow:.
Enter values representing x-offset, y-offset, blur-radius, spread s, and color (the first four values are in units of length), such as 2px 2px 5px.
Enter box-shadow:, and repeat the second step.
Create Inner Shadows
Enter - webkit-box-shadow:.
Enter values representing x-offset, y-offset, blur-radius, spread s, and color (the first four values all have length units), such as 2px 2px 5px.
Enter inset after the colon and a space (you can also enter inset and a space before the second step).
Enter box-shadow:, and repeat the second and third steps.
Applying multiple shadows to elements
Enter - webkit-box-shadow:.
Enter values representing x-offset, y-offset, blur-radius, spread s, and color (the first four values all have length units), such as 2px 2px 5px. If necessary, include the inset keyword.
Enter a comma.
Repeat the second step with different values for each attribute.
Enter box-shadow:, and repeat the second to fourth steps.
Change box-shadow (property is not inherited) back to the default value
Input - webkit-box-shadow: none;.
Enter box-shadow: none;.
Note: The values of x-offset, y-offset and spread s can be positive or negative integers. The blur-radius value must be a positive integer. All three values can be zero. The inset keyword lets the shadow lie inside the element.
Applied multiple backgrounds
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 for a single element (no vendor prefix is required)
Enter background-color: b, where B is the alternate background color that you want to apply for the element.
Enter background-image: u, where u is a list of URLs referenced by absolute or relative paths (separated by commas). For browsers that support multiple backgrounds, images overlap in layers, with the first image in a comma-separated list at the top.)
Enter background-position: p, where p is a set of paired x-offsets and y-offsets (either positive or negative; with units of length or keywords such as center top), separated by commas. For each url specified in the second step, there should be a set of x-offsets and y-offsets.
Enter background-repeat: r, where R is a repeat-x, repeat-y, or no-repeat value, separated by commas, and each url specified in step 2 corresponds to a value.
For multi-background images, standard short-form grammar can be used, even if commas are used to separate each set of background parameters. The advantage of this representation is that developers can specify either alternate background colors or images 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%; }
Use Gradient Background
<!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); }
Create alternate background colors
Enter background: color or background-color: color, where color can be hexadecimal, RGB values, and any other supported color names, as well as images. It's better not to use RGBA, HSL or HSLA values as backup background colors (don't worry if you don't want to support IE), because IE8 and previous versions don't support it.
Define Linear Gradient
Enter background: linear-gradient().
If you want the gradient to go from top to bottom (the default direction), you can skip this step. A comma is added after the input direction, which refers to values such as 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.).
Gradient colors are defined according to the "specified colors" mentioned later.
Input; Complete the gradient.
Define radial gradient
Enter background: radial-gradient().
Specifies the shape of the gradient. The desired size can be determined by the size specified in step 3. Otherwise enter circle or ellipse.
Specify the size of the gradient. Skip this step if you want the size to be automatically specified (default is farthest-corner, farthest corner). Otherwise, the input represents a length value of the gradient width and height (such as 200px or 7em) or a pair of values representing 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 much space the gradient can extend relative to the center of the gradient. The boundary determines the size of the gradient.
Specify the location of the gradient. You can skip this step if you want the gradient to start at the center of the element (the default value). Input at top, at right, at bottom left, at top right, etc. to indicate the value of the gradient center position. Or enter a pair of coordinates representing the position of the gradient center and start with at, such as at 200px 43px, at 30% 40%, at 50% -10px, etc.
Define gradient colors.
Input; Complete the gradient.
Specified color
Enter at least two colors, separated by commas. The specified first color appears at the beginning of the gradient and the last color appears at the end of the gradient. For radial gradients, they are the innermost and outermost colors, respectively.
Set opacity for elements
_opacity attribute does not inherit.
_Use opacity attributes to modify the transparency of elements. The method is to enter opacity: x, where x denotes the opacity of element elements (two decimal places, no units).
_opacity has a default value of 1 (completely opaque), ranging from 0 to 1.
_Some interesting and practical effects can be produced by using opacity attributes and: hover pseudo-attributes. For example, img {opacity:.75;} can set the image to 75% opacity by default, and img: hover {opacity: 1;} can cause the element to become opaque when the user hovers over the element. This effect is often seen when linking thumbnails to full-size versions. For visitors, suspension enhances the motion of the image.
_opacity attribute and transparent background color set with RGBA or HSLA are two confusing concepts. Opacity affects the entire element (including its content), while background-color: RGBA (128, 0, 64, 6); such settings only affect background transparency.
The effect of generating content
Use: before and: after pseudo elements to easily add some incredible design effects to the page. They can be used in conjunction with content attributes to create so-called generated content. Generating 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 be displayed with a double arrow. If it needs to be changed later, it only needs to modify the. more class, without changing a large number of HTML pages.
Using sprite to merge images
In browsers, text display speed is very fast, but images tend to slow down the loading speed of pages. To solve this problem, multiple images can be combined into a single background image (sprite), and then through CSS control which part of the image is displayed, 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. So sprite is the background image of the space generated by content: ""; Set it to display: block;, so you can set the height and width that match the size of the icon. Without these three attributes, the image will not be displayed. By using background-position, you can place the correct icon in that location.
HTML and CSS Reading notes
Welcome to my blog, there will be more updates: Levi.Blog
This article is my original, using Knowledge Sharing "Signature-Noncommercial Use-Sharing in the Same Way" 4.0 (CC BY-NC-SA 4.0) License Agreement License.
This work can be freely copied, disseminated and deduced based on this work. If you have the above needs, please inform us by E-mail and so on, and add your signature at the beginning of the article. [Ding Xuewen ] Links to the original text and licensing agreement information, and specifies that modifications (if any) shall not be used for commercial purposes. Thank You for Your Cooperation. For more information, please click to see license agreement and Copyright notice Specific content.
Contact information:
E-mail: xuewending1995@gmail.com [Please indicate your intention]
GitHub: Levi.GitHub