Les sprites CSS. Le temps des onmouseover, des images préchargées via JavaScript et des autres joyeusetés héritées des grandes périodes de tag soup est, comme le temps des Elfes de la Terre du Milieu, définitivement révolu : faire des effets de rollover sur des images est tout à fait possible en utilisant uniquement les CSS. La technique consiste à exploiter un fichier unique pour stocker de multiples images, positionnées les unes à côté des autres. Celles-ci seront ensuite appelées dans la feuille de style, et la fenêtre d'affichage sur l'une ou l'autre image sera définie en CSS grâce à la propriété background-position. Attention : la technique exposée dans ce tutoriel est à manier avec précaution car elle peut engendrer des problèmes d'accessibilité (typiquement lorsque les images ne sont pas actives).
Il est donc déconseillé de l'employer pour des images dont le contenu est pertinent (menu par exemple). Les avantages des sprites CSS sont multiples : La technique des sprites CSS Principe (avec sprite) Galerie des plus beaux sites de couleur multicolore » Web Design Inspiration » CSS Gallery » Design Showcase » CSSMozaic.com. CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web.
Css float image flottante. Floatleft : image flottante gauche dans paragraphe Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nulla mauris. Nunc commodo odio at ipsum. Nam lacinia tempor dui. Sed elit. Cras eu tellus ac turpis tristique aliquet. Pellentesque blandit lacinia nulla. Floatright : image flottante droite dans paragraphe Nullam erat. Paragraphe entre images avec Clear: both; Ce paragraphe contient une image flottante à droite et une image flottante à gauche. Ce paragraphe en rouge a un "clear : both" et de ce fait se placera en dessous des deux images et pas au milieu. Floatleft et tableau sans cellules Il est tout à fait possible de faire croire au visiteur qu'il est en présence d'un tableau bien structuré... Vignette et <p> Code HTML : <p class="floatleft">vignette 01</p> <p class="floatleft">vignette 02</p> <p class="floatleft">vignette 03</p> ... vignette 01 vignette 02 vignette 03 vignette 04 vignette 05 vignette 06 Vignette et <div>
Les dégradés de couleurs en CSS3 avec gradient. Bonjour à tous ! Aujourd’hui nous allons parler des dégradés en CSS3. Vous en avez probablement déjà rencontré, et peut-être même déjà utilisé via des générateurs. Ce tutoriel très complet va vous permettre d’aller plus loin et de comprendre en détail comment les utiliser, ce qui améliorera les performances d’affichage de votre site en évitant d’avoir à utiliser des images ! Ce tutoriel a été rédigé par Bastien Uranga, étudiant en informatique à Bordeaux et passionné par les technologies web. En plus de ses études, il lui arrive souvent de prendre le rôle d’intégrateur dans certains projets et d’améliorer ses connaissances en HTML5 et CSS3. Vous pouvez d’ailleurs ajouter Bastien sur Twitter pour suivre l’actualité HTML5 et CSS3 via son compte @Stoows.
Bonne lecture ! Pour commencer … Nous allons tout d’abord créer une div : Puis dans notre feuille de style CSS, nous ajoutons les propriétés suivantes : Précision et rappel Les différentes formes de gradient Attends, attends ! A bientôt ! 10 galeries CSS pour trouver l’inspiration | ikomeo Design. Qu’il s’agisse de trouver un brin d’inspiration ou de garder un oeil sur les dernières tendances en webdesign, ces galeries vous seront sans aucun doute d’une précieuse aide dans vos démarches de création. CSS Remix Une véritable mine d’or en terme de webdesign, avec plus d’un millier de sites répertoriés. Make Better Websites Une des meilleures galeries actuelles, tant sur la qualité des sites sélectionnés que sur le choix de présentation des sites : les vignettes, souvent trop petites pour apprécier la qualité graphique de l’interface, sont laissées de côté au profit d’un large screenshot. CSS Leak Design Meltdown Récemment refondu, Design Meltdown vous propose une sélection de sites triés par thématiques (styles graphiques, types de sites, structure,…).
Best Web Gallery Pas moins de 800 sites répertoriés, avec la possibilité d’effectuer un tri par catégorie. CSS Nature Une galerie de sites à tendance « éco ». CSS Collection Une galerie de sites répertoriés par secteurs d’activité. Use CSS3 to Create a Dynamic Stack of Index Cards | DesignLovr. Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3. Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us. We will create a dynamic stack of index cards solely with HTML and CSS3 and use such CSS3 features as transform and transition (for the dynamic effects) and @font-face, box-shadow and border-radius (for the styling).
Let’s start with the simple HTML-markup, which consists of simple, unordered list, filled with random content. If you want you can download the icons I used at Tutorial 9. Now the CSS. The fonts Note This and Kulminoituva, both of which are available in @font-face kits (with all necessary font-formats and preformatted CSS-file) on Font Squirrel, are the ones used in my example design. Remark Quicktip. Générateur de Sprites CSS | Project Fondue.