Archive

Archives pour la catégorie ‘HTML & CSS’

Créer une galerie animée d’images en HTML et CSS3

03/05/2011 Comments off

Ce tutoriel reprend des choses déjà vues comme l’utilisation de listes ul pour disposer une suite d’éléments et les transitions CSS3 par exemple, mais aborde aussi de nouveaux concepts comme le fameux clear ou l’opacité d’image.

Au final, nous allons créer ensemble une galerie d’images. Chaque image est cliquable et animée lorsque l’utilisateur la survole : un titre coulisse par-dessus en venant de la gauche et l’image devient plus claire. Voici une image du rendu final. Aussi à partir de maintenant, je vais joindre un fichier ZIP avec les ressources du projet final. Comme ça vous pourrez visualiser le rendu final.

Le titre coulisse sur l'image au survol de la souris et l'image devient plus nette.

Ressources du tutoriel : [download id= »9″]

Attaquons l’HTML. Ici on a simplement un titre en h1 et une liste ul. Chacun des éléments li contient une image et un span avec le titre. Ce qui donne :


Bien passons au CSS qui va transformer tout ça en une belle galerie.

Commençons par un petit reset des familles qui enlève toute marge et padding de l’élément ul et toute bordure à nos images :

ul#incoming_movies {
	margin: 0;
	padding: 0;
}

#incoming_movies img {
	border: 0;
}

Ensuite, stylons nos éléments li en enlevant le rond noir de base (list-style-type: none) et les alignant de manière flottante à partir de la gauche (float:left), en les espaçant de 5px à droite (margin-right) et en bas (margin-bottom) :

#incoming_movies li {
	list-style-type: none;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;
}

On en profite dès maintenant pour styler l’écriture du titre en utilisant l’élément a. Je n’explique rien ici, ça parle de soi-même :

#incoming_movies li a {
	color: black;
	font-family: Arial, serif;
	text-decoration: none;
	font-size: 12px;
	font-weight: bold;
}

Passons maintenant au comportement de notre span qui contient notre titre. Celui-ci doit coulisser en apparaissant du bord gauche de l’image. Pour ce faire, on va positionner le span de façon absolue (position: absolute) par rapport à l’élément li qui va donc avoir une position fixée (position: relative). Puis, on va positionner le span à 10 px au-dessus du bord inférieur du li (bottom: 10px). Pour rendre l’effet d’apparition, on décale sur la gauche le span de la largeur de l’image (left: -120px). Ainsi, le titre va sembler flotter en dehors de l’image. Pour le cacher lorsqu’il est en dehors du cadre du li, il suffit d’ajouter à ce dernier la directive overflow:hidden. Ainsi, tout ce qui dépasse sera caché. Ensuite, pour finir avec l’apparition du titre, nous allons faire que lors du survol du li par la souris, le span va venir se replacer à sa position horizontale initiale (left:0px). On rajoutera une belle petite transition CSS3 sur la propriété left avec la fonction de timing ease-in-out pour avoir l’effet inverse aussi. Bien entendu, on va styler un peu notre span en lui donnant du blanc en couleur d’arrière-plan, l’aérer avec un peu de padding et lui ajouter une ombre portée (box-shadow) et des les bords de droite arrondis de 3px (border-radius). Donc tout ça nous donne le code CSS suivant :

#incoming_movies li {
	list-style-type: none;
	float: left;
	margin-right: 5px;
	margin-bottom: 5px;

	position: relative;
	overflow: hidden;
}
#incoming_movies li span {
	position: absolute;
	bottom: 10px;
	left: -120px;
	
	background-color: white;
	padding: 4px 10px 4px 2px;

	-webkit-box-shadow: 2px 2px 2px #333333;
	-moz-box-shadow: 2px 2px 2px #333333;
	-o-box-shadow: 2px 2px 2px #333333;
	box-shadow: 2px 2px 2px #333333;
	
	-webkit-border-radius: 0 3px 3px 0;
	-moz-border-radius: 0 3px 3px 0;
	-o-border-radius: 0 3px 3px 0;
	border-radius: 0 3px 3px 0;
	
	-webkit-transition: left 0.2s ease-in-out;
	-moz-transition: left 0.2s ease-in-out;
	-o-transition: left 0.2s ease-in-out;
	transition: left 0.2s ease-in-out;
}
#incoming_movies li:hover span {
	left: 0px;
}

A ce stade, vous devriez avoir cela :

Cliquer pour agrandir

