Kick-Start Your Project: A Collection of Handy CSS Snippets

CSS1K Create Shaped Avatars With CSS and Webkit In case you haven’t noticed, square avatars are so 2010. These days circles are all the rage. Every app worth its salt, from Path to Basecamp, is jumping on board this fad and waving goodbye to the squares who are stuck in the past. Ever the forward thinker, I asked myself, “what’s next?” Let’s look beyond squares and circles and into the future of the avatar! Using CSS and Webkit, we can use pretty much any shape as the mask for an avatar. Warning: Webkit Only Today’s project is merely a fun look forward at a design trend that you’ll no doubt see pop up as CSS masking improves in the future. Method 1: Webkit Masks The first method that we’re going to use is pretty straightforward. Grab Two Images To begin, you need two images. Once you have the avatar picked out, it’s time to build your mask. Keep in mind that things will go smoother if your photo and mask are as close in size as possible. Implementing the CSS mask method is crazy easy. Demo That’s all there is to it! Hold the Phone

Revised Font Stack | A Way Back Serious efforts are being made to get more typeface choices on the web to enhance web typography. Still, most of us prefer web-safe fonts like: Verdana, Georgia, Times New Roman and Arial. Though choices are limited, yet the number can be increased by exploring other pre-installed fonts. “… font stacks are ultimately design factors, and should be scrutinized as such.” Baskerville, Garamond and Palatino have already been used a few times to create font-stacks that inspire. I’ve selected 10 popular typefaces, serif and sans-serif, each from the survey. MicrosoftTahoma, Verdana, Segoe, sans-serif;Microsoft.com will be (in most cases) rendered in Verdana on Mac, and in Tahoma on Windows. Times New RomanIf we look at the above snapshots taken from Sushi & Robots’ about page, we will find that Palatino and Georgia have different x-height (and weight) than Baskerville and Garamond. I’ve created a font-stack for each typeface while considering the font share table statistics.

