Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

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


Published on

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

Published in: Technology, Education
  • Good and very useful article for designing and managing a web application in a stylish ways. This information can help the designer and developers to perform any tricks without any alternative thinking. Also for building a short type of panel this can also help to rebuild the construction of a page. Thanks a lot. -- Regards, Sourav Basak [Blogger, Entrepreneur, Thinker]
    Are you sure you want to  Yes  No
    Your message goes here
  • Great compilation of resources and techniques!
    Are you sure you want to  Yes  No
    Your message goes here
  • Ya lost me at slide 6. Revisit your language and I might finish the presentation.
    Are you sure you want to  Yes  No
    Your message goes here

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

  1. 10 Advanced CSS Techniques you always wanted to know more about #webqcssSome rights reserved Webuquerque November 2, 2011
  2. He llo! Jason Nakai Emily Lewis Designer Developer Web Designer Writer Instructor emilylewisdesign.comSoftware Engineer, Data Basis Co-host, EE ee-podcast.comCo-founder & Co-manager, Webuquerque Co-founder & Co-manager, webuquerque.comEmail: Author, Microformats Made SimpleTwitter: @jasonnakai Contributing author, HTML5 Cookbook Email: Blog: Twitter: @emilylewis #webqcss
  3. 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
  4. 1Text Shadowstext-shadow casts shadow effects on text and text-decoration. #webqcss
  5. 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
  6. 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
  7. 1Text Shadows esou• T ools &R rces Typekit text shadow tutorial• Dynamic text shadow generator• Dynamic text shadow generator• IE Shadow filter• IE DropShadow filter #webqcss
  8. 2Box Shadowsbox-shadow casts shadow effects on block-levelelements. #webqcss
  9. 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
  10. 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
  11. 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 #webqcss
  12. 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
  13. 2Box ShadowsResou• To ols & rces CSS Tricks box shadow tutorial• Drop shadows tutorial & example gallery• Dynamic box shadow generator• CSS3 decorations for IE• IE DropShadow filter #webqcss
  14. 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
  15. 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 ( reference/entity/). #webqcss
  16. 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
  17. 3• Generated Contentsources To ols & Re Generated content tutorial & speech bubble gallery• Tooltips with generated content• Automatic numbering & counters• Pure CSS3 boxes without images #webqcss
  18. 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
  19. 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
  20. 4• Attribute Selectors esources Tools &R Emily’s attribute selectors tutorial• CSS3 selectors explained• CSS Tricks attribute selectors tutorial• ARIA roles & attribute selectors• IE support for CSS3 selectors #webqcss
  21. 5 GradientsGradients allow smooth transitions between two ormore colors. Can reduce need for background images.• Linear• Radial• Specified via background-image #webqcss
  22. 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
  23. 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
  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) #webqcss
  25. 5Gradientsntax SyMultiple gradients can be applied, creating complex(and even repeating) patterns. #webqcss
  26. 5• Gradients Resou Too ls & rces Incredible background patterns gallery• Dynamic linear gradient generator• Dynamic radial gradient generator• Dynamic gradient generator (Firefox)• CSS decorations for IE #webqcss
  27. 6Multiple Background ImagesCSS3 allows you to specify more than one backgroundimage for an element. #webqcss
  28. 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
  29. 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
  30. 6• Multiple Background Imagesces To ols & Re sour Multiple backgrounds & gradients tutorial• CSS3 demo site from SXSW panel• Background patterns gallery• CSS decorations for IE #webqcss
  31. 7Transitionstransition enables smooth animations of CSSproperty changes over a specified timeframe. #webqcss
  32. 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
  33. 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
  34. 7• Transitions& Resou T ools rces Think Vitamin transitions tutorial• cubic-bezier() easing with transitions• CSS transitions gallery• Dynamic transitions generator #webqcss
  35. 8 Transformstransform enables modifications to coordinate-basedCSS properties:• Translate• Rotate• Skew• Scale #webqcss
  36. 8Transforms ntax Syh3 {transform: rotate(45deg);}h3 {transform: translate(25px, 10px);}• Transform functions specify the modification action and corresponding values. #webqcss
  37. 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
  38. 8• Transforms Resou To ols & rces Transforms tutorial• Text rotation tutorial• Transforms for IE• Dynamic transforms generator• Dynamic transforms generator #webqcss
  39. 9 Media QueriesMedia queries deliver styles based on the user’s display:• Media type• Browser window• Device screen, orientation & resolution• Colors #webqcss
  40. 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
  41. 9• Media QueriesResou To ols & rces A List Apart’s responsive web design• Emily’s media queries tutorial• Comprehensive media queries• Media queries polyfill• Dynamic resolution testing #webqcss
  42. 10 Feature DetectionFeature detection tests for the existence of DOMproperties and methods in order to determine whethera browser supports an operation.• Modernizr (best bet)• (if you really want to)• Rolling your own (not suggested)• Browser sniffing (outdated) #webqcss
  43. 10• Feature Detection esources T ools &R Do you even need a polyfill? A fallback?• Conditional polyfill loading• Practical feature detection #webqcss
  44. Questions? ? @emilylewis @jasonnakai #webqcss
  45. Thanks! !What did you think? #webqcss