On remarque deux choses :

  • Un titre est trop long et dépasse de son décalage. Pour régler ceci, on va limiter la largeur maximum de nos span (max-width)
  • Toutes les images sont sur la ligne. On aimerait qu’il n’y ait sur chaque ligne que 4 images. Pour ce faire, on pourrait limiter la largeur du ul et les éléments iraient à la ligne automatiquement par le float mais ça n’est pas flexible. Ce que je veux ici c’est avoir 4 images par ligne et c’est tout. Pour ce faire, on va utiliser la nouvelle pseudo-classe CSS3 :nth-child(..) qui permet de définir des comportement en fonction de la place de l’élément. La formule entre parenthèse peut être très variée. Pour notre exemple ici, on veut ajouter un clear:left tous les 5 éléments. On va donc mettre :nth-child(5n). Magique non ? Et surtout tellement plus simple que l’ancienne façon de faire.
#incoming_movies li span {
	[...]
	max-width: 100px;
}

#incoming_movies li:nth-child(5n) {
	clear:left;
}

Revenons sur ce retour à la ligne. J’ai dit plus haut pour provoquer le retour à la ligne, j’utilise la directive CSS clear:left. Comment cela marche-t-il ? Le clear:left appliqué à un élément flottant signifie « je ne permets pas à cet élément d’avoir des éléments flottants sur sa gauche. » Du coup, le navigateur va provoquer un retour à la ligne puisque tous mes li sont flottants via la directive float:left. Le clear peut prendre les valeurs left (comme ici), right (si mes éléments étaient flottants à droite par exemple) ou encore both pour droite et gauche.

A présent, on a terminé ! J’ai personnellement rajouté un petit effet d’opacité pour mettre en valeur l’image survolée. Par défaut, je fixe l’opacité des images à 0.7 (opacity: 0.7) et au survol (pseudo-class :hover), je passe à 1.

#incoming_movies img {
	border: 0;
	
	opacity: .7;
	
	-webkit-transition: opacity 0.3s ease-in-out;
	-moz-transition: opacity 0.3s ease-in-out;
	-o-transition: opacity 0.3s ease-in-out;
	transition: opacity 0.3s ease-in-out;
}

#incoming_movies img:hover {
	opacity: 1;
}

Vous pouvez télécharger les fichiers de ce tutoriel ici :
[download id= »9″]

Categories: HTML & CSS Tags:

Créer un design d’article de blog avec une date flottante en HTML et CSS

27/04/2011 Comments off

Aujourd’hui, nous allons s’atteler au design d’un élément particulier d’un blog : le billet. Je vous propose de reproduire pas-à-pas le design ci-dessous. Jolie, hein ? Ca vous tente ? C’est parti !

Comme d’habitude on va commencer par le code HTML, que l’on habillera après à coup de CSS. Pour l’HTML on va choisir une structure très simple en se concentrant sur l’article, un titre mis en valeur et surtout une date qui flottera à gauche du titre. On va donc retrouver les différents éléments dans le template HTML suivant :

What a title!

27 Apr

Lorem ipsum dolor sit amet, consectetur adipiscing elit. [...] Vivamus faucibus eleifend lorem in adipiscing.

J’ai choisi pour changer un petit peu de mettre le bloc « date » dans un tag p ce coup-ci. Une div aurait très bien pu faire l’affaire. Le texte a été généré sur lipsum.com, très pratique. Nous en avons fini avec l’HTML. Venons-en maintenant au CSS.

On va commencer par définit la police par défaut pour toute notre page en une ligne (font: 14px/1.5 Cambria,serif;) J’ai choisi une combinaison avec serif de base. C’est important de faire attention aux combinaisons de police de caractère dans vos design. Pour bien commencer, jetez donc un oeil à cette page que le W3C lui consacré. La directive font permet de déclarer pas mal de choses sur une seule ligne CSS. Elle configure dans l’ordre les directives « font-style font-variant font-weight font-size/line-height font-family ». J’ai donc mis ici les 3 dernières directives. size,line-height et family. Voilà pour le chapitre sur font.

Ensuite, nous allons dimensionné et placer notre contenant principal main. On lui donne 620px de largeur, le centre au milieu de la page et lui donne 10px de marge en haut et en bas (margin: 10px auto). C’est le auto sur les marges gauche et droite qui va centrer l’élément. C’est la meilleure façon de faire pour centrer un élément en CSS. Cela nous donne donc le code CSS suivant :

body {
	font: 14px/1.5 Cambria,serif;
}
#main {
	width: 620px;
	margin: 10px auto;
}

