Over 16,533,269 people are on fubar.
What are you waiting for?

DJ ICEMAN MFKN ROXX's blog: "CSS3 TRICKS AND ENHANCEMENTS & MORE"

created on 11/04/2011  |  http://fubar.com/css3-tricks-and-enhancements-more/b344478  |  5 followers
posted on 03/12/2013&nbs-07:00;@&nbs-07:00;10:03&nbs-07:00;pm

CSS3 CODE ENHANCEMENTS FOR CSS SKINS AND PROFILE SKINS.



CSS SPEAK:
This property specifies whether content will be aurally rendered, and the nature of its rendering. It controls aural rendering in much the same way the ‘display’ property controls visual rendering.Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parent.normal Uses normal pronunciation rules for the current language to render content.none Suppresses/skips aural rendering of the element. No time is taken to render the element. Child elements can override this value.spell-out Spells the content one character at a time (useful with acronyms and abbreviations.)
FOR ALL MAJOR BROWSERS:
-moz-speak: spell-out;

-o-speak: spell-out;

-khtml-speak: spell-out;

-webkit-speak: spell-out;

-ms-speak: spell-out;

speak: spell-out;

 
CSS FONT-STRETCH:The font-stretch property is used to expand or contract (condense) the horizontal width of the font. The change is relative to the normal width of the font as displayed by the browser.
narrower
The narrower value contracts the font to the next smaller width.
wider
The wider value expands the font to the next larger width. The order descends from narrowest to widest in value. The normal value is the normal width of the font as displayed by the browser.
Possible Values
Value Descriptionnormal Sets the scale of condensation or expansion  to normalwider Sets the scale of expansion to the next expanded valuenarrower Sets the scale of condensation to the next condensed valueultra-condensed extra-condensed
      condensed
semi-condensed
semi-expanded
      expanded
extra-expanded
ultra-expanded
Sets the scale of condensation or expansion of the font-family. “ultra-condensed” is the most condensed (narrowest) value, and “ultra-expanded” is the most expanded (widest) value   

FOR ALL MAJOR BROWSERS
-moz-font-stretch: ultra-condensed;

-o-font-stretch: ultra-condensed;

-khtml-font-stretch: ultra-condensed;

-ms-font-stretch: ultra-condensed;

-webkit-font-stretch: ultra-condensed;


CSS BORDER-COLLAPSE:specifies which border rendering mode to use. In the collapsed border model, adjacent table cells share borders. 
Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parentcollapse Use the “collapsed borders” rendering modelseparate Use the “separated borders” rendering model
for all major browsers:
-moz-border-collapse: separate;

-o-border-collapse: separate;

-khtml-border-collapse: separate;

-ms-border-collapse: separate;

-webkit-border-collapse: separate;

border-collapse: separate;


CSS BORDER-SPACING:This property specifies the distance between the borders of adjacent table cells in the “separated borders” model. The space between table cells uses the background color/image specified for the explicit or assigned TABLE element.Possible Values
Value Descriptioninherit Explicitly sets the value of this property to that of the parent.[length length] Specifies an explicit border spacing. Listing one length value should assign the value to both horizontal and vertical spacing, while specifying two values should assign the first value to the horizontal spacing and the second value to the vertical spacing.
-moz-border-spacing: 10pt 5pt;-o-border-spacing: 10pt 5pt;-khtml-border-spacing: 10pt 5pt;-webkit-border-spacing: 10pt 5pt;-ms-border-spacing: 10pt 5pt;border-spacing: 10pt 5pt;

CSS CAPTION-SIDE:
This property specifies the position of elements with an intrinsic (HTML CAPTION elements) or assigned ‘display’ property value of “table-caption” in relation to the table rendering box they are assigned to. Alignment within the table caption is accomplished using the ‘text-align’ and ‘vertical-align’ properties.
==========================================================================================

Possible Values
Value Descriptioninherit -Explicitly sets the value of this property to that of the parent.top -The caption is positioned above the rendered table box.bottom -The caption is positioned below the rendered table box.left -The caption is positioned to the left of the rendered table box.right -The caption is positioned to the right of the rendered table box.
the css3 markup:

=======================

-moz-caption-side: right;

-o-caption-side: right;

-khtml-caption-side: right;

-webkit-caption-side: right;

-ms-caption-side: right;

caption-side: right;

==========================================================================================
THIS IS FOR AN EXPERIMENTAL PROPERTY FOR EACH MAJOR BROWSER THAT has the ability to turn off its system underlines for accelerator keys until the ALT key is pressed (then the accelerator underline hint is displayed.) This property should have no effect in previous Microsoft OS versions, and if this system capability is turned off (or “on”, depending on how you look at it), it will also have no effect

.=========================================================================================
-moz-accelerator: true; 

-o-accelerator: true; 

-ms-accelerator: true; 

-khtml-accelerator: true; 

