dans HTML5, les concepteurs peuvent plus facilement créer des styles CSS3 qui capturent pleinement la puissance d’une balise et de ses attributs.
Concepts clés introduits
Accueillant plusieurs options d’affichage. L’écran doit désormais accueillir une plus grande variété d’appareils. L’introduction des requêtes multimédias est en grande partie due à la grande quantité d’options d’affichage pour lesquelles les sites doivent être conçus – tout, des smartphones aux grands moniteurs HD. Cette fonctionnalité permet d’accéder à un site et au style approprié afin que le site s’affiche comme prévu sur n’importe quel appareil donné.
Affiner l’apparence du site: Les concepteurs doivent être en mesure d’ajuster l’apparence d’un site à la profondeur dont ils ont besoin. Le concept de sélecteurs d’attributs repose sur l’idée de donner plus d’options d’affichage au concepteur Web. Un concepteur peut désormais affiner l’apparence d’un site en concevant différents niveaux de sélecteurs via la fonction de sélecteurs d’attributs. Les pseudo-classes sont une autre méthode qui permet cette capacité. Ceux-ci existent depuis le début du CSS, mais CSS3 en a introduit 16 nouveaux qui s’appuient sur l’idée de styliser le contenu de manière dynamique.
Modules L’un des changements les plus importants introduits par CSS3 a plus à voir avec le protocole d’approbation qu’avec les éléments de conception réels. CSS3 a introduit des modules dans le processus en décomposant les différents attributs CSS en blocs logiques d’informations. Ce changement devrait accomplir au moins deux choses importantes:
Rendre les modifications en cours des normes CSS plus faciles à approuver
Prise en charge plus systématique du navigateur (puisque les fournisseurs peuvent prioriser les modules à implémenter en premier)
Changements clés Requêtes médias L’idée des types de médias a été introduite pour la première fois dans CSS2 – et pour la plupart, le seul type qui a vraiment attiré l’attention était l’impression de type de média. Le concept était de cibler une feuille de style spécifique sur le type de média. Les requêtes multimédias développent ce concept, mais au lieu de rechercher un type de support – comme l’impression -, elles recherchent les capacités de l’appareil. Par exemple, il recherchera les informations suivantes:
Largeur et hauteur de l’appareil
Largeur et hauteur du navigateur
Orientation de l’appareil (paysage ou portrait)
Résolution d’écran
Avec cette fonction, vous pouvez désormais créer des styles pour l’appareil, en fonction des capacités de cet appareil. Si le nombre de styles que vous souhaitez modifier est minime – pour un appareil mobile par rapport à votre site standard – vous pouvez inclure les styles dans votre feuille de style principale. Cependant, si les changements sont substantiels, il est préférable d’en créer un nouveau.
Lorsque vous utilisez des requêtes multimédias, vous devez tenir compte de la manière dont vous souhaitez que votre site s’affiche sur l’appareil mobile. Par exemple, certaines différences courantes entre un site principal et un site mobile sont la taille de l’en-tête. La taille devrait être considérablement réduite pour un appareil mobile. La navigation et le contenu ont tendance à être empilés verticalement sur les appareils mobiles pour simplifier l’accès au contenu.
Si le style de votre site principal ressemble à ceci:
div # header {
image de fond: url (large-bg-image.jpg);
hauteur: 200px;
position: relative;
}
Vous pouvez créer un style spécifique pour un appareil mobile – en fonction de sa largeur maximale – comme ceci:
@ écran multimédia et (max-device-width: 480px) {
div # header {
image de fond: url (petite-bg-image.jpg);
hauteur: 75px;
position: relative;
}
Les transitions Cette fonctionnalité vous permet d’ajouter un effet de type Flash à un élément sans avoir besoin de Flash ou même de JavaScript. Pour utiliser la propriété Transition, vous devez d’abord spécifier la propriété CSS à laquelle vous souhaitez ajouter un effet et spécifier la durée (durée) de l’effet. Dans cet exemple, le style de la boîte est attaché à une balise div. Le style de boîte combine plusieurs types de transition: largeur, hauteur, couleur d’arrière-plan et transformation.
Pour voir comment cela fonctionne, placez ce codage entre les balises de votre page HTML.
Ajoutez ensuite ces styles à votre feuille de style
.boîte {
style de bordure: solide;
largeur de la bordure: 5px;
bloc de visualisation;
largeur: 100px;
hauteur: 100px;
couleur de fond: # ff0000;
-webkit-transition: largeur 2s, hauteur 2s, couleur d’arrière-plan 2s, -webkit-transform 2s;
transition: largeur 2s, hauteur 2s, couleur d’arrière-plan 2s, transformation 2s;
}
.box: hover {
couleur d’arrière-plan: # 00ffff;
style de bordure: solide;
largeur de la bordure: 1px;
largeur: 200px;
hauteur: 200px;
-webkit-transform: rotation (270deg);
transformer: tourner (270deg);
}
Lorsque vous survolez la boîte sur votre page HTML, la boîte tournera progressivement tout en changeant lentement les couleurs. Les transitions peuvent être utilisées pour créer des effets puissants sur votre site, comme un menu de navigation engageant.
Sélecteurs avancés L’un des sélecteurs les plus couramment référencés introduits dans CSS3 est le sélecteur nth-child. Ce sélecteur vous permet de cibler des styles sur un élément spécifique.Par exemple, si vous vouliez des couleurs alternatives pour les éléments d’une liste ordonnée, vous pouvez les cibler soit par pair ou par impair, soit en sélectionnant le numéro de la ligne.
Pour créer une liste ordonnée avec des rangées alternées de blanc et de gris, vous les stylisez simplement comme ceci:
li: nième-enfant (impair) {couleur: #fff; }
li: nth-child (pair) {couleur: #ccc; }
ou pour sélectionner une ligne spécifique, dans ce cas la ligne 6, et la changer en couleur rouge, vous:
li: nth-of-type (6) {couleur: rouge; }
Vous pouvez également styliser le premier ou le dernier élément avec CSS3 en utilisant le premier de type {li: first-of-type} ou le dernier de type {li: last-of-type}.
Bordures et texte CSS3 a également simplifié la création de bordures arrondies. Ce qui nécessitait autrefois des images d’arrière-plan peut désormais être accompli en utilisant la propriété border-radius. Vous pouvez arrondir un ou tous les coins d’une boîte. La nouvelle norme fait également un bon pas en avant pour conserver la police de caractères que vous avez choisie pour la conception de votre site. En utilisant la règle @ font-face, vous pouvez désormais vous assurer que votre police est utilisée lorsque la page s’affiche dans le navigateur au lieu d’une police par défaut sur l’ordinateur de l’utilisateur.
Premiers pas avec CSS Si vous êtes complètement nouveau dans CSS, au lieu d’être un utilisateur CSS expérimenté qui souhaite maîtriser les nouvelles fonctionnalités de CSS3, commencez par un tutoriel global.
Les tutoriels gratuits proposés par W3Schools sont un excellent point de départ. Ces leçons vous permettent de définir votre propre rythme et avec leur option d’édition «essayez-le vous-même», vous pouvez maîtriser complètement un concept avant de passer à autre chose.
Getting Started with CSS by Mozilla Developer Network est une autre excellente source gratuite de formation d’entrée de gamme. Leurs leçons sont conçues pour les débutants.
Didacticiels sur les éléments de page Web courants Si vous voulez apprendre à impressionner les visiteurs de votre site Web, il existe un certain nombre de zones communes de page Web que vous pouvez améliorer avec CSS3. Vos améliorations peuvent être aussi simples ou aussi complexes que vous le souhaitez, car chacun des didacticiels répertoriés ci-dessous vous fournit le codage CSS3.
La navigation : CSS3 ouvre de nombreuses possibilités de conception avec la navigation dans les menus. Vous pouvez amplifier des menus déroulants ou plats avec une relative facilité. Créez un menu déroulant de style Mac en utilisant les propriétés CSS3 box-shadow, text-shadow et border-radius. Le menu se dégrade également bien pour les navigateurs Web non conformes à CSS3. Utilisez le sélecteur nième enfant introduit dans CSS3 pour créer un menu de navigation élégant de style plat ou stylisez vos boutons de navigation comme des icônes de pictogramme.
Gérer les images : Les photos font partie intégrante de presque tous les sites Web, mais trop de sites tombent sous le charme de simplement placer une image sur la page. Vous pouvez pimenter la façon dont vous affichez les images à l’aide de techniques telles que l’empilement de photos ou en créant des galeries avec des images qui transitent vers l’intérieur, vers l’extérieur ou pivotent. Auparavant, ces techniques nécessitaient Flash ou JavaScript, mais elles peuvent désormais être gérées à partir de la feuille de style.
Trucs sympas avec du texte: Masquer et afficher le style d’accordéon de texte n’est pas nécessairement nouveau en tant que concept, mais il peut maintenant être géré d’une manière plus simple. Vous pouvez donner à votre texte une apparence 3D en utilisant la propriété text-shadow ou aller plus loin avec la propriété hover et créer un texte qui donne l’impression de sortir de la page.
Effets spéciaux : Créez des bulles pour encadrer une partie du texte sur votre page et créer un élément de design intéressant. Si vous voulez apprécier pleinement le type d’effets spéciaux qui peuvent être créés uniquement en utilisant CSS3, visitez la démo CSS3 de Ben Lister en utilisant un navigateur non-Internet Explorer comme Chrome et cliquez sur le test de compatibilité IE. La façon dont la page se désintègre est amusante à regarder.
Ressources additionnelles L’un des moyens les plus rapides de se familiariser avec les nouvelles fonctionnalités en plus des didacticiels étape par étape consiste à lire des experts ou à utiliser des outils qui génèrent le code, de sorte que vous vous concentriez sur l’action associée à un style particulier.
Où trouver de l’aide
Livres : Plusieurs livres sur le marché expliquent les avantages de CSS3 et ce qu’il peut faire. Quelques livres à considérer sont Stunning CSS3: A project-based guide to the latest in CSS et The Book of CSS3: A Developer’s Guide to the Future of Web Design. Si vous êtes sérieux dans la maîtrise de la conception Web, vous voudrez peut-être également vous pencher sur des livres qui traitent de la théorie du CSS et du HTML.
Cours : W3Schools héberge un bon tutoriel d’introduction gratuit sur CSS3. Le site propose également des cours sur les CSS, HTML et HTML5, ainsi que sur la conception Web et les normes Web. Ed2Go propose un cours payant (89 $) qui combine HTML5 et CSS3.
Communautés : Les communautés en ligne sont d’excellentes ressources pour apprendre la conception Web et / ou CSS3. Essayez sont CSS Globe.
Cours
Mashable: découvrez comment améliorer ou créer des graphiques à barres, des boutons et des menus dans la liste de sept astuces intéressantes de Mashable.
WDL: découvrez comment masquer et afficher le style d’accordéon, créer un curseur d’image, un calendrier et plus encore dans cette liste de 20 leçons.
1stWebDesigner: Utilisez cette liste de 50 leçons si vous souhaitez apprendre à intégrer les différentes fonctionnalités centrées sur le texte de CSS3. Apprenez à faire pivoter et à courber du texte, à créer un dégradé ou une ombre de texte, à créer des nuages de balises ou – juste pour le plaisir – à développer un effet de balle rebondissante en utilisant seulement trois fonctionnalités CSS3.
Générateurs
CSS3Gen: La navigation facile en fait l’un des meilleurs générateurs CSS3 sur le Web. Pour utiliser l’outil, sélectionnez la fonctionnalité souhaitée sur votre site, comme une ombre de boîte. Vous serez dirigé vers une page avec un générateur qui vous permet de définir toutes les propriétés. Une fois votre conception terminée, vous pouvez copier le codage affiché sous l’outil et le coller dans votre feuille de style.
CSS 3.0 Maker: Une fonctionnalité intéressante de cet outil est que tout ce dont vous avez besoin pour générer votre feuille de style se trouve sur une seule page. Vous sélectionnez la fonctionnalité que vous souhaitez créer, ajustez-la avec l’outil affiché dans le coin supérieur gauche de la page. Une fois terminé, téléchargez le code en cliquant sur le lien sur le côté droit de la page.
Référence
Référence CSS: Cette page, créée par Mozilla Developer Network, répertorie toutes les propriétés CSS, classes et fonctionnalités que vous aurez besoin de référencer. Classées par ordre alphabétique, cliquez simplement sur une fonctionnalité pour ouvrir une page contenant la définition, la syntaxe, la prise en charge du navigateur, les valeurs et (le cas échéant), des exemples de la propriété.
Outil puissant CSS3 est un outil puissant pour les concepteurs et les développeurs Web. Prendre le temps de travailler à travers des didacticiels généraux ainsi que des leçons spécifiques à des fonctionnalités particulières est le meilleur moyen de maîtriser et d’affiner vos compétences, en apprenant à la fois comment les fonctionnalités fonctionnent et comment les implémenter.
Lisez plus d’astuces sur le design web ici , et n’oubliez pas de partager l’article sur Facebook !