Maintenant, stylons l’article lui-même. Sachant que je vais vouloir positionner mon bloc de date en positionnement absolu (position:absolute) par rapport à article, je vais commencer par fixer la position de l’article en mettant la directive position:relative. Ainsi, les coordonnées des éléments enfants placés en coordonnées absolue seront relative à article. Compris ? Non ? Par exemple, je vais vouloir décaler de 40 pixels sur la gauche mon bloc date. Pour ce faire je vais lui donner la directive left:-40px. Oui mais 40 pixels par rapport à où ? Le navigateur va alors remonter dans le flux d’élément à la recherche du premier élément à positionnement fixe. Il trouvera article ! Voilà pour le chapitre de positionnement.

On va bien aérer notre billet avec de belles marges et de bons espacements un peu partout (margin & padding). On donne la couleur blanche en arrière plan (background-color: white). On dessine une bordure grise de 5px de large tout autour (border: 5px solid #EFEFEF) et on ajoute enfin une ombre portée en utilisant la notation CSS3 standardisée box-shadow. Cela nous donne donc :

article {
	position: relative;
	margin: 0 0 60px 0;
	padding: 50px 55px;
	background-color: white;
	border: 5px solid #EFEFEF;
	box-shadow: 2px 2px 2px #B7B7B7;
	-webkit-box-shadow: 2px 2px 2px #B7B7B7;
	-moz-box-shadow: 2px 2px 2px #B7B7B7;
	-o-box-shadow: 2px 2px 2px #B7B7B7;
}

Pour le titre de notre billet, on va l’aérer aussi, lui donner une couleur noire et l’écrire en grand italique et en Georgia qui s’accorde à merveille avec Cambria, en reprenant la notation font explicitée plus haut. On va de plus ajouter une ligne horizontale grise placée 25px au-dessous. Ici il faut comprendre la différence entre padding qui est à l’intérieur de l’élément et margin qui est à l’extérieur de l’élément. Cette différence tend enfin à s’harmoniser avec les dernières versions des différents navigateurs.

article .title {
	margin: 0 0 30px 0;
	padding: 0 0 25px 0;
	border-bottom: 1px solid #E7E7E7;
	font: italic 32px/1.5 Georgia, serif;
}
article .title a {
	color: black;
	text-decoration: none;
}

On y presque ! Il ne nous reste plus qu’à styler le bloc de date. A ce stade, vous devriez obtenir ce qui suit :

Alors pour la date, on va utiliser une belle image d’arrière-plan de notre p avec des couleurs s’accordant avec le reste de notre thème. Il ne nous restera plus qu’à positionner, dimensionner et écrire le jour et le mois de façon harmonieuse.

Commençons par le p qui définit tout le bloc « date ». On a vu plus haut que nous allons le positionner avec des coordonnées absolue par rapport à article (position: absolute). Ce qui nous permet donc d’utiliser les directives top et left à notre guise. Tâchons de placer notre bloc « date » au même niveau vertical que notre titre et au même niveau horizontal que la bordure de l’article. (top: 30px et left:-40px). On dimensionne notre bloc de façon à voir toute notre image (width et height:74px). Ensuite, on décale le contenu de 11px pour centrer verticalement le jour de la date (padding-top: 11px), on centre le texte horizontalement (text-align:center), on configure la couleur blanche du texte et on ajoute un petit effet d’ombre sur le texte (text-shadow: #4B7E83 1px 1px 0). Ce qui donne :

article .date {
	position: absolute;
	top: 30px;
	left: -40px;
	
	width: 74px;
	height: 74px;

	padding-top: 11px;
	text-align: center;
	color: white;
	text-shadow: #4B7E83 1px 1px 0;

	background: url(date.png) no-repeat left top;
}

On a quasi terminé. Il ne nous reste plus qu’à styler les deux textes pour le jour et le mois comme on le veut. Une chose importante à faire est de forcer un retour à la ligne après chaque élément en forçant les span à se comporter comme des éléments block (display:block) puisque de base ce sont des éléments inline. On ajoute de belles ombres pour donner ce petit effet web3.0 que l’on voit partout (text-shadow: black 0 1px 0). Voici donc les derniers morceaux de code CSS à ajouter :

article .date .day {
	display: block;
	font: italic 29px/32px Cambria, serif;
	text-shadow: black 0 1px 0;
}
article .date .month {
	display: block;
	font-size: 12px;
	text-transform: uppercase;
	font-weight: bold;
	text-shadow: black 0 1px 0;
}
Categories: HTML & CSS Tags:

Créer un compteur de commentaires pour votre blog en HTML et CSS

27/04/2011 Comments off

Dans ce tutoriel, nous allons créer un élément qui permet d’afficher le nombre de commentaires d’un billet sur un blog et de permettre à l’utilisateur d’aller à ses commentaires en cliquant dessus. Cet élément a une image de bulle en arrière plan et le texte centré. Le tout étant poussé tout en haut à droite du bloc de texte avec une marge de 10px à gauche. Voilà ce que ça donne :

Alors, côté HTML rien de bien compliqué. J’ai généré le fameux texte avec le site lipsum.com et je l’ai ajouté à un tag HTML 5 article. Ce qui nous donne ceci :

16

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque vitae dolor eget orci vestibulum placerat. [...] Nunc interdum suscipit vestibulum.

Donc on note la div avec la classe post-comments. C’est elle que nous allons styler pour obtenir le résultat de l’image plus haut. Allons-y.

Pour commencer, on va styler vite fait le tag article en fixant sa largeur et justifiant le texte :

article {
	width: 300px;
	
	font-family: Arial, Helvetica, serif;
	font-size: 11px;
	text-align: justify;
}

Ensuite, on va positionner notre bloc commentaires à droite (float:right) en laissant un padding de 10 pixels tout autour de lui (padding: 10px). Enfin on va aligner le texte qu’il contient au milieu de façon à centrer le numéro (text-align:center).

.post-comments {
	float: right;
	margin: 10px;
	font-size: 15px;
	text-align: center;
}

On pourra améliorer le placement en réduisant les margins par un simple margin-left: 10px;. Ainsi, la bulle sera parfaitement alignée avec les bords de la boite entière.

Puis, on va mettre notre image (ci-contre) en arrière-plan en la centrant (50% 50% pour les x et y de positionnement). On doit redimensionner le bloc commentaires de la taille de notre image soit 48px sur 48px. Enfin, on va centrer le texte verticalement. Pour ce faire, on pourrait jouer avec les padding du a mais sachant qu’on n’a qu’une ligne d’affichée, je vais jouer avec la hauteur de la ligne (line-height: 40px) en prenant en compte le padding naturel de la police de caractère. On complète donc le tag ajouté précédemment ainsi :

.post-comments {
	float: right;
	padding: 10px;
	
	width: 48px;
	height: 48px;
	
	background: url("comments-icon.png") no-repeat 50% 50%;
	
	line-height: 40px;
	font-size: 15px;
	
	text-align: center;
}

On finit en fignolant l’aspect de notre texte à l’intérieur du bloc en lui donnant une couleur et en n’affichant le souligné seulement au survol. On ajoute donc :

.post-comments a {
	color: #6E2D3D;
	text-decoration: none;
}
.post-comments a:hover {
	text-decoration: underline;
}

Et voilà !

Categories: HTML & CSS Tags:

Créer une navigation de site simple et élégante avec HTML5 et CSS3

26/04/2011 Comments off

Nous allons nous inspirer du célèbre site Mashable pour créer notre barre de navigation. Le site de Mashable est une référence dans le monde pour les sujets liés au Web et à ses grands acteurs. Aussi, il est normal qu’il soit pris en modèle par les intégrateurs web du monde entier. Et le code de celui-ci est très propre et lisible. Aussi, je vous propose de reproduire la navigation comme ci-dessous pas-à-pas en expliquant comme d’habitude le pourquoi et le comment.

Cliquer pour agrandir la navigation de Mashable

Voyons de plus près comme elle marche. Les boutons de la barre de navigation ont deux états : le premier est celui non sélectionné ni survolé et le second donc change la couleur d’arrière plan du bouton et ajoute une bordure supérieure de couleur qui varie en fonction de la catégorie choisie. Notez que le dernier élement est un peu en retrait (poussé sur la droite) et de couleur de texte différente.Un point important est que le site de Mashable utilise les tags header et nav définit dans HTML5 (qu’on appelle maintenant HTML vu que c’est un standard vivant non versionné). Rien d’autre à savoir pour le moment. On est déduit donc le code HTML suivant :

Comme d’habitude, tout se passe principalement dans la feuille CSS. Aussi, penchons-nous dessus. Première étape, on va faire ce qu’on appelle un reset, c’est-à-dire forcer des valeurs à s’initialiser pour tout un tas de tags HTML génériques. C’est une chose très répandue pour réduire les différences entre les browsers. Certains sites intègrent d’ailleurs une feuille de style reset.css dès le début. Nous, on va simplifier notre reset au minimum de ce que l’on va utiliser :

html, body, div, a, ul, li, header, nav {
	margin: 0;
	padding: 0;
}

Voilà. On enlève toute marge et tout padding vu qu’IE les gère différemment que Firefox par exemple. Ensuite nous allons styler notre tag header. On y définit tout d’abord le style de texte par défaut à appliquer. Une chose à faire lorsqu’on ne style pas de texte d’article est de mettre la taille de la ligne égale à la taille de la font avec la directive line-height:1. Cela permet de faciliter le placement des textes sans prendre en compte les marges intrinsèques de la police de caractères. Puis on va donner une hauteur, une couleur d’arrière plan et une bordure inférieure dans un bleu un brin plus foncé. Voilà ce que cela donne :

header {
	line-height: 1;
	font-size: 13px;
	font-family: Arial, Helvetica, sans-serif; 
	height: 10px;
	background: #E3EDF4;
	border-bottom: 1px solid #C9DBEC;
}

Ensuite nous allons styler la barre de navigation elle-même et la liste qu’elle contient. Pour ce faire, on va styler les tags nav et ul. Le nav est centré et un peu plus grand que la liste qu’il contient. Tout le texte qu’il contient est automatique en majuscule (text-transform: uppercase) et sera décalé vers le bas d’autant de pixels que la hauteur du header pour donner cet effet « tombant » (padding-top: 10px). Le ul, quant à lui, a une hauteur fixe égale à la hauteur desboutons qu’il contient pour pouvoir mettre une couleur d’arrière-plan. Il a aussi ses paddings droits et gauche égaux et des paddings haut et droit permettant d’aérer la liste. Il a ses deux coins bas arrondis de 3 pixels. les autres restants carrés. Ce qui nous donne le code CSS suivant :

nav {
	width: 972px;
	margin: 0 auto;
	font-size: 0.8em;
	text-transform: uppercase;
	padding-top: 10px;
}
nav ul {
	width: 940px;
	height: 16px;
	background: #C9DBEC;
	padding: 11px 16px 7px;

	border-radius: 0 0 3px 3px;
	-moz-border-radius: 0 0 3px 3px;
	-webkit-border-top-left-radius: 0;
	-webkit-border-bottom-left-radius: 3px;
	-webkit-border-top-right-radius: 0;
	-webkit-border-bottom-right-radius: 3px;
	border-top-left-radius: 0px 0px;
	border-bottom-left-radius: 3px 3px;
	border-top-right-radius: 0px 0px;
	border-bottom-right-radius: 3px 3px;
}

Passons maintenant aux tags li. Pour le moment, notre liste est verticale. On passe les li en ligne en les poussant tous à gauche (float:left) et on cache les points par défaut (list-style-type: none). Enfin, on espace chacun des éléments de 3 pixels (margin-right: 3px;). On obtient l’image ci-dessous en ajoutant le code CSS sous l’image :

nav ul li {
	float: left;
	list-style-type: none;
	margin-right: 3px;
}

Bon maintenant il est temps de styler les tags a de notre barre. On va enlever le souligné (text-decoration:none), donner une couleur, mettre en gras (font-weight:bold), ajouter 12px de padding en haut et en bas et 6px de passing à gauche et à droite (padding: 12px 6px). Oui ça dépasse la hauteur spécifiée pour du ul. Mais c’est voulu. Vous verrez après. Enfin on va spécialiser le comportement du dernier élément en le poussant à droite (float:right sur le last) et changeant sa couleur de texte. On ajoute donc :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
}
nav ul li.last {
	float: right;
}
nav ul li.last a {
	color: #ff8c00;
}

Il ne nous reste plus qu’à créer l’effet en mode sélectionné et survolé avec les couleurs de bordure supérieure spécifique pour chaque bouton de navigation. Pour ce faire, on va définir une bordure supérieure par défaut de 2 pixels d’épaisseur. Vu que la hauteur de nos a avec les paddings est supérieure à la hauteur du ul, la bordure va apparaitre au-dessus et donc dans le header. C’est un bel effet mais il faut donc que la couleur de bordure par défaut soit la même que la couleur d’arrière-plan du header. On pourrait forcer aussi la couleur d’arrière-plan par défaut à transparent, mais normalement c’est le cas pour tous les navigateurs. On ajoute donc la ligne suivante dans le nav ul li a qui devient :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
	border-top: 2px solid #E3EDF4;
}

