10 Advanced CSS Techniques (You Wish You Knew More About)

10 Advanced CSS Techniques you always wanted to know more about #webqcssSome rights reserved Webuquerque November 2, 2011

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

esome10 a nd Aw Advanced^Techniques1. Text shadows 6. Multiple background images2. Box shadows 7. Transitions3. Generated content 8. Transforms4. Attribute selectors 9. Media queries5. Gradients 10.Feature detection #webqcss

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

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

1Text Shadows tax SynMultiple effects are comma-separated and are appliedfront 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

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

2Box Shadowsbox-shadow casts shadow effects on block-levelelements. #webqcss

2 Box Shadowsntax Sydiv {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

2 Box Shadowsntax Sydiv {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

2 Box Shadowsntax SyVendor prefixes are available for older versions, whichshould 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 JavaScriptleaverou.github.com/prefixfree/ #webqcss

2Box Shadowsntax SyMultiple effects are applied front to back, with the firstshadow 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

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

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

3 Generated Contenttax Syna: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

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

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

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

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

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

5 GradientsGradients allow smooth transitions between two ormore colors. Can reduce need for background images.• Linear• Radial• Specified via background-image #webqcss

5Linear Gradientsntaxdiv { 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

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

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

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

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

6Multiple Background ImagesCSS3 allows you to specify more than one backgroundimage for an element. #webqcss

6Multiple Background Imagesxarticle { 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

6Multiple Background Imagesxarticle { 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

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

7Transitionstransition enables smooth animations of CSSproperty changes over a specified timeframe. #webqcss

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

7Transitions ntax SyVendor prefixes are required. Should be specifiedbefore 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

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

8 Transformstransform enables modifications to coordinate-basedCSS properties:• Translate• Rotate• Skew• Scale #webqcss

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

8Transforms ntax SyVendor prefixes are required. Should be specifiedbefore standard property.-moz-transform: rotate(45deg);-o-transform: rotate(45deg);-webkit-transform: rotate(45deg);transform: rotate(45deg); #webqcss

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

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

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

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

10 Feature DetectionFeature detection tests for the existence of DOMproperties and methods in order to determine whethera 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

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

Questions? ? @emilylewis @jasonnakai #webqcss

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

http://webuquerque.com	217
http://speakerrate.com	29
http://docs.wpnet.technion.ac.il	9
http://www.webuquerque.com	5
http://translate.googleusercontent.com	2
http://webuquerque.ablognotlimited.com	2
http://twitter.com	1
http://flashattackcrew.blogspot.com	1

10 Advanced CSS Techniques (You Wish You Knew More About)

by Emily Lewis on Nov 02, 2011

Accessibility

Categories

Tags

Upload Details

Usage Rights

8 Embeds 266

Statistics

10 Advanced CSS Techniques (You Wish You Knew More About) — Presentation Transcript