Pure CSS Slide Up and Slide Down
If I can avoid using JavaScript for element animations, I'm incredibly happy and driven to do so. They're more efficient, don't require a JavaScript framework to manage steps, and they're more elegant. One effect that is difficult to nail down with pure CSS is sliding up and down, where the content is hidden when "up" and slides in when "down". The reason it's difficult is because you may not know the content height. The HTML The effect really only requires one element, so we'll stick to that: <div class="slider">Some content here.... Add as much content as you'd like. The CSS Before we get into the trick, let's set the few obvious properties: overflow-y and the CSS animation properties: So now the fun: the trick we'll use to make the height play nice is the max-height property. After some tinkering, I really liked the cubic-bezier transition timing function above, though there may be a more scientific method for the animation. Not Perfect Let me know if you've found a better solution!
CSS Filters
CSS filter support recently landed within WebKit nightlies. CSS filters provide a method for modifying the rendering of a basic DOM element, image, or video. CSS filters allow for blurring, warping, and modifying the color intensity of elements. There are many CSS filters to choose from: grayscale, blur, sepia, saturate, opacity, brightness, contrast, hue-rotate, and invert. The following CSS snippet will blur an element: Multiple filters are separated by spaces, so we could also add grayscale and opacity values to the blur: Let's get crazy with hue-rotate as well: If static filtering isn't enough for you, CSS filters also animate with @-webkit-keyframes: Expect a performance hit with heavy CSS filter usage; be sure to heavily test your site wherever filtering is used. Note: I've yet to successfully filter a <video> tag; it's possible that feature isn't in the first implementation.
Can I use... Support tables for HTML5, CSS3, etc
About "Can I use" provides up-to-date browser support tables for support of front-end web technologies on desktop and mobile web browsers. The site was built and is maintained by Alexis Deveria, with occasional updates provided by the web development community. May I use your data in my presentation/article/site, etc? Yes, the support data on this site is free to use under the CC BY-NC 3.0 license. Is there a way to see the support data in colors other than red/green? Yes, you can enable accessible colors from this link or from the option under Settings. Do you have the data available in a raw format? Yes, the raw support data is available on GitHub and is updated regularly. Could you add feature X to the site? Adding features takes quite some time and there are many requests for additions. If you've done the research yourself already, you can also submit a feature on GitHub. Could you cover email clients too so I can see what I can use in HTML emails? I use the following criteria:
Focal Point: Intelligent Cropping of Responsive Images
The practice of implementing responsive images is still in its infancy. We’ve seen a lot of ideas and suggestions for how it should be done and we’re bound to see a lot more. Today we’re going to look at a fascinating little framework that allows you to not only automatically resize your images when the viewport changes, but also crop the images with a specific important focal point in mind. Amazingly enough, it does all this with pure CSS. Read on to see how it works. Meet Focal Point Focal Point is a GitHub project and CSS framework created by Adam Bradley. The problem with this idea of course is that if you arbitrarily crop an image, you could be cutting out the most important part of the image! Fortunately, Focal Point allows you to specify a targeted area of the image to retain (the focal point). How Does It Work? Implementing Focal Point is a pretty unique process, but it’s quite easy. The process here is to find the face, then count grid units from center. The Code Build It
Retina Display Media Query
For including high-res graphics, but only for screens that can make use of them. "Retina" being "2x": @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) { /* Retina-specific stuff here */ } Or other highish-res: Old Stuff (don't use, keeping for posterity) @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1) { /* Retina-specific stuff here */ } This is more future proof... @media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and ( min--moz-device-pixel-ratio: 2), only screen and ( -o-min-device-pixel-ratio: 2/1), only screen and ( min-device-pixel-ratio: 2), only screen and ( min-resolution: 192dpi), only screen and ( min-resolution: 2dppx) { /* Retina-specific stuff here */ } Notes: Example: Let's say you had three major breakpoints in a design.
Content Folding | CSS-Tricks
Less than a year ago, Trent Walton published Content Choreography in which he lamented at some of the difficulties and limitations of responsive layouts. At times, it seems as though all of the site architecture & planning goes out the window as content reflows. You have to admit, an awful lot of responsive designs end up being: Squeeze everything into one columnPush the sidebar(s) to the bottom *cough* this site does that *cough* Trent mentioned it may be a more appropriate approach to "interdigitate" content. That is, to fold bits of content together into that single column in a more thoughtful or useful manner. A Practical Example: Ad Folding Consider a layout at a large browser window size. At narrower browser window sizes we've decided to drop down to a single column. But how? There's probably a number of ways to do this. Fair warning: This stuff is super new and subject to change. <section class="main-content"><article> ... 'ads' is an arbitrary name that we just made up. Semantics
CSS3 2D Transforms
Sass pour les web designers par Dan Cederholm
Aujourd'hui nous vous proposons un retour sur la lecture de l'ouvrage Sass pour les web designers écrit par Dan Cederholm avec une approche intéressante pour les débutants et les intégrateurs. Sass pour les web designers et integrateurs Publié il y a plus d'un mois, découvrez le numéro 10 de la célèbre collection "A Book Apart" aux éditions Eyrolles avec un sujet qui risque de vous intéresser. Ce nouvel ouvrage nous propose un tour d'horizon dans l'univers de l'intégration avec le CSS et plus particulièrement l'utilisation de SASS. L'auteur Dan Cederholm nous fait un retour de son expérience avec son passage à Sass afin d'améliorer et de gagner un temps précieux pour l'intégration. Mais pas de panique le Sass va nous changer la vie ! Nous utilisons Sass depuis déjà 2 ans avec le BlogDuWebdesign et nous ne pouvons plus passer par les anciennes feuilles de styles désormais ! À qui s'adresse ce livre ? L'auteur du livre : Dan Cederholm L‘auteur Dan Cederholm vit à Salem dans le Massachusetts.