On a presque fini. Il faut maintenant changer la couleur de la bordure et la couleur d’arrière-plan pour chaque élément de navigation en état sélectionné (i.e ont aussi la classe « .selected) et survolé (meta-classe :hover). En gardant les différentes couleurs originelles du site on ajoute donc le lot de directives CSS suivantes :

nav ul li.nav_home a:hover,
nav ul li.nav_home.selected a {
  border-color: #89ae67;
  background: white; }
nav ul li.nav_social-media a:hover,
nav ul li.nav_social-media.selected a {
  border-color: #079ce9;
  background: white; }
nav ul li.nav_tech a:hover,
nav ul li.nav_tech.selected a {
  border-color: #fba322;
  background: white; }
nav ul li.nav_video a:hover,
nav ul li.nav_video.selected a {
  border-color: #620f5c;
  background: white; }
nav ul li.nav_mobile a:hover,
nav ul li.nav_mobile.selected a {
  border-color: #6ac496;
  background: white; }
nav ul li.nav_dev-design a:hover,
nav ul li.nav_dev-design.selected a {
  border-color: #77aab1;
  background: white; }
nav ul li.nav_business a:hover,
nav ul li.nav_business.selected a {
  border-color: #6ebb4d;
  background: white; }
nav ul li.nav_social-good a:hover,
nav ul li.nav_social-good.selected a {
  border-color: #00c8a4;
  background: white; }