-webkit-accelerator: true; 

accelerator: true; 



THIS IS FOR BOX SHADOWS FOR EACH MAJOR BROWSER
-moz-box-shadow: 0px 0px 17px white;

-webkit-box-shadow:  0px 0px 17px white;

box-shadow:  0px 0px 17px white;

-ms-box-shadow:  0px 0px 17px white;

-o-box-shadow:  0px 0px 17px white;

-khtml-box-shadow: 0px 0px 17px white;

THIS IS FOR BORDERS FOR EACH MAJOR BROWSER:  

border: 1px solid green;

-moz-border: 1px solid green;

-webkit-border: 1px solid green;

-ms-border: 1px solid green;

-o-border: 1px solid green;

-khtml-border: 1px solid green;


THIS IS FOR MAKING EACH BORDER SIDE A DIFFERENT COLOR IN EACH MAJOR BROWSER

-moz-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-moz-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-moz-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-moz-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-ms-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-ms-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-o-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-o-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-khtml-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-khtml-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

-webkit-border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

-webkit-border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-top-colors: #cccccc #cccccc #cccccc #cccccc #cccccc #ff4064 #cccccc #cccccc #cccccc #cccccc #cccccc #cccccc;

border-bottom-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-left-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

border-right-colors: #7976ff #7976ff #7976ff #ff4064 #ff4064 #ff4064 #fcff07 #fcff07 #fcff07 #24ff52 #24ff52 #24ff52 #7976ff #7976ff;

THIS IS FOR BORDER RADIUS FOR EACH MAJOR BROWSER:

-moz-border-radius: 5px;

-webkit-border-radius: 5px;

-ms-border-radius: 5px;

-o-border-radius: 5px;

-khtml-border-radius: 5px;

border-radius: 5px;

THIS IS FOR BORDER IMAGES FOR EACH MAJOR BROWSER:
-moz-border-image: url() 20 20 20 20 stretch stretch;

-ms-border-image: url() 20 20 20 20 stretch stretch;-o-border-image: url() 20 20 20 20 stretch stretch;-khtml-border-image: url() 20 20 20 20 stretch stretch;

-webkit-border-image: url() 20 20 20 20 stretch stretch;

border-image: url() 20 20 20 20 stretch stretch;

THIS IS FOR TEXT SHADOWING FOR EACH MAJOR BROWSER

-moz-text-shadow: #COLOR 0px 0px 0px;

-ms-text-shadow: #COLOR 0px 0px 0px;

-o-text-shadow: #COLOR 0px 0px 0px;

-khtml-text-shadow: #COLOR 0px 0px 0px;

-webkit-text-shadow: #COLOR 0px 0px 0px;

text-shadow: #COLOR 0px 0px 0px;


THIS IS FOR TEXT DECORATIONS FOR EACH MAJOR BROWSER:

-moz-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-ms-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-o-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-khtml-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

-webkit-text-decoration: blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;

text-decoration:blink or none or Bold or Bolder or oblique or Uppercase or lowercase or Italics;


THIS IS FOR BACKGROUND CLIP & BACKGROUND ORIGIN FOR EACH MAJOR BROWSER:

-moz-background-clip: padding; 

-moz-background-origin: padding-box;  

-ms-background-clip: padding; 

-ms-background-origin: padding-box;   

-khtml-background-clip: padding; 

-khtml-background-origin: padding-box;  

-o-background-clip: padding; 

-o-background-origin: padding-box;   

-webkit-background-clip: padding; 

-webkit-background-origin: padding-box;  

 background-clip: padding; 

background-origin: padding-box;    

THIS IS FOR BACKGROUND-SIZING FOR EACH MAJOR BROWSER:


background-size: 100% 100%;

-moz-background-size: 100% 100%;

-ms-background-size: 100% 100%;

-o-background-size: 100% 100%;

-khtml-background-size: 100% 100%;

-webkit-background-size: 100% 100%;

THIS IS FOR THE CSS3 MULTIPLE BACKGROUNDS PROPERTY FOR EACH MAJOR BROWSER:
(*****NOTE THAT THESE CAN BE ALTERED TO YOUR OWN SPECS*****)

-moz-background-image: url(left.png), url(right.png), url(main.png);

-moz-background-repeat: no-repeat, no-repeat, repeat-x;

-moz-background-position: left top, right top, left top;

-o-background-image: url(left.png), url(right.png), url(main.png);

-o-background-repeat: no-repeat, no-repeat, repeat-x;

-o-background-position: left top, right top, left top;

-khtml-background-image: url(left.png), url(right.png), url(main.png);

-khtml-background-repeat: no-repeat, no-repeat, repeat-x;

-khtml-background-position: left top, right top, left top;

-ms-background-image: url(left.png), url(right.png), url(main.png);

-ms-background-repeat: no-repeat, no-repeat, repeat-x;