Le CSS - Tutoriel HTML & CSS La syntaxe Un fichier CSS permet de changer radicalement l'affichage de plusieurs pages HTML. La structure d'un fichier CSS est simple (plus que celle d'un fichier HTML). Un fichier CSS est composé de plusieurs règles. Chaque règle permet de changer l'affichage de plusieurs balises HTML. Expliquons cette structure avec quelques définitions : Chaque règle CSS sert à appliquer des styles à une balise HTML, certaines balises, ou un groupe de balises ; Chaque règle d'un fichier CSS débute par un sélecteur. Pour illustrer ce que nous venons de voir, nous allons voir comment centrer le titre de niveau 1 de nos pages Web. Si maintenant nous voulons une couleur bleue pour ce même titre, nous devons appliquer une seconde déclaration (couple "propriété: valeur") pour le même sélecteur h1 : il s'agit de la propriété "color", et nous lui donnons la valeur "blue". Lier le CSS au HTML En règle générale, vous placerez toutes les règles CSS dans un fichier portant l'extenssion .css. <! <! Les sélecteurs <!

How nth-child Works There is a CSS selector, really a pseudo-selector, called nth-child. Here is an example of using it: What the above CSS does, is select every third list item inside unordered lists. That is, the 3rd, 6th, 9th, 12th, etc. But how does that work? And what other kinds of things can you do with nth-child? It boils down to what is in between those parentheses. nth-child accepts two keywords in that spot: even and odd. As seen in the first example, nth-child also accepts expressions in between those parentheses. Let's get back to the "3n+3" from the original example though. (3 x 0) + 3 = 3 = 3rd Element (3 x 1) + 3 = 6 = 6th Element (3 x 2) + 3 = 9 = 9th Element etc. How about the :nth-child(2n+1)? (2 x 0) + 1 = 1 = 1st Element (2 x 1) + 1 = 3 = 3rd Element (2 x 2) + 1 = 5 = 5th Element etc. Hey wait! (3 x 0) = 0 = no match (3 x 1) = 3 = 3rd Element (3 x 2) = 6 = 6th Element (3 x 3) = 9 = 9th Element etc. So as you can see, the matches are exactly the same, no need for the "+3". Share On

Increasing the Clickable Area of Inline Links Demo It has been best prac­tice for some time now to ensure that nav­ig­a­tion links have appro­pri­ate pad­ding. This makes click­ing these links much easier, espe­cially if you are on a mobile device. Here is an art­icle, writ­ten four years ago, dis­cuss­ing this very idea. Why aren’t we tak­ing this one step fur­ther? Links don’t only exist in menus, and inline links can be tricky to click accur­ately. Now keep in mind that this is only a thought. The trick is to be subtle with this tech­nique; increase the click area enough that users don’t have to be 100% accur­ate, but don’t increase it too much so that the beha­vior becomes unex­pec­ted. Here is an example of what the CSS rule might look like: Notice the use of position: relative? What are your thoughts on this tech­nique? Tweet this

CSS Tutorial Step by step CSS float tutorial Floatutorial takes you through the basics of floating elements such as images, drop caps, next and back buttons, image galleries, inline lists and multi-column layouts. General info Tutorial 1. Floating an image to the right Float an image to the right of a block of text and apply a border to the image. Tutorial 2. Float an image and caption to the right of a block of text and apply borders using Descendant Selectors. Tutorial 3. Float a series of images down the right side of the page, with content flowing beside them. Tutorial 4. Float a series of thumbnail images and captions to achieve an image gallery. Tutorial 5. Float a simple list into rollover "back" and next "buttons". Tutorial 6. Float a simple list, converting it into a horizontal navigation bar. Tutorial 7. Float a scaleable drop cap to the left, resize it and adjust line-heights to suit your needs. Tutorial 8. Float a left nav to achieve a two column layout with header and footer. Tutorial 9.

LESS « The Dynamic Stylesheet language Learn CSS Grid for free This new CSS module makes it easier than ever to create website layouts. It simplifies both your HTML and CSS, while simultaneously giving you more control over your layout. You can use it without any framework, as the CSS Grid module is native to the browser. Course content This course contains three sections. In the bonus section, you’ll learn how to create article layouts with CSS Grid plus some more advanced concepts. What you’ll learn CSS Grid fundamentalsYour first gridResponsive gridsCreate pages, image grids, and articlesQuick website prototypingAdvanced concepts ... and much more!

CSS Click Events An article about different experimental approaches of employing click events using CSS only. It summarizes and shows some clever hacks and smart tricks. For the last few years, we’ve been witnessing the wonderful expansion of front-end languages especially HTML with the HTML5 specifications and CSS with the CSS Level 3 specifications. We can now do a lot of stuff we couldn’t have done without JavaScript or images before, like rounded corners, gradients, responsive layouts, grid stuff, transparency in colors, and so much more. But one thing we’ve always been missing is the possibility to handle click events with CSS. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. Disclaimer This blog post is about showing the possibilities of CSS and some clever hacks. Plus, some of these techniques are not well supported by browsers, meaning it’s even more borderline; we intend to have some fun pushing the limits of CSS. Checkbox hack Aaaaah, the checkbox hack. Pros

CSS Overlay Techniques There are several techniques for creating overlays: from using an absolutely positioned element to outlines and pseudo-elements. In this article we are going to explore each technique's styles with their pros and cons. Design patterns, a set of best practices and techniques that aim to solve some of the most common design “problems”, are usually presented in the context of design principles. One of these design principles is the “Stay On Page” principle. This principle is based on the fact that page refreshes are disruptive to the user’s mental flow, causing what is known as “change blindness”, and that we need to be able to avoid breaking the visual flow of the user wherever and whenever we can. We can decide intelligently when to keep the user on the page and model his process. Lightweight overlays can be used for asking questions, obtaining input, introducing features, indicating progress, giving instructions, or revealing information. Technique #1: Absolutely positioned element

Jardin Zen CSS : La beauté de la conception CSS Alors, de quoi s'agit-il ? Il faut sans cesse montrer la puissance de CSS. Le Jardin Zen vise à exciter, inspirer et encourager la participation. Pour commencer, regardez quelques designs présents dans la liste. Cliquer sur l’un d’eux appliquera son style sur cette page. Le code HTML reste le même, seule la feuille de style externe change. Les CSS permettent un contrôle total de la mise en forme d’un document hypertexte. Participation Notre objectif a toujours été de promouvoir les designs de qualité. Vous pouvez modifier la feuille de style comme bon vous semble, mais pas le code HTML. Téléchargez les fichiers d’exemple HTML et CSS pour travailler sur une copie locale. Avantages Pourquoi participer ? Conditions Si possible, nous aimerions surtout voir l’utilisation de CSS 1 et 2. Heureusement, concevoir de cette manière démontre comment les différents navigateurs ont maintenant bien implémenté les CSS. Ceci est aussi bien un exercice d’apprentissage que de démonstration. Par Dave Shea.

HTML5, CSS3, JS Demos, Creations and Experiments | CSSDeck