nav ul li.nav_startups a:hover,
nav ul li.nav_startups.selected a {
  border-color: #f64e2f;
  background: white; }
nav ul li.nav_media a:hover,
nav ul li.nav_media.selected a {
  border-color: #993333;
  background: white; }
nav ul li.nav_classifieds a:hover,
nav ul li.nav_classifieds.selected a {
  border-color: #ff8c00;
  background: white; }

Pour parfaire le tout, on va se servir des changements de couleur d’arrière-plan et de bordure supérieure pour ajouter une petite transition CSS3 avec les notations pour tous les navigateurs. La fonction d’easing qu’on utilise est ease-in-out pour faire l’effet progressif et inverse lorsque le curseur quittera l’élément de navigation. On complète donc le style de chaque a ce qui donne :

nav ul li a {
	color: #1E598E;
	font-weight: bold;
	text-decoration: none;
	padding: 12px 6px;
	border-top: 2px solid #E3EDF4;
	
	transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-moz-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-webkit-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
	-o-transition: background 0.1s ease-in-out, border-color 0.1s ease-in-out;
}

Et voilà ! Une magnifique barre de navigation compatible HTML 5 et CSS3. Jolie !

Categories: HTML & CSS Tags:

Réflexion d’image en HTML et CSS

26/04/2011 Comments off

