Media Queries
Le top 10 des propriétés CSS3 : compatibilité inter-navigateur
La liste des propriétés qui suivent n’inclue pas toutes les propriétés CSS3 existantes à ce jour. C’est une sélection des 10 propriétés qui vous donneront une bonne base pour vos développements front-end futurs et qui vous permettra de vous faire gagner du temps. Note : à l’exception de @font-face, ni IE6, IE7 ou IE8 ne supportent les propriétés CSS3. IE9 en supporte quelques une, ce sera indiqué lorsque ça sera le cas. @font-face @font-face permet aux polices d’écritures d’être téléchargé du serveur vers le navigateur client afin d’afficher une police donnée de façon correcte. Comme c’est une propriété qui existe depuis déjà longtemps, c’est une des seules supportée par tous les navigateurs. Il y a un bug connu des anciennes versions de IE et ce même en utilisant des polices en .eot. Il y a aussi un bug avec les navigateurs basés sur Webkit lorsque l’on applique un font-weight bold ou un font-style italic sur la police : ça ne fonctionne pas. La solution complète donne : Opacity Box-shadow
Des générateurs de sprites CSS pour accélérer le chargement des images
Vous utilisez certainement déjà les sprites CSS sur votre site. Cette technique qui consiste à regrouper un ensemble de petits éléments visuels dans un même fichier afin d'y faire référence de manière uniforme et d'épargner des requêtes multiples au serveur n'est pas des plus agréables à mettre en place. En effet, il faut calculer les dimensions des zones à afficher et leurs coordonnées, puis exploiter la propriété background-position en CSS pour "décaler" la vue au bon emplacement. CSS Sprite Generator est destiné à vous faciliter la tâche en combinant différentes images fournies dans une archive zip en un seul assemblage. A l'inverse, Sprite Creator simplifie la découpe virtuelle car il suffit de tracer une zone de sélection autour du sprite que l'on souhaite utiliser dans la feuille de style pour obtenir les instructions CSS. Stitches, rend la tâche encore plus aisée par drag & drop avec une interface en HTML5. Pour en savoir plus au sujet des sprites :
Experimental CSS3 Animations for Image Transitions
Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We'll be using CSS3 3D Transforms for Webkit only. View demo Download source Today we want to share some experimental 3D image transitions with you that use CSS3 animations and jQuery. We’ll be using CSS3 3D Transforms for Webkit only. The images used in the demo are by Joanna Kustra. Please note that the 3D effects will only work in Webkit browsers. How it works Given a set of images, we’ll add the first image to the wrapper with the class te-cover. The main idea is to always show the regarding image using te-cover. Demos Each demo will have a group of possible transitions that can be selected from the dropdown menu above the image. We hope you like our little experiment and find it inspiring and useful!
CSS Buttons with Pseudo-elements
In this tutorial, I'll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. View demo Download source Hola, amigos. For the last month or so, I’ve been experimenting with the power of CSS pseudo-elements, specially when it comes to mixing them with buttons and that way recreating some great effects that were only possible to do with sprites, in the past. In this tutorial, I’ll show you how to create buttons with a twist, using just one anchor tag per button and the great power of CSS. The font used is ‘Open Sans’ by Steve Matteson. Disclaimer:I’ll not be using CSS vendor prefixes in this tutorial or else it would be crazy long, but you will find them in the downloadable files. I avoided CSS transitions since, right now, Firefox is the only browser that supports them on pseudo-elements. Markup Example 1 I think this is the easiest one, with a very regular CSS. Then, we create the gray container using the ::before pseudo-element. Example 2
Lettrine en CSS3 - CSS3
Il était un temps où les ressources typographiques du HTML étaient limitées. Très limitées. Les pages HTML d'antan ne pouvaient embarquer des polices comme de vulgaires fichiers média. De ce fait, les webmestres devaient se contenter de ce qu’il y avait à bord de la machine de l’internaute —ces fameuses « web safe fonts »—, celles intégrées aux différents OS (à moins d'acrobaties telles que SiFR ou Flir). CSS et sa règle @font-face permettant d'afficher n'importe quelle police on se met à rêver. Trouvez la police Rendez-vous sur Font Squirrel et trouvez dans la famille Blackletter la plus moche celle qui vous plaît.Téléchargez le kit font-face. Embarquez la police Mettez la police dans votre espace Web avec la feuille de style du package : Dans l'exemple c'est proclamate_incised que je vais utiliser pour rendre ma lettrine illisible. Trouvez votre image de fond Créez votre lettrine On va définir la classe : h2+p:first-letter On va suite appeler la police : On positionne ensuite sa lettrine
Stitches - An HTML5 sprite sheet generator
Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Then, click “Generate” to create a sprite sheet and stylesheet. This demo uses a couple of HTML5 APIs, and it is only compatible with modern browsers. Drag & drop image files onto the space below, or use the “Open” link to load images using the file browser. Stitches is developed by Matthew Cobbs in concert with the lovely open-source community at Github. Copyright © 2013 Matthew Cobbs Licensed under the MIT license. Implementation After dependencies, Stitches requires a stylesheet, a script, and an HTML element to get the job done: The sprite sheet generator is automatically created in elements that have the stitches class: If you choose, any images that are a part of the initial markup will be loaded onto the canvas: Documentation Documentation is available here. Dependencies jQuery 1.7.1, Modernizr 2.0.6, Bootstrap 2.3.0 New Contributing License Download
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. Please note that this will only work with browsers that support the :target pseudo class. Let’s do it! The Markup We want to show a set of thumbnails, each one having a title that will appear on hover. The anchor for the thumbnail will point to the element with the id image-1 which is the division with the class lb-overlay. Note that we only use a navigation in the last demo. Let’s beautify this naked markup. The CSS And that’s all the style! Demos
