Toujours plus fort grâce aux propriétés CSS3

1. border-radius

On commence soft avec l'une des propriétés CSS3 ls plus connues : border-radius. Avant son arrivée, tous les web designer étaient plus ou moins terrifiés à l'idée que leur mise en page puisse être présentée différemment d'un navigateur à l'autre. Cette propriété, qui permet d'arrondir les angles, était le meilleur moyen de les convaincre !

Voici deux types d'utilisation possibles avec cette propriété. Vous noterez que la première est exprimée en pixel et que la seconde est en pourcentage.

1.1 Coins arrondis

<div class="box-rounded">
				<p>Un carré arrondi</p>
			</div>

.box-rounded {
				border-radius: 6px;
				background: blue;
				width: 200px;
				height: 200px;
				line-height: 50px;
				text-align: center;
				margin: auto;
				color: white;
				font-size: 1.4rem;
				margin: auto;
			}

1.1 Cercles

Si vous lisez déjà ce blog, vous savez déjà qu'il est possible de créer des cercles grâce à cette propriété. Tout ce qu'il faut faire est de définir le rayon de la moitié de la largeur ou de la hauteur de l'élément : border-radius: 50%.

Et si nous voulons nous amuser un peu, nous pouvons également en profiter pour ajouter une pincée de Flexbox pour centrer le texte verticalement et horizontalement dans le cercle. Cela nécessite juste un peu de code supplémentaire mais rien de très compliqué.

<div class="circle">
				<p>Hello Cercle!</p>
			</div>

.circle-blue{
				background: blue;
				width: 200px;
				height: 200px;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				color: white;
				font-size: 2rem;
				font-weight: 600;
				margin: auto;
			}

2. box-shadow

Ensuite, nous avons l'intéressante box-shadow qui nous permet de donner immédiatement de la profondeur à nos éléments. Attention, ne soyez pas trop gourmand.es avec les valeurs que vous définissez!

Exemple de syntaxe :

box-shadow: 1px 1px 3px #292929;

La propriété box-shadow accepte principalement ces quatre paramètres (il en existe d'autres mais n'allons pas trop loin et pas trop vite) :

• x offset

• y offset

• le rayon du flou

• la couleur de l'ombre

Maintenant, ce que peu de personne savent, c'est qu'il est possible de mobiliser plusieurs box-shadows en même temps. Et cela peut permettre d'obtenir des effets vraiment intéressants. Par exemple, nous pouvons utiliser des ombres bleues et vertes en même temps comme ceci :

<div class="box"></div>

.box-shadow-vert-bleu {
				box-shadow: 1px 1px 3px green, -1px -1px 3px blue;
				width: 200px;
				height: 200px;
				margin: auto;
				display: inline-block;
			}

2.1 Ombres amusantes

Si en plus l'on applique les pseudo-classes ::before et ::after à nos ombres, cela peut nous ouvrir des perspectives graphiques assez étonnantes. On peut commencer par essayer celle-ci :10 propriétés CSS3 à connaitre

HTML

<div class="box-shadow-image">
				<img src="/images/logo-200.png"
				alt="Logo web-eau.net" />
			</div>

CSS

.box-shadow-image {
				position: relative;
				box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.5);
				padding: 10px;
				background: white;
				margin-top: 50px;
				}
				.box-shadow-image img {
				width: 100%;
				border: 1px solid #8a4419;
				border-style: inset;
				}
				.box-shadow-image:after {
				content: "";
				position: absolute;
				z-index: -1; /* Cacher l'ombre derrière l'image */
				box-shadow: 0 15px 20px rgba(0, 0, 0, 0.3);
				width: 70%;
				left: 15%; /* La moitié des 30% restants */
				height: 100px;
				bottom: 0;
			}

Résultat

3. text-shadow

Toujours bon à savoir (et à garder en mémoire), il est également possible d'appliquer la propriété box-shadow à n'importe quel texte, et ce, avec les quatre mêmes paramètres :

• x offset

• y offset

• le rayon du flou

• la couleur de l'ombre

3.1 Contours de texte