Réflexion d'image en CSS

Nous allons reproduire l’effet de réflexion d’image vers le bas sans utiliser de photoshop ou de javascript, simplement du CSS. Au final, vous pourrez réaliser ce qui est illustré ci-contre et ce en une ligne.Partons de cette image de base :

Que nous allons simplement intégrer à l’HTML de notre page de manière tout à fait classique comme suit :


Puis dans notre feuille CSS, nous allons lui appliquer le style suivant qui est une combinaison d’un masque gradient sur la réflexion :

img {
	-webkit-box-reflect: below 0 -webkit-gradient(linear,0 0,0 100%,from(transparent),color-stop(.6,transparent),to(rgba(255, 255, 255, 0.3)));
}

Voilà. C’est tout. Pour modifier à votre guise l’effet, voici quelques détails sur la propriété CSS -webkit-box-reflect qui n’existe pas (encore) sur Firefox ni IE. D’où le préfixe « webkit » pour Chrome et Safari.

  • -webkit-box-reflect: <direction> <offset> <mask-box-image>
  • <direction> : above, below, left or right.
  • <offset> : longueur ou pourcentage spécifiant la distance entre la réflexion et le bord de la box originelle (selon la direction spécifiée). Optionel. Défaut: 0;
  • <mask-box-image> : c’est une mask-box-image utilisable pour recouvrir la réflexion. Si absente, la réflexion n’aura aucun masque.
  • La réflexion est mise à jour dès que les données de l’image changent. Elle est utilisable sur pas mal de choses, dont le tag <video> !! Ainsi, si vous jouez une vidéo, elle sera aussi jouée en réflexion. A essayer 😉
Categories: HTML & CSS Tags:

Créer une barre sociale dynamique grâce à CSS3 et HTML

22/04/2011 Comments off

Je vous propose dans cet article de découvrir les transitions de CSS3. Ici, on va les utiliser pour coder une barre sociale avec des images tronquées en bas. Lorsque l’utilisateur survole une image, celle-ci remonte légèrement afin d’apparaître en entière. Ici nul besoin de javascript. Seulement d’exploiter les nouvelles capacités de transition de CSS 3. Voilà ce que ça donne :

