Hover.css - A collection of CSS3 powered hover effects All Hover.css effects make use of a single element (with the help of some pseudo-elements where necessary), are self contained so you can easily copy and paste them, and come in CSS, Sass, and LESS flavours. Many effects use CSS3 features such as transitions, transforms and animations. Old browsers that don't support these features may need some extra attention to be certain a fallback hover effect is still in place. Licenses Hover.css is made available under a free personal/open source or paid commercial licenses depending on your requirements. To compare licenses please visit the Ian Lunn Design Limited Store and purchase a commercial license.
The Sass Ampersand The following is a guest post by Rich Finelli. Rich told me he used to have some trouble with the special ampersand character in Sass, but then had a bit of an epiphany and wanted to share that understanding (it's powers and limitations) with others. My favorite! The & is an extremely useful feature in Sass (and Less). It's used when nesting. It can be a nice time-saver when you know how to use it, or a bit of a time-waster when you're struggling and could have written the same code in regular CSS.
"Async" CSS without JavaScript by Taylor Hunt on CodePen Keith Clark posted recently about loading CSS as early as possible, without the browser refusing to render anything until it downloaded it. Like <script async>, but for stylesheets. Maximum speed. His solution sadly didn't withstand the first salvo of browser testing, which The Filament Group discovered some time ago. Hence, their LoadCSS library, which is the littlest style loader they could make that doesn't sacrifice robustness. Useful :nth-child Recipes Share this: Ship custom analytics today with Keen.io. I get a little giddy when I come across perfect uses for :nth-child or :nth-of-type (read about the difference). The better you understand them, the more css nerdgasms you get to have! In these simple "recipes" (really: expressions) I'll arbitrarily use a flat list of list items and randomly chosen numbers.
Hiding Native HTML5 Video Controls in Full-Screen Mode By Sara Soueidan On The following is a guest post by Sara Soueidan. I know Sara through all her excellent work on CodePen. Using Sass’s @error, @warn, and @debug Directives Feedback methods are essential in any programming language. In JavaScript, you’ve probably used console.log() or maybe alert(). In PHP, you can use var_dump() or print_r(). In Ruby, you may use debug or inspect. All these functions allow you to debug any value and find out what your code is doing at any point in the logic where you need help. CSS3 Patterns Gallery Browser support The patterns themselves should work on Firefox 3.6+, Chrome, Safari 5.1, Opera 11.10+ and IE10+. However, implementation limitations might cause some of them to not be displayed correctly even on those browsers (for example at the time of writing, Gecko is quite buggy with radial gradients). Also, this gallery won’t work in Firefox 3.6 and IE10, even though they support gradients, due to a JavaScript limitation. Submission guidelines
CSSGram What is This? For more background on CSS Image Effects, you can check out my blog series here, or watch my video from CSS Conf EU, which gives a baseline on blend modes and filters. Simply put, CSSgram is a library for editing your images with Instagram-like filters directly in CSS. What we're doing here is adding filters to the images as well as applying color and/or gradient overlays via various blending techniques to mimic these effects. Stripes in CSS By Chris Coyier On Stripes are pretty easy to do in CSS these days. CSS gradients via the background-image property really got our back. I thought I'd document some variations in one easy to reference place. #Normal Colored Diagonal Stripes
Fluid Typography Getting right to the code, here's a working implementation: That would scale font-size from a minimum of 16px (at a 320px viewport) to a maximum of 22px (at a 1000px viewport). Here's a demo of that, but as a Sass @mixin (which we'll cover later). Animista All CSS animations generated with Animista.net are free for personal and commercial usage and are licensed under FreeBSD license. FreeBSD License Copyright 2017 Ana Travas Redistribution and use in source and binary forms, with or without modification, are permitted provided that the following conditions are met: Redistributions of source code must retain the above copyright notice, this list of conditions and the following disclaimer.Redistributions in binary form must reproduce the above copyright notice, this list of conditions and the following disclaimer in the documentation and/or other materials provided with the distribution.
8 Sass mixins you must have in your toolbox At their core, Sass mixins are blocks of code that you define once and can then re-use anywhere, if you are familiar with any programming language you can think of them as functions. A mixin can take multiple parameters and make calls to functions to in the end output CSS, and they are super useful when you want really clean and DRY code. Some of the mixins below are already included in the Compass library, but since I prefer not to use Compass in my projects, I decided to write them myself. So, here are the 8 mixins I think every developer should have in their toolbox. 1. Set a rem font size with pixel fallback