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
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
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
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
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
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
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
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
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