-ms-background-position: left top, right top, left top;

-webkit-background-image: url(left.png), url(right.png), url(main.png);

-webkit-background-repeat: no-repeat, no-repeat, repeat-x;

-webkit-background-position: left top, right top, left top;

background-image: url(left.png), url(right.png), url(main.png);

background-repeat: no-repeat, no-repeat, repeat-x;

background-position: left top, right top, left top;

THIS IS FOR THE BORDER RADIUS FOR EACH MAJOR BROWSER:


-moz-border-radius-top-left: 21px;

-moz-border-radius-top-right: 21px;

-moz-border-radius-bottom-left: 21px;

-moz-border-radius-bottom-right: 21px;

-webkit-border-top-left-radius: 21px;

-webkit-border-top-right-radius: 21px;

-webkit-border-bottom-left-radius: 21px;

-webkit-border-bottom-right-radius: 21px;

-ms-border-radius-top-left: 21px;

-ms-border-radius-top-right: 21px;

-ms-border-radius-bottom-left: 21px;

-ms-border-radius-bottom-right: 21px;

-o-border-top-left-radius: 21px;

-o-border-top-right-radius: 21px;

-o-border-bottom-left-radius: 21px

;-o-border-bottom-right-radius: 21px;

-khtml-border-radius-top-left: 21px;

-khtml-border-radius-top-right: 21px;

-khtml-border-radius-bottom-left: 21px;

-khtml-border-radius-bottom-right: 21px;

-webkit-border-top-left-radius: 21px;

-webkit-border-top-right-radius: 21px;

-webkit-border-bottom-left-radius: 21px;

-webkit-border-bottom-right-radius: 21px;


THIS IS FOR THE TRANSFORMATION TO ROTATION:
-moz-transform: rotate(0deg);

-webkit-transform: rotate(0deg);

-o-transform: rotate(0deg);

transform: rotate(0deg);

-ms-transform: rotate(0deg);

-khtml-transform: rotate(0deg);

THIS IS FOR THE TRANSITIONAL ELEMENTS: 
-moz-transition-delay: 1s;

-moz-transition: all 1s ease-in-out;

-moz-transition-duration: 1s;

-moz-transition-timing-function: ease-in-out;

-moz-transition-property: all;

-ms-transition-delay: 1s;

-ms-transition: all 1s ease-in-out;

-ms-transition-duration: 1s;

-ms-transition-timing-function: ease-in-out;

-ms-transition-property: all;

-webkit-transition-delay: 1s;

-webkit-transition: all 1s ease-in-out;

-webkit-transition-duration: 1s;

-webkit-transition-timing-function: ease-in-out;

-webkit-transition-property: all;

-khtml-transition-delay: 1s;

-khtml-transition: all 1s ease-in-out;

-khtml-transition-duration: 1s;

-khtml-transition-timing-function: ease-in-out;

-khtml-transition-property: all;-o-transition-delay: 1s;

-o-transition: all 1s ease-in-out;

-o-transition-duration: 1s;

-o-transition-timing-function: ease-in-out;

-o-transition-property: all;

transition-delay: 1s;transition: all 1s ease-in-out;

transition-duration: 1s;

transition-timing-function: ease-in-out;

transition-property: all;


THIS IS FOR THE TRANSFORMATION WITH ROTATION AND SCALE PROPERTIES:

-webkit-transform: rotate(360deg) scale(1.3);

-moz-transform: rotate(360deg) scale(1.3);

-o-transform: rotate(360deg) scale(1.3);

transform: rotate(360deg) scale(1.3);



THIS IS FOR OPACITY & FILTER SETTINGS FOR EACH MAJOR BROWSER:
opacity: 0.70;

-moz-opacity: 0.70;

-o-opacity: 0.70;

-ms-opacity: 0.70;

-khtml-opacity: 0.70;

-webkit-opacity: 0.70;

filter: alpha(opacity=70);

-moz-filter: alpha(opacity=70);

-ms-filter: alpha(opacity=70);

-khtml-filter: alpha(opacity=70);

-o-filter: alpha(opacity=70);

-webkit-filter: alpha(opacity=70);

Report as NSFW [?]
view comments
posted on 12/10/2012&nbs-08:00;@&nbs-08:00;12:12&nbs-08:00;am

CSS3 CODE AND ENHANCEMANTS

CSS3 CODE  POWER TOOLS AND ENHANCEMANTS

Power Tool #2: Box Shadows
Browser Support:
Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+
Box shadows are another well supported feature. Their syntax looks like this:

