CSS Reference

Avoir plusieurs présentations alternatives pour votre site On peut définir une présentation alternative comme : « une présentation adaptée à un autre support » que le traditionnel navigateur graphique (exemple : les mobiles). un autre design d'un site pour un support donné (exemple : pour un navigateur graphique). Il y a quelques années, l'idée même d'avoir un site avec plusieurs présentations alternatives faisait simplement sourire les « habitués ». Le concept en lui-même était séduisant, mais se heurtait à plusieurs obstacles : Prenez en main Bootstrap Vous créez des pages web et vous passez beaucoup (trop) de temps avec le CSS ? Alors Bootstrap est fait pour vous ! Ce cours va vous guider dans la découverte de cette puissante boîte à outils.

Ce que vous avez toujours voulu savoir sur CSS - Vincent De Oliveira Aujourd’hui, c’est un fait: tout le monde connaît et utilise CSS. Et c’est tant mieux! Cependant, bien que le langage en lui-même soit plutôt simple, certains aspects peuvent sembler encore obscurs. Cet article fait suite à une présentation que j'ai donnée lors de la Kiwi Party 2013, puis lors des MSTechDays 2014. CSS, c’est simple

Responsive Images : comprendre srcset et sizes - Alsacreations Entre les images floues sur écrans rétina, mal adaptées ou trop lourdes, il n'est pas toujours évident de gérer les différentes ressources graphiques sur l'ensemble des surfaces et des périphériques. Les techniques de Responsive Web Design tiennent parfois (souvent) de la bidouille et il est difficile de distinguer les bonnes pratiques d'intégration. Au sein des différentes spécifications existantes et des techniques utilisables en production, srcset, sizes et <picture> sortent du lot aujourd'hui. Dans cet article, nous allons tenter de mieux comprendre comment fonctionne vraiment srcset. Note : cet article a été initialement rédigé en avril 2014 par Geoffrey Crofte.

Créer plusieurs colonnes de même hauteur en HTML et CSS Présentation de l’exercice Le but de cet exercice est de parvenir à créer une page HTML contenant plusieurs colonnes dans la hauteur s'adapte automatiquement à la hauteur de la plus grande colonne. Cet exercice est plus dur qu’il n’y paraît : en effet, par défaut, chaque colonne que nous allons créer va posséder une hauteur dépendant de la hauteur de son contenu. font-style La propriété font-style permet de sélectionner une fonte italique (italic) ou (oblique) parmi celles listées par font-family. font-style: normal;font-style: italic;font-style: oblique; font-style: inherit;font-style: initial;font-style: unset; <div class="row"><ul class="cell"><li><em> normal:</em><span class="fsNormal" >Le vif zéphyr jubile sur les kumquats du clown gracieux</span></li><li><em> oblique:</em><span class="fsOblique">Le vif zéphyr jubile sur les kumquats du clown gracieux</span></li><li><em> italic:</em><span class="fsItalic" >Le vif zéphyr jubile sur les kumquats du clown gracieux</span></li></ul><div class="cell note"> The style above can vary, depending on the font you are using: <input id="fontName" value="Gill Sans"></div></div> La forme italique est généralement une forme cursive qui utilise moins d'espace horizontal que les autres formes classiques. La forme oblique quant à elle est simplement une version penchée de la forme normale. SyntaxeEdit

Animation css3 : Cartes Introduction Voici une application des styles css3 utilisant la transformation et la transition pour donner un effet d'affichage de plusieurs images sur le passage de la souris. Mise en place La partie html est succincte, la logique étant située au niveau des styles CSS : Les sélecteurs 5.1 La reconnaissance d'un motif En CSS, des règles de reconnaissance de motifs déterminent les règles de style qui s'appliquent aux éléments de l'arbre du document. Ces motifs, nommés sélecteurs, sont variés, allant du simple nom d'un élément jusqu'aux riches motifs contextuels. Quand toutes les conditions d'un motif sont vérifiées pour un élément donné, celui-ci est retenu