Encore une fois, tout comme sa soeur box-shadow, nous pouvons appliquer plusieurs ombres en utilisant une virgule comme séparateur. Par exemple, nous voulons créer un effet de contour sur un texte. Bien que webkit nous offre cette possibilité avec stroke, nous aurons un plus grande compatibilité avec les navigateurs en utilisant la méthode suivante (mais qui n'est pas aussi élégante) :

<div class="container-a">
				<h3>Hello World</h3>
				</div>
				
				<div class="container-b">
				<h3>Hello World</h3>
			</div>

div.container-a {
				background: #666;
				padding: 20px;
				}
				div.container-a h3 {
				text-shadow: 0 1px 0 #FFF;
				color: #292929;
				font-size: 4rem;
				text-transform: uppercase;
				text-align: center;
				}
				div.container-b {
				padding: 20px;
				}
				div.container-b h3 {
				text-shadow: 0 1px 0 blue, 0 -1px 0 blue, 1px 0 0 blue, -1px 0 0 blue;
				color: #000;
				font-size: 4rem;
				text-transform: uppercase;
				text-align: center;
			}

4. text-stroke 10 propriétés CSS3 à connaitre

On vient d'en parler dans le paragraphe précédent mais faites attention avec cette propriété car elle est non standard. La propriété text-stroke ne fait encore partie des specs CSS3. Cependant, elle est supportée par la plupart des navigateurs si vous utilisez le préfixe -webkit-

<div class="container-c">
				<h3>Hello World</h1>  
			</div>

div.container-c {
				padding: 20px;
				}
				div.container-c h3 {
				-webkit-text-stroke: 3px blue;
				color: #000;
				font-size: 4rem;
				text-transform: uppercase;
				text-align: center;
			}

La détection des fonctionnalités

Est-il possible de fournir automatiquement un ensemble de styles CSS pour, par exemple, Firefox, et un autre pour Chrome ou Brave? Pour cela, il existe une solution qui consiste à utiliser la détection des fonctionnalités.

Concrétement, on utilise une formule en JavaScript pour tester si une propriété est acceptée par le navigateur. Si ce n'est pas le cas, on utilise une solution de secours. Reprenons notre exemple de compatibilité de la propriété text-stroke. On va préparer une solution de rechange pour la couleur blue pour les navigateurs qui ne supporteraient pas cette propriété sans recourir à webkit.

var h1 = document.createElement('h1');
		if ( !( 'webkitTextStroke' in h1.style ) ) {
		var heading = document.getElementsByTagName('h1')[0];
		heading.style.color = 'black';
	}

Explications
Tout d'abord, on créé une fausse balise h1. Ensuite, on effectue une recherche complète pour déterminer si la propriété -webkit-text-stroke est disponible pour cet élément, via l'attribut style. Si la réponse est NON, on change la couleur du titre Hello World en la passant de blue à black.

Attention, je suis resté très générique dans cet exemple. Si vous avez besoin de remplacer plusieurs en-têtes h1 sur votre page, vous aurez besoin d'utiliser while pour filtrer chaque en-tête et mettre à jour le style ou le nom de la classe en conséquence.

Si vous avez besoin d'une solution de détection des fonctionnalités plus complète, je vous conseille de regarder du côté de Modernizr.

5. Plusieurs arrière-plans

La propriété background a été modifiée pour permettre d'avoir plusieurs arrière-plans dans CSS3.

Prenons un exemple, juste pour comprendre comment fonctionne ce concept. Voici comment écrire votre classe CSS pour afficher deux images en arrière-plan :

.nom-de-ma-classe-css {
		background: url(chemin/vers/mon/image.jpg) 0 0 no-repeat, url(chemin/vers/mon/image-2.jpg) 100% 0 no-repeat;
	}

Vous noterez l'utilisation de la virgule comme séparateur. Vous remarquerez aussi que la première image sera affichée en haut à gauche (0 0) et que la seconde sera placée en haut à gauche (100% 0).

Pensez à toujours prévoir une solution de secours pour les navigateurs qui ne prendraient pas en charge l'affichage de plusieurs arrière-plans. En effet, ceux-ci ignoreront purement et simplement toute la propriété, laissant ainsi votre arrière-plan vide.

Comment gérer les anciens navigateurs ?

Pour ajouter une seule image d'arrière-plan pour les navigateurs plus anciens (type IE7, par exemple), il faut déclarer la propriété background deux fois: d'abord pour les anciens navigateurs et ensuite, la solution de remplacement pour les navigateurs "normaux". A défaut, vous pouvez également vous tourner vers Modernizr.

.nom-de-ma-classe-css {
		/* anciens navigateurs */
		background: url(chemin/vers/mon/image.jpg) no-repeat;
		
		/* navigateurs modernes */
		background: url(chemin/vers/mon/image.jpg) 0 0 no-repeat, url(chemin/vers/mon/image-2.jpg) 100% 0 no-repeat;
	}

6. background-size

Avant l'arrivée du CSS "moderne", il fallait utiliser des techniques sournoises pour avoir des images d'arrière-plan redimensionnables (on ne parle pas encore de responsive !). Cela pouvait ressembler à ce type de code :

background: url(chemin/vers/mon/image.jpg) no-repeat;
	background-size: 100% 100%;

Le code ci-dessus obligera l'image d'arrière-plan d'occuper tout l'espace disponible. Certes, le job est fait mais ça va commencer à se compliquer si nous voulons qu'une image particulière occupe tout l'arrière-plan du body, quelle que soit la largeur de la fenêtre du navigateur. Dans ce cas, on va devoir utiliser ce type de code :

body, html { height: 100%; }
		body {
		background: url(chemin/vers/mon/image.jpg) no-repeat;
		background-size: 100% 100%;
	}

Et c'est tout puisque la propriété background-size accepte respectivement les deux paramètres x et y.

Même si les dernières versions de Chromium (et ses forks) et de Safari prennent en charge la propriété background-size de manière native, il ne faut pas oublier d'utiliser des préfixes vendor pour les navigateurs moins modernes.

<div class="container-d"></div>
				
			<div class="container-e"></div>

div.container-d {
				/* navigateurs modernes */
				background: url(images/gamine.jpg)
				0 0 no-repeat, 
				url(images/allroad.jpg)
				100% 0 no-repeat;
				width: 400px;
				height: 200px;
				margin: 20px auto;
				}
				div.container-e {
				background: url(images/cap-chevre.jpg) no-repeat;
				background-size: 100% 100%;
				width: 400px;
				height: 200px;
				margin: 20px auto;
			} 

7. text-overflow 10 propriétés CSS3 à connaitre

Initialement développée par et pour le navigateur Internet Explorer, La propriété text-overflow accepte deux valeurs possibles :

• clip

• ellipsis

Cette propriété peut être utilisée pour masquer l'excédent de texte qui dépasserait de son conteneur.

.nom-de-ma-classe-css {
		text-overflow:ellipsis;
		overflow:hidden;
		white-space:nowrap;
		border: 1px solid black;
		width: 400px;
		padding: 20px;
		cursor: pointer;
	}

Ensuite, il est tout à fait possible d'afficher l'intégralité du texte lorsqu'un utilisateur survole la boîte avec sa souris.

.nom-de-ma-classe-css:hover {
		white-space: normal;
		color: rgba(0,0,0,1);
		background: #e3e3e3;
		border: 1px solid #666;
	}

<div id="container-f">But we’ve met before. That was a long time ago, I was a kid at St. Swithin’s, It used to be funded by the Wayne Foundation. It’s an orphanage. My mum died when I was small, it was a car accident. I don’t remember it. My dad got shot a couple of years later for a gambling debt. Oh I remember that one just fine. Not a lot of people know what it feels like to be angry in your bones. I mean they understand. The fosters parents. Everybody understands, for a while. Then they want the angry little kid to do something he knows he can’t do, move on. After a while they stop understanding.</div>

div.container-f {
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
				border: 1px solid black;
				width: 400px;
				padding: 20px;
				transition: all 0.5s;
				color: rgba(0, 0, 0, 0.7);
				cursor: pointer;
				margin: 20px auto;
				}
				div.container-f:hover {
				white-space: normal;
				color: rgba(0, 0, 0, 1);
				background: #e3e3e3;
				border: 1px solid #666;
			}

8. Le modèle de boîte flexible (Flexbox)

Le modèle de boite fléxible nous permet de nous passer enfin des float. Même si cela nécessite un peu de travail pour appréhender ces nouvelles propriétés, vous verrez qu'ensuite, tout deviendra parfaitement logique.

Pour comprendre le principe et le fonctionnement, nous allons créer une mise en page simple sur deux colonnes.

<div class="container-g">
		<div id="main"> Notre contenu principal </div>
		<aside> Encore de contenu ici </aside>
	</div>

Voyons ensuite les CSS.
Il faut d'abord indiquer que le container-g doit être traité comme une boite flexible. On applique également une largeur et une hauteur génériques.

div.container-g {
		width: 600px;
		height: 450px; /* pour l'exemple */
		background: #f4f4f4;
		margin: auto;
		display: flex;
		color:#fff;
	}

Ensuite et pour que ce soit plus visuel dans cet exemple, on applique des couleurs de fond uniques à #main, div et à aside.

#main { 
		background: green;
		} 
		aside {
		background: blue;
	}