-webkit-box-shadow: offset_x offset_y blur_radius color;  
-moz-box-shadow: offset_x offset_y blur_radius color;  
box-shadow: offset_x offset_y blur_radius color;  
Once again we have to use the vendor prefixes for Webkit and Mozilla. The first and second parameters of the box-shadow property are the offset positions from the left and top coordinates of the element. Setting a positive value to these properties moves the shadow to the right and down from the element, and setting a negative value moves the shadow to the left and up from the element. The blur_radius is the amount of blur you want to add to your shadow (how hard or fuzzy you want it). Finally, the last parameter is the color that you want the shadow to be. Adding a shadow to our previously used rounded div will create a nice looking effect.

-webkit-box-shadow: 5px 5px 10px #555;  
-moz-box-shadow: 5px 5px 10px #555;  
box-shadow: 5px 5px 10px #555;  
Another neat feature of CSS box shadows is the inset keyword. When the inset keyword is present, the shadow is rendered inside the box rather than outside. This can create a nice depressed look especially for buttons. Here is what our div would look like with an inset shadow.
-webkit-box-shadow: 0 0 20px #333 inset;  
-moz-box-shadow: 0 0 20px #333 inset;  
box-shadow: 0 0 20px #333 inset;  
The last feature of box shadows that is worth mentioning is the ability to have multiple shadows on the same element. This is very useful and can eliminate having extra markup in your HTML just to apply an additional shadow. All you have to do to create multiple shadows is separate them with commas. Here is an example:
-webkit-box-shadow: 0 0 20px #333 inset,  
                    20px 15px 30px yellow,  
                    -20px 15px 30px lime,  
                    -20px -15px 30px blue,  
                    20px -15px 30px red;  
  
-moz-box-shadow: 0 0 20px #333 inset,  
                 20px 15px 30px yellow,  
                 -20px 15px 30px lime,  
                 -20px -15px 30px blue,  
                 20px -15px 30px red;  
  
box-shadow: 0 0 20px #333 inset,  
            20px 15px 30px yellow,  
            -20px 15px 30px lime,  
            -20px -15px 30px blue,  
            20px -15px 30px red;  
Power Tool #3: Text Shadows
Browser Support:
Safari: 3.2+
Firefox: 3.5+
Chrome: 3.0+
Opera: 10.1+
Internet Explorer: Hopefully coming soon!
Text shadows are like box shadows except that they are shadows for text rather than the whole element. Luckily, there is no vendor prefix necessary for text shadow.
text-shadow: offset_x offset_y blur_radius color;  
The options for text shadow are the same as for box-shadow except that there is no inset text shadow support. Here is a demo that makes otherwise-invisible text pop off the page.
color: #fff /* text color to white */  
text-shadow: 0 0 50px #333;  
This creates the following effect:
As with box shadows, it is possible to have multiple text shadows just by separating them with commas. Here is an example that creates a flaming text effect.
text-shadow: 0 0 4px #ccc,  
             0 -5px 4px #ff3,  
             2px -10px 6px #fd3,  
             -2px -15px 11px #f80,  
             2px -18px 18px #f20;  
Text shadows can create some awesome effects, and can complement other effects very nicely.
Power Tool #4: Gradients
Browser Support:
Safari: 4+
Firefox: 3.6+
Chrome: 5+
Opera: Hopefully coming soon!
Internet Explorer: Hopefully coming soon!
Gradients are one of the most powerful features available to you if you want to create these awesome effects. While full browser support is still not quite there, you can always provide fallback styling to browsers without support. Remember: Websites do not need to look the same in every browser. There are two types of gradients that you can create: linear gradients and radial gradients. As you might expect, linear gradients move along a straight line and radial gradients go around a circle. Gradients can be used anywhere you might have used an image in the past, such as for the background, border-image, or list bullets.
Unfortunately for web developers, there are two different syntaxes: one for Mozilla and another for Webkit.
Syntax for Webkit
Safari and Chrome both use the Webkit rendering engine, so they always use the same syntax. Their gradient syntax is pretty simple:
-webkit-gradient(<type>, <point> [, <radius>]?, <point> [, <radius>]? [, <stop>]*)  
Webkit uses the same same syntax for both linear and radial gradients. Just change the type parameter to switch between them.
Syntax for Mozilla
Firefox uses separate syntaxes for linear and radial gradients, both of which are very different from their Webkit counterparts.
-moz-linear-gradient( [<point> || <angle>,]? <stop>, <stop> [, <stop>]*)  
-moz-radial-gradient( [<position> || <angle>,]? [<shape> || <size>,]? <stop>, <stop>[, <stop>]*)  
Let’s look at these syntaxes separately.
Linear Gradients
For simplicty, here is a Webkit’s syntax just for linear gradients.
-webkit-gradient(linear, start_x start_y, end_x end_y, stop, stop...)  
Firefox’s syntax looks like this.
-moz-linear-gradient(angle start_x start_y, stop, stop...)  
In the Webkit syntax start_x and start_y parameters specify the starting position of the gradient, and end_x and end_y specify the ending position of the gradient. You can use any of the standard CSS dimension values, including percentages, as well the keywords left, top, bottom, right, and center as values for these position parameters. Stops are a way for you to specify specific colors to be used at specific points along the gradient. You can have as many color stops as you want, but you must have at least two: a starting and ending color. For additional color stops, you can use the color-stop() function providing a position as a percentage or a decimal between 0 and 1 as well as a color. For example: color-stop(50%, black) would create a black color stop at exactly half way through the gradient. Rather than writing 0% and 100% for the starting and ending colors, the convenience functions from() and to() exist. All you have to provide to these is the color.
Firefox’s syntax is much less straight forward, and has many ways of accomplishing the same goal. The only thing that is static about the syntax are the color stops, which are just a color followed by a position as a percentage. For the starting and ending positions, you can leave off 0% and 100%, and if you leave the position off of any of the other color stops, they are distributed evenly throughout the gradient. Unlike the Webkit syntax, Firefox’s syntax does not have an ending position, only a starting position and an angle. The gradient will run out from the starting position at the specified angle. If you leave the angle out, it will run out perpendicularly from that point. If you leave out the starting point all together, the gradient will run from top to bottom. This syntax is kind of confusing and a bit less flexible than Webkit’s simple syntax, so it is best to learn by example.
Here is a simple example of CSS gradients in action. This gradient goes from the top left corner to the bottom left corner (in other words, from top to bottom) and from red to white.
-webkit-gradient(linear, left top, left bottombottom, from(red), to(white));  
-moz-linear-gradient(red, white)  
Setting this as the background property of a div, we get the following result:
By adding a color stop and changing the angle of the gradient, we can get a different effect.
 
