Home > Developer > Web Develop
By reading and learning books "CSS3 Combat" summary
"CSS3 Combat"/Shing Lum.-Beijing Machinery Industry press 2011.5
IE does not support CSS gradients, but it provides a gradient filter that can be used to achieve a simple gradient effect.
Basic syntaxfilter：progid:DXImageTransform.Microsoft.Gradient(enabled=bEnabled,strartColorStr=iWidth,endColorStr=iWidth)
The parameters of this parameter are described as follows:
Enabled: Sets or retrieves whether the filter is active. An optional Boolean value that includes true and false, with a default value of True, indicating the activation state.
StartColor: Sets or retrieves the start color and transparency of a color gradient. Optional, formatted as #aarrggbb. AA,RR,GG,BB is a 16-binary positive integer with a value range of 00~ff. RR specifies a red value, GG specifies a green value, BB specifies a blue value, AA specifies the transparency, 00 is completely transparent, and FF is completely opaque. Values that exceed the range of values will be reverted to the default values. The value range is #ff0000~ #FFFFFF, and the default value is #ff0000ff, which is opaque blue.
ENDCOLORSTR: Sets or retrieves the end color and transparency of a color gradient. The default value is #ff000000, which is opaque black.
Using the IE filter to design the gradient background, and then the background image to design graphics and illustrations effect.
Code :
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-type" Content="text/html; charset=gb2312 " /><title>CSS gradient implementation method of IE browser engine</title><style type="Text/css">Body { padding:1em; /Let the gradient background fill the entire page/ margin:0; text-align:center; / * Vertical gradient background for web design * / filter: progid:DXImageTransform.Microsoft. Gradient (gradienttype=0, startcolorstr=#9999FF, endcolorstr= #ffffff); } H1 {/ * Heading style * / color: White; font-size:px ; height:px ; line-height:px ;/ * Control text display position * / / * The block element is centered in the Jedi Locator * / position:Absolute ;Left :% ; margin-left:-px ; padding-left:px ; border-bottom:solid 2px #c72223 ;/ * Insert a decorative icon for the title * / background:url (images/icon4.png) No-repeat left center ;}ul {/ * list box style * / / * Clear list Default style * / list-style-type:None ; margin:px 0 0 0 ; padding:0 ; background:url (images/bg6.png) no-repeat right Bottom ;/ * Design Illustration background * / Clear:both ; text-align: Left;/ * Restore default alignment * /}Li {line-height : 1.5 em ; margin : 6 px Auto ; /* design Personalized list icons for list items */ font-size : 1 4 px ; background : url (images/icon3.png) no-repeat left 3 px ; padding-left : 20 px ; </style></head><body><H1>Like is a kind of mood, love is a Feeling</H1><ul> <li>There is a kind of love called fetish, such as a lot of people to Leslie, sometimes this is really good, there is no more than love a person more safe and eternal.</li> <li>There is a love called infatuation, a certain time, suddenly found that they are fascinated by someone or a feeling, but that will not last long. Sometimes infatuation turns into love.</li> <li>Love must have a crush, like. Can crush, like is not love.</li> <li>When you finally understand what is love, often life to half. Life on the road to meet a true love of their own people, is the opportunity.</li> <li>Sometimes, love is a moment of feeling, love can not be long-term retention, if the two people run well will be long-term retention. Love is fragile at the same time, love can be broken.</li> <li>Sometimes, love is a wish, a mood that can make you happier with each other. A good love must be inseparable from tolerance.</li> <li>Sometimes, love is a kind of nature. Flowers blossom and Fall, cloud Cirrus a little not forced.</li> <li>When you can look at feelings in a dull mood, love becomes meaningful.</li> <li>Love sometimes makes people very harsh, but later will be very tolerant. When you love each other more than you love yourself, that love will be very tolerant.</li> <li>Like a person will not be very harsh on him, because like will not have more requirements. On the contrary, love is harsh.</li> <li>Like a person will not be very heartache for her, love is often very heartache. Love is a kind of belonging, like not belong to.</li> <li>In love with the edge of the people wandering, if you try to leave very far, but also in a late night to think of him quietly, think of heartache and tears, it must be love.</li> <li>Before falling in love, there may be a long love, sometimes like can be converted into love, sometimes like will fade away. The original person and people are parallel on some points, sassafras shoulder and too ordinary, turn left, turn right, the next intersection, there will be new scenery.</li> <li>Sometimes love can bring regrets, but love can bring harm. This damage will eventually become a blessing to each other's life. But like will be more and more light, finally in the heart left a indifferent shadow. Love is more powerful than love.</li></ul></body></html>Demo Effect:
CSS gradient implementation method of standardization25 Gradient Background web design case Appreciation
Draft standard lineage Gecko engine gradient design method: http://dev.w3.org/csswg/css3-images/#gradients
"CSS3" notes--gradient design (iii)
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
