background preloader

CSS

Facebook Twitter

"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.

"Async" CSS without JavaScript by Taylor Hunt on CodePen

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. Filamentgroup/loadCSS. The Sass Ampersand. The following is a guest post by Rich Finelli.

The Sass Ampersand

Runway. 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.

Hover.css - A collection of CSS3 powered hover effects

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. A Complete Guide to Flexbox. The Flexbox Layout (Flexible Box) module (currently a W3C Last Call Working Draft) aims at providing a more efficient way to lay out, align and distribute space among items in a container, even when their size is unknown and/or dynamic (thus the word "flex").

A Complete Guide to Flexbox

The main idea behind the flex layout is to give the container the ability to alter its items' width/height (and order) to best fill the available space (mostly to accommodate to all kind of display devices and screen sizes). A flex container expands items to fill available free space, or shrinks them to prevent overflow. Pure CSS icons. A Single Div. CSS Flags. One div - The single element HTML/CSS icon database.

CSSGram. What is This?

CSSGram

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.

This means less manual image processing and more fun filter effects on the web! We are using pseudo-elements (i.e. Browser Support. 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.

8 Sass mixins you must have in your toolbox

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. Live Editing Sass and Less in the Firefox Developer Tools. Sass and Less are expressive languages that compile into CSS.

Live Editing Sass and Less in the Firefox Developer Tools

If you’re using Sass or Less to generate your CSS, you might want to debug the source that you authored and not the generated CSS. Luckily you can now do this in the Firefox 29 developer tools using source maps. The Firefox developer tools use source maps to show the line number of rules in the original source, and let you edit original sources in the Style Editor. Here’s how to use the feature: 1. When compiling a source to CSS, use the option to generate a sourcemap for each style sheet. Using source maps with Sass 3.3. One of the exciting new features in Sass 3.3 that every developer should take advantage of is source maps.

Using source maps with Sass 3.3

As CSS pre-processors, minifiers, and JavaScript transpilers have become mainstream it is increasingly difficult to debug the code running in the browser because of differences with the original source code. For example, if you use CoffeeScript (which compiles to JavaScript) you won't see CoffeeScript while debugging in the browser. Instead, you'll see compiled JavaScript. The same problem exists for Sass which compiles down to CSS.

PNG vs SVG for sprites. Using SVG. By Chris Coyier On SVG SVG is an image format for vector graphics.

Using SVG

It literally means Scalable Vector Graphics. Basically, what you work with in Adobe Illustrator. You can use SVG on the web pretty easily, but there is plenty you should know. Precision Bitmap To Vector Conversion Online - Vector Magic. PNG vs SVG for sprites. CSS3 Flexbox Layout module. Vous connaissez certainement le modèle de boîte classique en CSS et ses dispositions de type “block” ou “inline”, sachez que Flexbox CSS3 a été conçu pour étendre ce périmètre en introduisant un nouveau modèle de boîte distinct, que l’on appellera “le Modèle de boîte flexible”.

CSS3 Flexbox Layout module

En février 2016 est sorti mon livre entièrement dédié à Flexbox. Il se nomme "CSS3 Flexbox : plongez dans les CSS modernes" et je vous recommande bien évidemment sa lecture afin de comprendre tous les rouages de ce positionnement révolutionnaire, et d'en maîtriser tous les aspects. Handy Sass Mixins - Web Design Weekly. Mixins are one of the most powerful features of Sass. Mixins allow for efficient and clean code repetitions as well as an easy way to adjust your code with ease. If you are using Sass in your development workflow, no doubt you are using some of the mixins that I have covered below but some might also be new and helpful. I have also added the mixins to GitHub. If you have any favourite mixins, thoughts, tweaks or modifications, be sure to submit a pull request or add them in the comments below. A list of my stuff related to Sass. Sass : Mixin ou Placeholder ? Hugo Giraudel est un spécialiste internationalement reconnu de Sass. Il explique ici clairement et simplement la différence entre mixin et placeholder, comment utiliser l'un ou l'autre ou... combiner les deux.

Par Hugo Giraudel. Une Feuille de style et des « hacks CSS » pour cibler IE6, IE7 ou IE8. Handy Sass Mixins - Web Design Weekly. Avoiding Faux Weights And Styles With Google Web Fonts. Advertisement Today, too many websites are still inaccessible. In our new book Inclusive Design Patterns, we explore how to craft flexible front-end design patterns and make future-proof and accessible interfaces without extra effort. Hardcover, 312 pages.

Spring-cleaning Unused CSS With Grunt, Gulp, Broccoli or Brunch. The tough economic times on Tatooine hit everyone hard, including the Jawas. Delivering a fast experience on the web usually involves reducing server response time, minification of CSS/JS/HTML and an optimisation of images and above-the-fold content. We can further minimize the latency caused by stylesheet loading by removing unused CSS rules delivered to the client. De la géométrie avec CSS. Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons créer de plus en plus de formes telles que les carrés, les rectangles, les ronds, etc.

CSS triangle generator. Sass px to em mixin. Sass: Sass Basics. Layout Gala: a collection of 40 CSS layouts based on the same markup and ready for download! All layouts use valid markup and CSS, and have been tested successfully on Internet Explorer/win 5.0, 5.5, 6 and beta 2 preview of version 7; Opera 8.5, Firefox 1.5 and Safari 2. Each of the columns could be the longest, and for testing columns length I've used the script filler text on demand. Each layout could represent a site with five main sections: header, content, navigation, other stuff and footer. The basic markup, common to every layout, is the following: Compass Documentation. Compass Documentation. CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.

Les effets graphiques (très) avancés en CSS. CSS Compressor, Free CSS Compressor and CSS Compression Tool. EASY - One Click CSS Compressor NO coding expertise required. CSS3 Click Chart. CSS. Get the lowdown on the key pieces of Bootstrap's infrastructure, including our approach to better, faster, stronger web development. HTML5 doctype Bootstrap makes use of certain HTML elements and CSS properties that require the use of the HTML5 doctype. Stylus. Sass - Syntactically Awesome Stylesheets. LESS « The Dynamic Stylesheet language. Advanced CSS Prettifier.