CSS Tutorial CSS3 Create - Démos, tutoriels et expériences CSS : menus, galerie photos, interfaces web. Alsacréations : Actualités et tutoriels HTML, HTML5, CSS, CSS3, standards du web Initiation au positionnement CSS (partie 2) Le positionnement des éléments en CSS est sans aucun doute l'un des aspects les plus intéressants de cette technologie, mais également l'un des plus ardus. Positions, flux et autres flottants sont pourtant des notions essentielles à une bonne maîtrise de la mise en page. Si de plus en plus d'intégrateurs semblent aujourd'hui acquérir les bases du comportement de ces propriétés, les choix des techniques demeurent couramment discutables, tout au plus hasardeux. Voyons ces méthodes de positionnement en détails afin de ne plus se laisser aller à des choix arbitraires incohérents. Sommaire du document Parce qu'une révision des bases ne fait jamais de tort… La section qui suit se contente d'introduire brièvement les notions de positionnements disponibles en CSS. Notion de flux Le flux d'un document pourrait se définir comme étant le comportement naturel d'affichage des éléments d'une page web. Les éléments de type block (h1, p, ul, ol, dl, table, blockquote, etc.) Revenir au sommaire Un habillage
Feuilles de style en cascade Un article de Wikipédia, l'encyclopédie libre. Pour les articles homonymes, voir CSS. Les feuilles de style en cascade[1], généralement appelées CSS de l'anglais Cascading Style Sheets, forment un langage informatique qui décrit la présentation des documents HTML et XML. Les standards définissant CSS sont publiés par le World Wide Web Consortium (W3C). Histoire de CSS[modifier | modifier le code] Un concept parmi d'autres, présent dès l'origine du web[modifier | modifier le code] Le concept de feuille de style est présent dès l'origine du World Wide Web : le premier navigateur web (« WorldWideWeb », renommé par la suite « Nexus ») permet de mettre en forme les documents à l'aide de ce qui serait aujourd'hui considéré comme une « feuille de style utilisateur »[2]. Il ne s'agit cependant pas de styles déterminés par l'auteur du document. Les origines des CSS sont donc liées à trois alternatives majeures : Les premiers développements[modifier | modifier le code] [modifier | modifier le code]
fancyBox - Fancy jQuery Lightbox Alternative 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”. 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. Au sein de ce schéma, on ne raisonne plus en “block” ou “inline”, ni même en float ou autres types de boîtes “classiques” CSS, mais en “Modèle de boîte flexible”, dont les quatre possibilités principales sont : Note : ce tutoriel a été initialement rédigé en octobre 2010. Il a subi une refonte intégrale en décembre 2014 pour se mettre à jour. En action ! Démonstration display: flex Compatibilité Tableau des compatibilités Standardisation
Les nouveautés de CSS3 en 20 exemples Il faut tout d’abord commencer par les bases, le CSS c’est quoi, d’ou ça vient, etc … CSS en Anglais « Cascading Style Sheets » que nous traduisons en France par « feuille de style ». Ces feuilles de style nous permettent de gérer la présentation d’une page web. Le langage CSS, ainsi que le HTML et le XML sont la recommandation du World Wide Web Consortium, plus connu sous W3C. Le but d’une feuille de style et donc du CSS est de permettre de séparer le contenu HTML de la présentation des éléments. De plus, CSS ajoute des fonctionnalités nouvelles par rapport à HTML au point de vue du style. Au final CSS3 c’est l’évolution de CSS2, avec tout un tas de nouveautés, arrondir vos images dans CSS, faire des ombres sur les div, des ombres sur du texte, des polices de caractères plus fun, des colonnes, des bordures d’images, etc… Nous allons maintenant voir quelques exemples assez surprenant de réalisation faites avec CSS3.
Le modèle tabulaire en CSS Le modèle de construction tabulaire (HTML et CSS) compte sans aucun doute parmi les plus fascinants qui soient, après avoir été d'abord adulé puis banni vigoureusement par les intégrateurs de tous poils. En 1998, les spécifications CSS2 étendent les historiques valeurs de la propriété display et proposent depuis belle lurette des possibilités de rendus et positionnements “tabulaires” sans pour autant interférer dans la sémantique et le bon usage des éléments HTML. Passons immédiatement à table et découvrons en détail le monde mal connu du Modèle Tabulaire en CSS… Note : Cet article est publié conjointement sur OpenWeb.eu.org et sur Alsacreations.com. Compatibilité Commençons par une excellente nouvelle : le modèle de rendu tabulaire en CSS est finalisé depuis suffisamment longtemps pour être compatible avec tous les navigateurs actuels et leurs générations précédentes. Tableau des compatibilités Display table inline-table Spécifie un comportement de table de type en-ligne pour un élément.
Apprendre CSS : Création d'une horloge en CSS3 Inutile de s'y attarder plus que nécessaire : la <div> #horloge correspond au conteneur, #heure, #minute et #seconde aux aiguilles et #centre à l'axe de rotation. Bien sûr, si on affiche la page telle quelle, on ne va pas voir grand-chose ! Ajoutons donc quelques styles de base : Tout d'abord, nous mettons un border-radius à 50% et une bordure bleutée à l'horloge afin de lui donner une forme arrondie. Quelles que soient les dimensions d'un élément, fixer la valeur de border-radius à 50% permet d'obtenir une forme arrondie. On fixe la propriété position de l'horloge à relative afin de pouvoir la centrer facilement avec margin: auto; (pour les besoins de l'exemple), si l'on veut la positionner à un endroit précis de la page, on préfèrera la valeur absolute. On rajoute une marge horizontale avec la valeur 40px auto afin de décoller l'horloge du titre et de la centrer horizontalement. Pour peaufiner encore le rendu, nous allons ajouter quelques styles avec le pseudoélément :before :
Comprendre l'héritage et la parenté des styles CSS Les styles CSS fonctionnent sur le principe d'imbrication, de parenté et d'héritage, quelques explications. Le modèle Parent-Enfant(s) L'héritage des CSS est fondé sur le modèle Parent-Enfant(s) : chaque élément Enfant reçoit en héritage tous les styles de son élément Parent. Précision : l'élément enfant héritera de toutes les propriétés de l'élément parent uniquement si ces propriétés s'héritent, car l'héritage ne fonctionne pas non plus sur toutes les propriétés css (margin, padding et autres propriétés de bloc) Voici un exemple illustrant bien ce principe d'héritage. Le code HTML : <body> test <div>test</div></body> Pour connaitre les différents liens de parenté des balises, il existe un site très complet à ce sujet. Attention : il existe des exceptions, toutes les balises ne peuvent pas être imbriquées ! Cas de la balise de lien <a> L'héritage s'applique aussi à la balise de liens <a>. :link (lien par défaut) :visited (lien déjà visité) :hover (lien au survol) :active (lien actif)
21 outils et générateurs CSS pour développeurs web Les générateurs et outils CSS sont de plus en plus nombreux sur la toile, et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant ! 1. Bear CSS Bear CSS est un service qui permet de générer une feuille de style à partir d’un code HTML en prenant en compte les éléments et le balisage de la structure du document (id et classes CSS). Ainsi, vous gagnerez du temps au démarrage de la conception du style CSS. 2. CSS Type Set est un service qui permet de gérer la mise en forme d’un texte dans une interface simple et intuitive. 3. Border Radius est un générateur déstiné uniquement à la propriété CSS3 border-radius qui permet de créer des coins arrondis sur un élément HTML. 4. 5. 6. 7. 8. 9.