Ok pour l'instant, ça ne ressemble pas encore à grand chose !

Notre contenu prend tout l'espace disponible sur la largeur dans chaque containeur. Il ne vous aura pas échappé que lorsqu'ils sont définis par display: flex, les éléments enfants occupent tout l'espace vertical; c'est à dire la valeur par défaut de align-items: stretch.

Regardons maintenance ce qui se passe si on applique une largeur explicite à la zone de contenu #main.

#main {
		background: green;
		width: 400px;
	}

Bon, c'est un peu mieux mais vous pouvez constater que la partie bleue n'occupe pas tout l'espace restant. Il est possible de résoudre ce problème en utilisant la nouvelle propriété box-flex.

aside { 
		display: block; 
		background: blue;
		flex: 1; /* prend l'espace disponible */
	}

Grâce à cette propriété flex, quelle que soit la largeur de la zone de contenu #main, le aside occupera tout l'espace disponible restant. Mieux encore, vous n'avez plus à vous soucier de ces problèmes embêtants de float avec ces éléments qui s'affichaient sous la zone de contenu principale.

Très franchement, je n'ai fait qu'effleurer le sujet ici. Pour en savoir plus à propos de Flexbox, je vous indique quelques ressources à consulter. Cette fonctionnalité est désormais prise en charge par tous les principaux navigateurs et vous pouvez vous attendre à ce qu'elle fonctionne parfaitement sur plus de 99% des appareils.