L'image remonte lorsqu'on la survole.

Comme d’habitude lorsqu’on fait du beau code web, il n’y a pas grand chose d’intéressant dans l’HTML en lui-même. Le voici donc :


Deux images dans une div, chaque image ayant un lien. Pour chez vous, je vous mets les deux images que j’ai utilisées et qui font 24px sur 24px :
 

Maintenant, abordons la partie CSS. On voit tout d’abord que l’on veut cacher la partie de nos images qui dépasse des bords de la div (overflow: hidden). Ensuite chacun des liens doit être aligné à gauche sans aucunes marges (float:left) et espacé de son voisin de 4px (margin-right: 4px). Ce qui nous donne donc le code suivant :

.social {
	overflow:hidden;
}
.social a {
	float:left;
	margin-right:4px;
}

Ensuite, on va placer les images de façon à les décaler de leur position de départ (position:relative) de 7 pixels vers le bas (top:7px). On va ensuite dire que lorsqu’elles sont survolées (pseudo-classe hover), on annule ce décalage vers le bas (top: 0). On ajoute donc à la partie CSS ce qui suit :

.social a img {
	position:relative;
	top:7px;
}
.social a:hover img {
	top: 0px;
}

Il ne nous reste plus qu’à ajouter notre transition CSS3. On va choisir la transition « ease-in-out » pour avoir un décalage progressif et aussi l’effet inverse losqu’on arrête de survoler l’image. Ensuite, on va l’appliquer lorsque la propriété ‘top‘ change, évidemment vu que c’est cette propriété que nous modifions dans la partie hover. Enfin, on va dire que cette transition doit être assez rapide, soit 0,2 secondes.

Un point particulier sur les transitions. Elles ne sont pas encore standardisées dans tous les moteurs web et du coup, ceux qui les supportent ont besoin d’ajouter un préfixe. Plus tard, quand tout les browsers implémenteront convenablement les normes, on pourra simplement utiliser les propriétés CSS dépourvues de tout préfixe. On ajoute donc le code suivant aux liens social :

.social a img {
	position:relative; /* Allow 'top' to be used */
	top:7px;
	
	/* Webkit (Chrome, Safari) */
	-webkit-transition-property: top;
	-webkit-transition-duration: 0.2s;
	-webkit-transition-timing-function: ease-in-out;

	/* Firefox */
	-moz-transition-property: top;
	-moz-transition-duration: 0.2s;
	-moz-transition-timing-function: ease-in-out;

	/* Incoming Standard */
	transition-property: top;
	transition-duration: 0.2s;
	transition-timing-function: ease-in-out;
}

Et voilà. Pour voir les différents fonctions de timing de transition disponibles, il suffit d’aller voir la norme elle-même.

Categories: HTML & CSS Tags:

Créer une jauge verticale dynamique en HTML et CSS

22/04/2011 Comments off

Ce que nous allons reproduire ici est visible sur le site put.io pour indiquer le taux d’utilisation de l’espace disque et de la bande passante alloués à l’utilisateur connecté. Voyez plutôt :

Le code est très simple et permet de changer interactivement le niveau de la jauge en PHP ou javascript.
En effet, voyons le code HTML en lui-même pour la jauge de gauche :


Available Storage
6G
Total: 10G

Trois div dans une div. Rien de bien remarquable. Si ce n’est le style CSS inline qui décale verticalement l’image d’arrière plan de la jauge de 40%. Evidemment ce 40% est le rapport de 6G utilisés sur 10G disponibles. Donc le code PHP qui génère la page ou du code JS mettant à jour à la volée à juste à changer cette valeur. Le reste est statique et se passe dans la CSS.

Passons donc à la CSS. On va commencer par styler les 3 champs de textes. Tous sont en Arial (font-family:Arial sur le body). On va aussi faire en sorte que la hauteur de la ligne de base soit exactement égale à une fois celle de la police de caractère courante (line-height:1;). Cela va du coup enlever tout padding naturel du texte et ainsi faciliter son positionnement du texte.

Enfin, on met les couleurs des différents textes qu’on va centrer dans la jauge (text-align:center) et positionner en jouant sur les différents padding top et bottom : body { font-family: Arial; line-height: 1; /* line height == current font size */ } #jauge { text-align: center; } .legend { font-size: 9px; padding-top: 10px; padding-bottom: 10px; } .free-storage { font-size: 40px; font-weight: bold; } .total { color: #AEAEAE; font-size: 11px; padding-top: 10px; padding-bottom: 10px; }

