Web Directions

Conffab

  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
  • Speakers
  • Presentations
  • Conferences
  • Topics
  • Pricing & Plans
  • Browse
  • Signup
  • Sign In
Advanced Search
Searching videos

More CSS Secrets

Lea Verou at South 2012
  • front end development
  • CSS
  • web design
Sign up for a free membership to watch this and hundreds of other videos
  • Details
  • References
  • Slides
  • Keypoints

According to .net magazine, Lea’s “CSS3secrets: 10 things you may not know about CSS” was one of the 15 best talks of 2011. Web developers all over Europe loved it. This talk continues on the same path, with even juicier “secrets”. It will teach you how to take advantage of modern standards in unconventional ways to solve common web design challenges and in the process, it will open your mind to truly understanding how these new features work. After all, when you can “get” the unconventional, you will find that the conventional becomes trivial.

http://lea.verou.me/more-css-secrets

Following the 2011 “10 secrets talk” (worth reviewing) this is another ten secrets.

  1. shadow that gradually appears – used in Google Reader via JS but can be done with pure CSS. Background-attachment: local; … combined with multiple gradients you can make a shadow that only appears when you scroll down.
  2. fixed width, fluid background – using calc on a parent can remove the need to add wrapper divs for fixed width designs
  3. using transitions to avoid js for things like lightbox effects (also showed using a big box shadow instead of a blanket div)
  4. lined background that snaps to text using a linear gradient and background size. Uses background-origin:content-box so the background doesn’t move away when the padding changes. You can also use the technique to create zebra striping.
  5. Opposite transitions to keep a child element positioned normally while the parent is rotated or skewed etc. you can create an image slider/comparison with CSS transforms.
  6. Clockwise animation of an element, using keyframes and a cancelling animation to keep the element horizontal (smiley face kept upright but moving in a circle)… however it does require an extra element. Better way from Aryeh gregor uses the frame-by-frame nature of transforms to get the same effect as attaching two origins to a single element.
  7. Alternative to box-shadow proposed by Adobe, “filter” to use SVG filters on all elements. Gives box shadow effect on speech bubbles created with pseudo elements. Currently only in Chrome; and obviously the name “filter” is a problem for IE.
  8. Pseudo element set to absolute position zero all ’round and copy of background image… you can hack together a background blur effect. It’s hacky and messy and it works.
  9. Hyphens:auto – good but still patchy support
  10. frame-by-frame animation using a sprite and keyframes and steps(n) to prevent smooth transitions which aren’t giving us animation. This gives us access to alpha transparency, which animated gifs don’t do. Credit: simurai.com. IE9+

(Plug for webplatform.org – vendor neutral documentation platform, to bring together the currently-separate efforts being made by all the browser companies.)

You may also be interested in

    Thumbnail for Mavo: HTML Re-imagined for the Era of Web Apps

    Mavo: HTML Re-imagined for the Era of Web Apps

    Thumbnail for Maturing Design Culture in an Organisation

    Maturing Design Culture in an Organisation

    Thumbnail for Fair game: the ethics of telco fraud

    Fair game: the ethics of telco fraud

    Thumbnail for Designing for extremes

    Designing for extremes

    Thumbnail for An Introduction to the File API

    An Introduction to the File API

    Thumbnail for Rethinking the JavaScript ternary operator

    Rethinking the JavaScript ternary operator

    Thumbnail for Getting up to speed with Web Performance in 2019

    Getting up to speed with Web Performance in 2019

    Thumbnail for Scaling and trying not to break things…too much

    Scaling and trying not to break things…too much

More presentations from South 2012

    Thumbnail for Datatium – Radiation Free Responsive Experiences

    Datatium – Radiation Free Responsive Experiences

    Thumbnail for Developers Will Design: Let’s Make Them Amazing At It

    Developers Will Design: Let’s Make Them Amazing At It

    Thumbnail for What’s the Point?

    What’s the Point?

    Thumbnail for Lazy Load Everything!

    Lazy Load Everything!

    Thumbnail for Better than MVC

    Better than MVC

    Thumbnail for Monster Music Mash

    Monster Music Mash

    Thumbnail for 5 Things You Need to Know About Web Security

    5 Things You Need to Know About Web Security

    Thumbnail for JavaScript performance patterns

    JavaScript performance patterns

Conffab
  • About
  • Speakers
  • Presentations
  • Conferences
  • Contact
  • Sign in
Sign Up

© Conffab 2023