Grid Designer 2
If you're familiar with the grid, a bit of design and basic typography, using this script should be pretty easy - most of the functions are pretty self-explanatory. If you're unfamiliar with grids in general, you could start by reading an excellent series of articles by web designer Mark Boulton. For those who want a real understanding of the theory of grids in relation to design and typography, I strongly recommend this book.
CSS +HTML - Button Styles
Winona Ujarak Wayra Tamaya
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.
CSS ShortHand Property Cheat Sheet
digg Shorthand properties can be used to set several properties at once, in a single declaration, instead of wasting your precious time and space making declaration for each individual property. With css shorthand we make our code less complicated and more readable for those who want to explore it. Unfortunately, quite a few shorthand properties are available, that`s why we`ve collected most useful and most used for you. But be careful shorthand declaration is effective when condensed correctly, sometimes it can bring surprises. We hope that today`s freebie come in handy.
Reboot, Resets, and Reasoning
By Chris Coyier On reset I saw in an article by Nicholas Cerminara the other day (careful visiting that link, looks like they have some tracking scripts run wild) that Bootstrap 4 has a new CSS reset baked in they are calling Reboot: Reboot, a collection of element-specific CSS changes in a single file, kickstart Bootstrap to provide an elegant, consistent, and simple baseline to build upon. If you're new to CSS development, the whole idea of a CSS reset is to deal with styling inconsistencies across browsers. For example, just now I popped a <button> onto a page with no other styling whatsoever. Chrome applies padding: 2px 6px 3px; - Firefox applies padding: 0 8px;.
CSS + HTML - Button Styles and Effects
A collection of fresh button styles and effects for your inspiration. We use CSS transitions and pseudo-elements for most of the effects. View demo Download source Today we’d like to share some fresh button styles and effects with you. The current “button trend” is quite exciting since there are a variety of design details in use which allow for a great diversity of styles.
"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.
Test Your Browser For CSS3 Compatibility
Home / CSS3 Selectors Test Is your browser compatible? After starting the testsuite it will automatically run a large number of small tests which will determine if your browser is compatible with a large number of CSS selectors.
Prefix free: Break free from CSS vendor prefix hell!
-prefix-free lets you use only unprefixed CSS properties everywhere. It works behind the scenes, adding the current browser’s prefix to any CSS code, only when it’s needed. The target browser support is IE9+, Opera 10+, Firefox 3.5+, Safari 4+ and Chrome on desktop and Mobile Safari, Android browser, Chrome and Opera Mobile on mobile. If it doesn’t work in any of those, it’s a bug so please report it.
CSS + HTML - Text Styles and Hover Effects
A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas. View demo Download source
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.
CSS3 Lightbox
Today we want to show you how to create a neat lightbox effect using only CSS. The idea is to have some thumbnails that are clickable, and once clicked, the respective large image is shown. Using CSS transitions and animations, we can make the large image appear in a fancy way. View demo Download source With the help of the pseudo-class :target, we will be able to show the lightbox images and navigate through them. The beautiful images are by Joanna Kustra and they are licensed under the Attribution-NonCommercial 3.0 Unported Creative Commons License.