Le tile du haut est transparent

Il ne nous reste plus qu’à place notre image d’arrière plan adéquate à la div jauge.

Notre image bidon.jpg contient tout son haut de transparent et son bas jaune. Cette tile a deux états de 110px de hauteur et 105px de largeur. Du coup, notre jauge elle-même devra faire 105px de large sur 110px de haut. Par défaut, on va placer l’image d’arrière-plan en x=0 et y=0 pour que la jauge paraisse vide.

Enfin, on rajoute un peu de code pour arrondir les angles de 10px. Et le tour est joué :

#jauge {
	width: 105px;
	height: 110px;
	background: #F0F0F0 url('images/bidon.png') no-repeat 0 0;
	
	text-align: center;
	
	border-radius: 10px;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
}

Et voilà, vous obtenez la jauge de gauche vue au début de cet article.

Categories: HTML & CSS Tags:

Ajouter une barre de sélection de langue en haut de votre site en HTML et CSS

22/04/2011 Comments off

Je vous propose de reproduire simplement la barre de choix de langue du site Fubiz, modèle d’élégance du design web français tant dans le code que dans le rendu.
Voici ce que l’on va reproduire :

Barre de choix de langue de Fubiz

Comme quasiment toute liste de ce genre en HTML, la structure est une base ul stylée en CSS placée juste après votre tag body:


Ce qui est à noter ici et à prendre comme best practice, c’est la présence du span avec les lettres « EN » et « FR ». En effet, ce span est destiné à être caché en CSS. Alors pourquoi le mettre ? Tout simplement pour l’accessibilité aux screen-readers pour les malvoyants. Un très bon point pour les devs web de chez Fubiz. Donc à ce niveau, on a fini avec l’HTML et on a aucun CSS. Du coup, c’est moche mais lisible et accessible :

HTML seul

Maintenant, construisons notre CSS au fur et à mesure. Tout d’abord, stylons le body, la div topsite comme il faut en ajoutant le code dans une feuille CSS liée ou dans le style du header :

body {
	margin: 0;
	padding: 0;
	text-align: center;
	background-color: black;
}
#topsite {
	height: 153px;
	border-top: 3px solid #D2344F;
	background-color: black;
}

Puis, positionnons le ul lang . La liste doit avoir 900 pixels de large, être centrée dans le body (margin:auto) et ses éléments poussés à droite (float:right sur les li) et espacés de 2 pixels (margin-right:2px) :

#lang {
	width: 900px;
	margin: auto;
}
#lang li {
	float: right;
	margin: 0 2px 0 0;
}

Enfin, on va cacher le texte des li et les remplacer par des images en arrière-plan. Ces images sont ce qu’on appelle des tiles : chaque image contient les images de tous ses états. On passera d’un état à un autre en décalant le x ou le y (ici le y) et en fixant la largeur et la hauteur de l’élément décoré. D’abord voici les images dont chaque état fait 35 px de largeur et 16 px de hauteur :

 

L’état par défaut est au-dessus et l’état sélectionné ou survolé est en dessous. On va maintenant cacher le texte (display:none sur le span) et appliquer la bonne image en background du a avec la class correspondante :

#lang li span {
	display: none;
}
#lang li a.langFR {
	width: 35px;
	height: 16px;
	background: url(images/header_btn-fr.jpg) no-repeat 0 0;
	display: block;
}
#lang li a.langEN {
	width: 35px;
	height: 16px;
	background: url(images/header_btn-en.jpg) no-repeat 0 0;
	display: block;
}

A noter le display:block pour forcer l’affichage du a même sans contenu mesurable.
Il ne nous reste plus qu’à décaler verticalement de 16px en CSS le background de nos a lorsque ceux-ci sont survolés (pseudo-classe hover) ou sélectionné (class: current) :

#lang li a:hover, #lang li a.current {
	background-position: 0 -16px;
}
Categories: HTML & CSS Tags:

Faire précéder un texte par une image en HTML et CSS

21/04/2011 Comments off

Le but ici est de reproduire ce qu’illustre l’image ci-dessous en HTML et CSS. Il s’agit de texte précédé d’une icône.

HTML

17 Janvier 1982

CSS

.birthday{
  background: url(img/birthday.png) no-repeat left center;
  padding-left: 25px;
  font-weight: normal;
  font-size: 9pt;
  color: #444444;
}
Categories: HTML & CSS Tags: