Advanced CSS Techniques

CSS3Using advanced CSS to speed up development.

Browser Support Most of todays techniquesare supported by modern browsers.

Shadow StackingUsing multiple shadows to achieve a layered effect.box-shadow: #444 0 20px 20px -10px, #888 0 1px 3px;

Shadow Stacking

Stacking shadows to createcorners with the pseudo elements ‘:before’ and ‘:after’

text-shadow: #FFF 1px 1px, Creating stripes #555 2px 2px, #555 3px 3px, #FFF 4px 4px, on text can be #888 5px 5px, #FFF 6px 6px, achieved with a #295097 7px 7px, #295097 8px 8px, #295097 9px 9px, few lines of #444 10px 10px 10px; code.

text-shadow: #888 4px 4px 18px, Layered text #BBB 1px 1px, #BBB 2px 2px, makes great #BBB 3px 3px, #BBB 4px 4px, headlines. #BBB 5px 5px, #BBB 6px 6px, #BBB 7px 7px, #BBB 8px 8px, #BBB 9px 9px, #000 9px 9px 10px;

Backgrounds Multiple Background Imagesbackground: url(images/number1.png) no-repeat scroll top left, url(images/number2.png) no-repeat scroll top right, url(images/number3.png) no-repeat scroll bottom left, url(images/number4.png) no-repeat scroll bottom right;

Background Gradients background: linear-gradient(#F6F6F6, #E3E3E3);Vendor Prefixes• -webkit- Can also use the• -moz- technique of multiple• -ms- gradients per background.• -o-

background: #88779F;background: -webkit-linear-gradient (#88779F, #685B79);background: -moz-linear-gradient (#88779F, #685B79);background: -ms-linear-gradient (#88779F, #685B79);background: -o-linear-gradient (#88779F, #685B79);background: linear-gradient(#88779F, #685B79); USING VENDOR PREFIXES

Multiple Color Stopsbackground: linear-gradient( #F483ED, #67D168 40%, #EB7C7E 70%, #91D3E1);background: linear-gradient( #353535, #242424 50%, #2A2A2A 50%, #1A1A1A);

Other Uses for Gradients

Other Uses for Gradients Using pseudo elements, gradients and rgba colors

Transitions &Transformations

Transitions & Transformations Great for creating unique hover effects. Easy to implement code:transition: property .2s ease/linear; Must use vendor prefixes here and can be used on any state.

CSS3 Ribbons

Pseudo Elements: Stacking Properties :before position: :after z-index:

CSS3Using advanced CSS to speed up development.

Advanced CSS Techniques

by Kopepasah on Jul 31, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

1 Embed 2

Statistics

Advanced CSS Techniques — Presentation Transcript