CSS 3 Flexbox: Plongez dans les CSS modernes

Ouvrage rédigé par Raphaël Goetter - Alsacreations.com - qui s'adresse à un public possèdant déjà un minimum de culture en termes de web design.

Responsive Web Design with HTML5 and CSS

Difficile de ne pas citer ici cet excellent ouvrage écrit pas Ben Frian. Cette dernière édition vous permettra d'être rapidement à l'aise avec Flexbox.

Réalisez votre site web avec HTML 5 et CSS 3

Bien qu'il ne traite pas uniquement de Flexbox, ce livre de Mathieu Nebra - OpenClassRooms - est vraiment très complet si vous souhaitez vous initier.

9. resize 10 propriétés CSS3 à connaitre

La propriété resize fait partie du module d'interface utilisateur de CSS3 et vous permet de spécifier la manière dont une zone de texte textarea peut être redimensionnée. Cette propriété est désormais prise en charge par tous les principaux navigateurs, à l'exception d'Internet Explorer et de Safari.

Notez que par défaut, les navigateurs Webkit et Firefox 4 permettent de redimensionner les zones de texte textarea, aussi bien verticalement que horizontalement.

Valeurs possibles

• both: redimensionne verticalement et horizontalement

• horizontal: redimensionne horizontalement

• vertical: redimensionne verticalement

• none: redimensionnement désactivé

<form action="#" method="post">
				<h5 class="h5"> Verticalement </h5>
				<textarea name="elem" id="elem" rows="5" cols="50" class="vert"></textarea>
				
				<h5 class="h5"> Horizontalement </h5>
				<textarea name="elem" id="elem" rows="5" cols="50" class="horiz"></textarea>
				
				<h5 class="h5"> Les deux </h5>
				<textarea name="elem" id="elem" rows="5" cols="50" class="both"></textarea>
				
				<h5 class="h5"> Aucun </h5>
				<textarea name="elem" id="elem" rows="5" cols="50" class="none"></textarea>
			</form>

.both {
				resize: both;
				}
				.vertic {
				resize: vertical;
				}
				.horiz {
				resize: horizontal;
				}
				.none {
				resize: none;
			}

10. Transitions

J'avais envie de terminer avec ce qui m'apparait être comme la propriété CSS3 la plus excitante car elle donne la possibilité d'animer des élements sans avoir besoin de mobiliser JavaScript.

Pour vous montrer à quel point transition est vraiment cool, nous allons reproduire un effet assez simple : décaler vers la droite, un lien dans une barre latérale au survol de la souris.

Si je n'applique pas directement la propriété transition à l'état hover, c'est parce que, si je le faisais, l'animation ne prendrait effet qu'au survol de la souris. Au passage de la souris, l'élément reviendrait immédiatement à son état initial. Et ce n'est pas ce qui est recherché ici.

Et comme transition ne concerne que l'effet, nous n'avons pas à nous préoccuper des navigateurs anciens.

<div class="transition-exemple">
				<ul>
				<li>
				<a href="#"> Survole moi! </a>
				</li>
				<li>
				<a href="#"> Survole moi! </a>
				</li>
				<li>
				<a href="#"> Survole moi! </a>
				</li>
				<li>
				<a href="#"> Survole moi! </a>
				</li>
				</ul>
				</div>
			

.transition-exemple ul a {
				transition: border-width 0.4s;
				text-decoration: none;
				padding: 10px;
				color: white;
				background: red;
				margin: 2px;
				display: inline-block;
				font-weight: 600;
				text-transform: uppercase;
				border-left: 10px white solid;
				font-size: 1.5rem;
				}
				.transition-exemple a:hover {
				border-width: 20px;
			}