Presentation for Webuquerque's November 2, 2011 event. Practical examples of some of the latest CSS 3 techniques (and a few often-forgotten CSS 2.1 ones) including: image-free gradients and text shadows, attribute selectors, transitions and transforms, and media queries

1. 10 Advanced CSS Techniques
you always wanted to know more about
#webqcss
Some rights reserved Webuquerque November 2, 2011

2. He llo!
Jason Nakai Emily Lewis
Designer Developer Web Designer Writer Instructor
nakaimedia.com emilylewisdesign.com
Software Engineer, Data Basis Co-host, EE Podcast
data-basis.com ee-podcast.com
Co-founder & Co-manager, Webuquerque Co-founder & Co-manager, Webuquerque
webuquerque.com webuquerque.com
Email: info@nakaimedia.com Author, Microformats Made Simple
Twitter: @jasonnakai microformatsmadesimple.com
Contributing author, HTML5 Cookbook
oreilly.com/catalog/0636920016038
Email: emily@emilylewisdesign.com
Blog: ablognotlimited.com
Twitter: @emilylewis
#webqcss

3. esome
10 a nd Aw
Advanced^Techniques
1. Text shadows 6. Multiple background images
2. Box shadows 7. Transitions
3. Generated content 8. Transforms
4. Attribute selectors 9. Media queries
5. Gradients 10.Feature detection
#webqcss

4. 1Text Shadows
text-shadow casts shadow effects on text and text-
decoration.
#webqcss

5. 1
Text Shadows tax
Syn
h3 {text-shadow: 1px 1px 2px #000;}
• x (horizontal) offset casts shadow to the right of the
text. Negative value casts to the left.
• y (vertical) offset casts shadow below the text.
Negative value casts above.
• blur radius blurs the shadow, with higher values
making the shadows wider and lighter.
• color
#webqcss

6. 1Text Shadows tax
Syn
Multiple effects are comma-separated and are applied
front to back, with the first shadow on the top of the stack.
text-shadow: #fff -1px -1px,
#fff -2px -2px,
#fff -3px -3px,
#fff -4px -4px,
#fff -5px -5px,
#fff -6px -6px,
#fff -7px -7px,
#fff -8px -8px;
#webqcss

7. 1
Text Shadows esou
•
T ools &R rces
Typekit text shadow tutorial
blog.typekit.com/2011/07/19/shading-with-css-text-shadows/
• Dynamic text shadow generator
mothereffingtextshadow.com
• Dynamic text shadow generator
westciv.com/tools/shadows/
• IE Shadow filter
msdn.microsoft.com/en-us/library/ms533086(v=VS.85).aspx
• IE DropShadow filter
msdn.microsoft.com/en-us/library/ms532985(v=VS.85).aspx
#webqcss

8. 2Box Shadows
box-shadow casts shadow effects on block-level
elements.
#webqcss

9. 2 Box Shadowsntax
Sy
div {box-shadow: inset 2px 2px 3px 1px #666;}
• inset moves shadow inside frame of element.
• x (horizontal) offset casts shadow to the right of the
text. Negative value casts to the left.
• y (vertical) offset casts shadow below the text.
Negative value casts above.
#webqcss

10. 2 Box Shadowsntax
Sy
div {box-shadow: inset 2px 2px 3px 1px #666;}
• blur radius blurs the shadow, with higher values
making the shadows wider and lighter.
• spread radius conrtrols the expansion of the
shadow, with higher values making it bigger.
• color
#webqcss

11. 2 Box Shadowsntax
Sy
Vendor prefixes are available for older versions, which
should be listed before the standard property.
-moz-box-shadow: 2px 2px 3px #666;
-webkit-box-shadow: 2px 2px 3px #666;
box-shadow: 2px 2px 3px #666;
Automatic prefixing with JavaScript
leaverou.github.com/prefixfree/
#webqcss

12. 2Box Shadowsntax
Sy
Multiple effects are applied front to back, with the first
shadow on top of the stack.
box-shadow: 1px 1px #007d9a,
2px 2px #007d9a,
3px 3px #007d9a,
4px 4px #007d9a,
5px 5px #007d9a,
6px 6px #007d9a,
7px 7px #007d9a,
8px 8px #007d9a;
#webqcss

13. 2
Box ShadowsResou
•
To ols &
rces
CSS Tricks box shadow tutorial
css-tricks.com/snippets/css/css-box-shadow/
• Drop shadows tutorial & example gallery
nicolasgallagher.com/css-drop-shadows-without-images/
• Dynamic box shadow generator
westciv.com/tools/box-properties/index.html
• CSS3 decorations for IE
css3pie.com
• IE DropShadow filter
msdn.microsoft.com/en-us/library/ms532985(v=VS.85).aspx
#webqcss

14. 3 Generated Content
Using the :before and :after pseudo elements, can
insert content before and after the specified element:
• Strings of text
• Images
• Counters
• Attribute values (i.e. title)
#webqcss

15. 3 Generated Contenttax
Syn
a:after {content:" 00a000bb";}
• content property contains the content to appear
before or after the element.
• For text strings, contain the value in quotes.
• If you want to use a special character, make sure it is
properly encoded (digitalmediaminute.com/
reference/entity/).
#webqcss

16. 3
Generated Contenttax
Syn
li:hover:before {
content:url(arrow.png);
position:absolute;
top:-17px;
left:0;}
• :before and :after can also be combined with
pseudo-classes like :hover.
• content property can only be used on :before
and :after.
#webqcss

17. 3
•
Generated Contentsources
To ols & Re
Generated content tutorial & speech bubble gallery
http://nicolasgallagher.com/pure-css-speech-bubbles/
• Tooltips with generated content
http://jsfiddle.net/chriscoyier/EMhRJ/92/
• Automatic numbering & counters
dev.opera.com/articles/view/automatic-numbering-with-css-counters/
• Pure CSS3 boxes without images
webdesignshock.com/css3-box-shadow/
#webqcss

18. 4Attribute Selectors
Attribute selectors allow you to target elements based
on their attributes.
• [attr] • [attr^=value]
• [attr=value] • [attr$=value]
• [attr~=value] • [attr*=value]
• [attr|=value]
#webqcss

19. 4Attribute Selectorstax
Syn
a[href$="zip"]{...;}
input[type="submit"][value="Search"]{...;}
• Attribute property and
value are specified
within brackets
• Can use multiple
selectors for greater
specificity
#webqcss

20. 4
•
Attribute Selectors esources
Tools &R
Emily’s attribute selectors tutorial
msdn.microsoft.com/en-us/scriptjunkie/gg619394
• CSS3 selectors explained
456bereastreet.com/archive/200601/css_3_selectors_explained/
• CSS Tricks attribute selectors tutorial
css-tricks.com/5591-attribute-selectors/
• ARIA roles & attribute selectors
germanforblack.com/articles/stepping-into-attribute-selectors
• IE support for CSS3 selectors
selectivizr.com
#webqcss

21. 5 Gradients
Gradients allow smooth transitions between two or
more colors. Can reduce need for background images.
• Linear
• Radial
• Specified via background-image
#webqcss

22. 5
Linear Gradientsntax
div {
Sy
background-image: linear-
gradient(-90deg, #fff 0%, #ccc 100%);
}
• Angle determines the direction of the gradient.
• Color stop defines the color and it’s position relative
to the element. Can have multiple, comma-separated
color stops.
#webqcss

23. 5
Radial Gradientsntax
div {
Sy
background-image:radial-
gradient(center, ellipse cover, #ff0
0%, #0f0 100%);
}
• Position indicates the origin (center) of the gradient.
• Shape and size of the gradient
• Color stops, comma-separated
#webqcss

24. 5 Gradientsntax
Sy
Vendor prefixes are required.
-moz-linear-gradient -moz-radial-gradient
-o-linear-gradient -webkit-radial-gradient
-webkit-linear-gradient
Dynamic cross-browser CSS3 generator (even includes
older syntaxes and prefixes)
css3please.com
#webqcss

25. 5Gradientsntax
Sy
Multiple gradients can be applied, creating complex
(and even repeating) patterns.
#webqcss

26. 5
•
Gradients Resou
Too ls &
rces
Incredible background patterns gallery
leaverou.me/css3patterns/
• Dynamic linear gradient generator
display-inline.fr/projects/css-gradient/
• Dynamic radial gradient generator
westciv.com/tools/radialgradients/index.html
• Dynamic gradient generator (Firefox)
colorzilla.com/gradient-editor/
• CSS decorations for IE
css3pie.com
#webqcss

27. 6Multiple Background Images
CSS3 allows you to specify more than one background
image for an element.
#webqcss

28. 6Multiple Background Imagesx
article {
background:
S ynta
url(curtainTop.png) 0 0 no-repeat,
url(curtainBottom.png) 0 100% no-repeat
#000;
}
• Comma-separated list of shorthand values for URL, x-
axis, y-axis and repeat. Can also use full declarations.
• Images are layered, with first declared image on top of
the stack. If using a background color, declare with
last image to be at bottom of stack.
#webqcss

29. 6Multiple Background Imagesx
article {
background:
S ynta
url(curtainBottom.png) 0 100% no-repeat
#000;
background:
url(curtainTop.png) 0 0 no-repeat,
url(curtainBottom.png) 0 100% no-repeat
#000;
}
For IE and other browser that don’t support, declare
background twice.
#webqcss

30. 6
•
Multiple Background Imagesces
To ols & Re sour
Multiple backgrounds & gradients tutorial
snook.ca/archives/html_and_css/multiple-bg-css-gradients
• CSS3 demo site from SXSW panel
sxswcss3.com
• Background patterns gallery
leaverou.me/css3patterns/
• CSS decorations for IE
css3pie.com
#webqcss

31. 7Transitions
transition enables smooth animations of CSS
property changes over a specified timeframe.
#webqcss

32. 7
Transitions ntax
Sy
div {transition: all .5s linear .2s;}
• Property name specifies the CSS property to be
changed.
• Duration specifies the number of (milli)seconds a
transition animation should take to complete.
• Timing function specifies the easing
• Delay indicates the amount of time to wait to start
the transition effect
#webqcss

33. 7Transitions ntax
Sy
Vendor prefixes are required. Should be specified
before standard property.
-moz-transition: all .5s linear .2s;
-o-transition: all .5s linear .2s;
-webkit-transition: all .5s linear .2s;
transition: all .5s linear .2s;
#webqcss

34. 7
•
Transitions& Resou
T ools
rces
Think Vitamin transitions tutorial
thinkvitamin.com/code/sexy-interactions-with-css-transitions/
• cubic-bezier() easing with transitions
cubic-bezier.com
• CSS transitions gallery
leaverou.github.com/animatable/
• Dynamic transitions generator
css3generator.com
#webqcss

35. 8 Transforms
transform enables modifications to coordinate-based
CSS properties:
• Translate
• Rotate
• Skew
• Scale
#webqcss

36. 8
Transforms ntax
Sy
h3 {transform: rotate(45deg);}
h3 {transform: translate(25px, 10px);}
• Transform functions specify the modification action
and corresponding values.
#webqcss

37. 8Transforms ntax
Sy
Vendor prefixes are required. Should be specified
before standard property.
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
#webqcss

38. 8
•
Transforms Resou
To ols &
rces
Transforms tutorial
css3files.com/transform/
• Text rotation tutorial
snook.ca/archives/html_and_css/css-text-rotation
• Transforms for IE
useragentman.com/IETransformsTranslator/
• Dynamic transforms generator
westciv.com/tools/transforms/
• Dynamic transforms generator
css3generator.com
#webqcss

39. 9 Media Queries
Media queries deliver styles based on the user’s display:
• Media type
• Browser window
• Device screen, orientation & resolution
• Colors
#webqcss

40. 9
Media Queriesntax
Sy
@media screen and (max-width: 650px){
}
body {background: #f90;}
• Nest resolution-specific styles within the @media
query
• Media options include all, handheld, projection,
screen, tv
• Properties and values establish the conditions for
rendering styles
#webqcss

41. 9
•
Media QueriesResou
To ols &
rces
A List Apart’s responsive web design
alistapart.com/articles/responsive-web-design/
• Emily’s media queries tutorial
msdn.microsoft.com/en-us/scriptjunkie/gg619395
• Comprehensive media queries
zomigi.com/blog/essential-considerations-for-crafting-quality-media-queries/
• Media queries polyfill
github.com/scottjehl/Respond
• Dynamic resolution testing
quirktools.com/screenfly/
#webqcss

42. 10 Feature Detection
Feature detection tests for the existence of DOM
properties and methods in order to determine whether
a browser supports an operation.
• Modernizr (best bet)
modernizr.com
• jQuery.support (if you really want to)
api.jquery.com/jQuery.support/
• Rolling your own (not suggested)
sitepoint.com/detect-css3-property-browser-support/
• Browser sniffing (outdated)
#webqcss

43. 10
•
Feature Detection esources
T ools &R
Do you even need a polyfill? A fallback?
caniuse.com
• Conditional polyfill loading
yepnopejs.com
• Practical feature detection
css-tricks.com/13641-sideways-headers/
#webqcss

44. Questions?
?
@emilylewis @jasonnakai
#webqcss

45. Thanks!
!
What did you think? spkr8.com/t/8859
#webqcss