-webkit-gradient(linear, left top, rightright bottombottom, from(red), color-stop(50%, white), to(red));  
-moz-linear-gradient(left top, red, white, red);  
Radial Gradients
Here is the syntax for radial gradients in Webkit.
-webkit-gradient(radial, inner_circle_center_x inner_circle_center_y, inner_circle_radius,  
                         outer_circle_center_x outer_circle_center_y, outer_circle_radius,  
                         stop, stop...)  
Firefox’s syntax looks like this.
-moz-radial-gradient(center_x center_y, shape size, stop, stop...)  
The Webkit syntax is a bit more complicated than the linear gradient syntax, but the same principles still apply. Radial gradients in Webkit have two circles: a starting circle and an ending circle. You specify the center X and Y positions for each of these circles along with their radii. Finally you specify the color stops the same way you did for linear gradients.
The Firefox syntax for radial gradients is similar to the syntax for linear gradients in that all of its parts except the color stops can be left out. You can specify the center X and Y positions of the gradient much like the inner circle’s coordinates in the Webkit syntax, but there is no outer circle in Firefox. Instead you can specify a shape and size of the gradient. The shape can be either a circle or an ellipse, the latter of which is not currently possible to create in Webkit. The size accepts many different keywords, but not a pixel size as you might have expected. You can read about what each of these constants do on the Mozilla Developer Center. For this tutorial, we will just use the defaults. Once again, if you leave the center X and Y positions out, they will be assumed to be the center of the object you are filling with a gradient. If you leave out the shape and size, the gradient will be assumed to be a circle that fills the entire box.
-webkit-gradient(radial, center center, 0, center center, 50, from(white), to(red));  
-moz-radial-gradient(white, red)  
If we apply this gradient to the background of a div, this is what we will get.
Power Tool #5: Multiple Backgrounds
Browser Support:
Safari: 3.2+
Firefox: 3.6+
Chrome: 3.0+
Opera: 10.5+
Internet Explorer: 9.0+
Multiple backgrounds make it easy to create complex effects in CSS without needing to create additional markup in your HTML. Having support for this means that elements can have multiple gradients and image backgrounds along with the standard background color. There is no difference in the syntax of multiple backgrounds from single backgrounds – just comma separate them and off you go!
Here is an example of a div with a gradient background and a nice textured effect using an image:
background: url(noise.png), -webkit-gradient(linear, left top, left bottombottom, from(#999), to(#333));  
background: url(noise.png), -moz-linear-gradient(#999, #333);  
We have to declare it twice since, as we’ve learned, there is a different gradient syntax for each browser. This creates the following effect:
Combining the Power: Building an Awesome CSS3 Button
Now that we have five great power tools at our disposal, let’s combine them to produce an even more awesome effect.
There are so many different types of buttons that you can choose to design. To be simple, let’s emulate something that already exists – the Mac OS X button style.
We will start off with our HTML code for this demo. It is really quite simple, just two DIVs and some text.

<div class="panel">  
    <div class="button">Button</div>  
</div>  
Now we will start off with our basic CSS. First, let’s style the panel.
.panel {  
    background: -webkit-gradient(linear, left top, left bottombottom, from(#bbbcbb), to(#959695));  
    background: -moz-linear-gradient(#bbbcbb, #959695);  
    background-color: #b7b9b7;  
    width: 100px;  
}  
The panel is just a nice container for our button. It has a gradient going from top to bottom between two nice grey colors. For those browsers that don’t support gradients, a fallback background-color is given.
Now, let’s look at the CSS for the actual button.
.button {  
    display: inline-block;  
    margin: 20px;  
  
    padding: 3px 6px;  
    font-family: 'Lucida Grande', Arial, sans-serif;  
    font-size: 13px;  
  
    -webkit-border-radius: 3px;  
    -moz-border-radius: 3px;  
    border-radius: 3px;  
  
    border: 1px solid rgba(0, 0, 0, 0.6);  
  
    background: -webkit-gradient(linear, left top, left bottombottom, from(#fbfcfb), to(#9d9e9d));  
    background: -moz-linear-gradient(#fbfcfb, #9d9e9d);  
    background-color: #c0c2c0;  
  
    text-shadow: rgba(255, 255, 255, 0.4) 0px 1px;  
  
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;  
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px;  
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px;  
  
    -webkit-user-select: none;  
    -moz-user-select: none;  
    cursor: default;  
}  
There is a decent amount of code here, which uses all of the power tools that I described above, except for multiple backgrounds. There are several sections to this code, which we will take one by one. The first two lines are just some simple layout information. Setting the button to display: inline-block makes it automatically extend to fit the content, no matter how much text you put in the button. The next section gives some font information to the button. Finally, in the third section we get to use our first power tool: border radius. In the case of our lovely button, we give it a nice 3px radius. Next we give the button a border. Notice that we are using rgba as a color here. This allows us to make the color partially transparent as we do here, creating a nice grayish color. In the next section of code, we set up the background of the button. We give it a gradient background as well as a solid color for fallback in browsers that don’t support gradients yet. Next, we use text shadow to make the text look slightly engraved into the button. Once again we use rgba here to give a partially transparent white to the text shadow. The pen-ultimate section of code creates a box shadow. Now, this does not actually look like a shadow, it actually looks like a second border, but it gives a nice highlight to the bottom of the button to make it look engraved into the background and compliments the border color. This is a useful trick to know if you ever want something to look like it has multiple borders – I use it a lot. Finally, the last section of CSS code is a nice trick that prevents text selection in Webkit based browsers and Firefox, and sets the cursor to the default arrow rather than the text selection cursor.
So far, this code makes our button look like this:
OK, so not too bad yet! Let’s move on to the button’s depressed look.
.button:active {  
    background: #B5B5B5;  
    -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,  
                        black 0px 1px 3px inset,  
                        rgba(0, 0, 0, 0.4) 0px -5px 12px inset;  
  
    -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px,  
                     black 0px 1px 3px inset,  
                     rgba(0, 0, 0, 0.4) 0px -5px 12px inset;  
  
    box-shadow: rgba(255, 255, 255, 0.4) 0 1px,  
                black 0px 1px 3px inset,  
                rgba(0, 0, 0, 0.4) 0px -5px 12px inset;  
  
    text-shadow: rgba(255, 255, 255, 0.3) 0px 1px;  
}  
When the button is pressed down, we change a number of things. First, we set the background to a plain color, removing the gradient that we had set eariler. This is because we will be creating the depressed look with a box shadow rather than a gradient. The next thing we do, is set that shadow—or rather multiple shadows. The first shadow in the list is the same one that we had in the normal state: the highlight on the bottom of the button. The second and third shadows are the ones that make our button look pressed. The first of these is a black inset shadow that is set down from the top 1 pixel and has 3 pixels of blur—a pretty dark looking shadow. The last shadow is also black but a slightly transparent black that is set up from the bottom 5 pixels with 12 pixels of blur. This creates the darkened look on the bottom of the button when it is pressed. The final thing that we need to do when this button is pressed down is just reduce the opacity of the text shadow by one notch so that it doesn’t stand out like a sore thumb.
Report as NSFW [?]
view comments
posted on 12/10/2012&nbs-08:00;@&nbs-08:00;12:12&nbs-08:00;am

CSS3 CODE AND ENHANCEMANTS

THIS WILL GIVE YOU A STITCHED LOOK:.stitched {   padding: 5px 10px;   margin: 10px;   background: #ff0030;   color: #fff;   font-size: 21px;   font-weight: bold;   line-height: 1.3em;   border: 2px dashed #fff;   border-top-left-radius: 3px;   -moz-border-radius-topleft: 3px;   -webkit-border-top-left-radius: 3px;   border-bottom-right-radius: 3px;   -moz-border-radius-bottomright: 3px;   -webkit-border-bottom-right-radius: 3px;   border-top-right-radius: 3px;   -moz-border-radius-topright: 3px;   -webkit-border-top-right-radius: 3px;   -moz-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);   -webkit-box-shadow: 0 0 0 4px #ff0030, 2px 1px 4px 4px rgba(10,10,0,.5);   box-shadow: 0 0 0 4px #ff0030, 2px 1px 6px 4px rgba(10,10,0,.5);   text-shadow: -1px -1px #aa3030;   font-weight: normal;}

THIS WILL REMOVE AN ITEM FROM THE PAGE, WITHOUT AFFECTING FLOW OR CAUSING SCROLL BARS.MUCH BETTER THAN display:none; OR EVEN visibility:hidden; 


#content {    junk;    top: -9999px;    left: -9999px;}

Make “Pre” Text Wrap:

/* Browser specific (not valid) styles to make preformatted text wrap */
pre { white-space: pre-wrap;       /* css-3 */ white-space: -moz-pre-wrap;  /* Mozilla, since 1999 */ white-space: -pre-wrap;      /* Opera 4-6 */ white-space: -o-pre-wrap;    /* Opera 7 */ word-wrap: break-word;       /* Internet Explorer 5.5+ */}

Multiple Borders:
HTML:
<img src="http://placedog.com/200/200">?

CSS:img {    /* #1 */    border: 5px solid hsl(0, 0%, 40%);        /* #2 */    padding: 5px;    background: hsl(0, 0%, 20%);        /* #3 */    outline: 5px solid hsl(0, 0%, 60%);        /* #4 AND INFINITY!!! (CSS3 only) */    box-shadow:        0 0 0 10px hsl(0, 0%, 80%),        0 0 0 15px hsl(0, 0%, 90%); 

Noise Data URI Image:
background-image: url(data:image/png;base64,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);
How To Use It
The simplest implementation is to paste the code into your existing CSS, then give any HTML elements that you want to apply noise to a class="noise" attribute. Yes, I know that’s an unsemantic use of markup, but there is a workaround that I will detail later.If you want to apply noise to the body element, use class="body-noise" instead.

Spinny Leaf Menu

<nav>  <ul class="top-menu">    <li><a href=#>Home</a><div class="menu-item" id="home"></div></li>    <li><a href=#>Catalog</a><div class="menu-item" id="cataloge"></div></li>    <li><a href=#>Price</a><div class="menu-item" id="price"></div></li>    <li><a href=#>About</a><div class="menu-item" id="about"></div></li>    <li><a href=#>Contact</a><div class="menu-item" id="contact"></div></li>  </ul></nav>nav { width: 960px; height: 100px; margin: 120px auto; text-align: center;}.top-menu li { display: inline-block; text-align: center; margin: 30px 5px; position: relative; -webkit-transition: all 0.3s ease;  -moz-transition: all 0.3s ease; -o-transition: all 0.3s ease;}.top-menu li:hover { margin: 30px 20px; }.top-menu li:active { margin: 30px 33px; }.top-menu li a  { width: 100px; height: 100px; 9999; junk; top: 35px; font-weight: bold; display: block; text-decoration: none; font-size: 20px; color: #fff; text-shadow: 0px 1px 1px rgba(0,0,0,0.4), 0px 4px 6px rgba(0,0,0,0.1), 0px 9px 11px rgba(0,0,0,0.1); -webkit-transition: all 0.1s linear;  -moz-transition: all 0.1s linear; -o-transition: all 0.1s linear;}.top-menu li:active a { font-size: 26px; top: 30px; text-shadow: none;}.top-menu li div.menu-item { width: 100px; height: 100px; display: block; -webkit-transition: all 0.2s ease;  -moz-transition: all 0.2s ease; -o-transition: all 0.2s ease; -webkit-border-top-left-radius: 100px;  -webkit-border-bottom-right-radius: 100px;  -moz-border-radius-topleft: 100px;  -moz-border-radius-bottomright: 100px;  border-top-left-radius: 100px;  border-bottom-right-radius: 100px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg);}.top-menu li:hover div.menu-item{  -webkit-border-top-left-radius: 80px;  -webkit-border-bottom-right-radius: 80px;  -moz-border-radius-topleft: 80px;  -moz-border-radius-bottomright: 80px;  border-top-left-radius: 80px;  border-bottom-right-radius: 80px;  -webkit-transform: rotate(225deg); -moz-transform: rotate(225deg); -o-transform: rotate(225deg);}.top-menu li:active div.menu-item{  -webkit-border-top-left-radius: 50px;  -webkit-border-bottom-right-radius: 50px;  -moz-border-radius-topleft: 50px;  -moz-border-radius-bottomright: 50px;  border-top-left-radius: 50px;  border-bottom-right-radius: 50px; 
}#home { background: #41D05F; }#cataloge { background: #E42B2B; }#price { background: #ff8400; }#about { background: #a800ff; }#contact { background: #49a7f3; }               /* If you could do pseudo elements        you could get a few more... */        /* Also, HSL is awesome but don't use it if       you need super old browser support */}?












Don't forget about the outline property. While it's a bit more limited than border (goes around entire element no matter what) it's an extra free border if that's what you need.
outline: 5px solid red;
If you are down with CSS3, you can use box-shadow (one of the deepest supported properties of CSS3) to get infinite (!) box shadows, by comma separating values.
box-shadow:  0 0 0 10px hsl(0, 0%, 80%),  0 0 0 15px hsl(0, 0%, 90%);


3D CSS FOR TEXT
<link href="http://fonts.googleapis.com/css?family=Aclonica:regular" rel="stylesheet" type="text/css" ><style>h1{font-family: 'Aclonica', serif;color: #fff;text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;}</style>
CSS 3 box-shadow property:
border-radius: 50%;box-shadow: inset 0.3em 0.3em 0.9em black; RAINBOW EFFECT SHADOW:
 0.5em -0.5em 0.4em red, 0.5em  0.5em 0.4em gold,-0.5em  0.5em 0.4em lime,-0.5em -0.5em 0.4em blue;
/* If shadow color is omitted,   the browser must use text color.   WebKit is buggy and ignores this rule.
  This bug is fixed in WebKit 536.7  and therefore in Chrome 20 and Safari 6
*/
0 0 0 0.5em;
0 0 1em;
1em 0.5em;
1em 0.5em 1em;
0.3em 0.3em silver;
0.3em 0.3em 0 0.6em silver;
0 1.5em 0 -0.7em silver;
2em 1.5em 0 -0.7em silver;
0 0 1em maroon;
0 0 1em 0.5em maroon;
0 0 1em 1em maroon;
-0.4em -0.4em 1em olive;
0.4em 0.4em 1em olive;
0.4em 0.4em 1em -0.2em olive;
0.4em 0.4em 1em 0.4em olive;
0 1.5em 0.5em -1em olive;
inset 0.2em 0.4em red, inset -1em -0.7em red;
inset 11em 0 red;
inset -1em 0 red;
inset 13em 0 3em -3em orange,inset -3em 0 3em -3em blue;
inset 11em 0 2em orange;
inset 0 0.3em red;
inset 0 -1.1em red;
inset 1em 0 1em -1em blue;
inset 0 0 0.5em blue;
inset 0 0 2em blue;
inset 0 2em 3em -1em green;
inset 0 2em 3em -2em green;
inset 0 2em 3em -3em green;
inset 0 0 1em khaki;
inset 0 0 1em khaki, inset 0 0 1em khaki,
inset 0 0 1em khaki, inset 0 0 1em khaki;
inset 0 0 0.5em 0.5em khaki;
/* similar to above */
/* almost seamless if <blur-radius> = <spread-radius> */
inset 0 0 0.5em 0.5em khaki;
/* background: black */
inset 0 0 2em 2em khaki;
/* background: red; padding: 2em */

0 0 0.5em 0.5em teal; /* background: teal */

inset 0 0 0.5em 0.5em indigo,0 0 0.5em 0.5em indigo;  /* padding: 1em */

inset 0 0 1em black, inset 0 0 1em black,

inset 0 0 1em black, inset 0 0 1em black;inset 0 0 0.7em 0.5em black;

/* should be very similar to above in CSS conforming browsers like Firefox 4+ */

inset 0 2em 3em -1.5em green,inset 0 -2em 3em -2em blue;

inset 1em 1em 2em -1em blue;

inset 1em 1em 2em -1em blue,inset -1em -1em 2em -1em red;

inset 0 2em 3em -2em white,inset 0 -2em 3em -2.5em black; /* background:red */

inset 1em 1em 1em -1em white,inset -1em -1em 1em -1em black; /* background:red */


inset -1em -1em 1em -1em black,inset 1em 1em 1em -1em white; /* background:red */

inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5),inset 0.3em 0.3em 0.6em rgba(256,256,256,0.7);

inset 0.3em 0.3em 0.6em rgba(256,256,256,0.5),inset -0.3em -0.3em 0.6em rgba(0,0,0,0.5);


0.2em 0.2em 0.7em black, inset 0 0 0.7em red;

Report as NSFW [?]
view comments
Michigan
last post
11 years ago
posts
3
views
4,528
can view
everyone
can comment
everyone
atom/rss

followers

other blogs by this author

official fubar blogs
 8 years ago
fubar news by babyjesus  
 13 years ago
fubar.com ideas! by babyjesus  
 10 years ago
fubar'd Official Wishli... by SCRAPPER  
 11 years ago
Word of Esix by esixfiddy  

discover blogs on fubar

meet usterms of serviceprivacyfeedbackupdates
Copyright © 2024 Social Concepts, Inc. All Rights Reserved. Patent Pending.
blog.php' rendered in 0.0754 seconds on machine '51'.