Le web design géométrique

CSS
Grâce aux CSS et à la nouvelle norme CSS3, nous pouvons désormais concevoir des interfaces graphiques légères et faciles à maintenir. Les tendances du web design suivent d’ailleurs les avancées techniques du web. Depuis l’arrivée de la norme CSS3, nombreux sont les sites qui utilisent les border-radius pour produire des cercles et coins arrondis ainsi que les pseudo-éléments :before et :after. Les navigateurs ont beaucoup évolué et ils supportent de mieux en mieux ces nouvelles spécifications, ils ne sont pas encore tous logés à la même enseigne et des précautions devront être pris avec l’utilisation des exemples mises en avant ici.

Un design tout en rondeur

cercle-css3

.rond{
width:200px;
height:200px;
background:#069;
-webkit-border-radius:100px;
-moz-border-radius:100px;
-o-border-radius:100px;
border-radius:100px;
}

Les navigateurs n’ayant pas encore tous implémenté de façon standard border-radius, on devra les cibler avec -webkit-,-moz-,-o- Il est préférable d’écrire ce code avant la propriété border-radius, ainsi dès qu’un navigateur reconnaîtra cette propriété, le code déclaré au dessus sera simplement ignoré.

Les ovales

.ovale{
width:300px;
height:200px;
background:#069;
-webkit-border-radius:150px / 100px;
-moz-border-radius:150px / 100px;
-o-border-radius:150px / 100px;
border-radius:150px / 100px;
}

border-radius

Les coins arrondis

Une des propriété les plus utilisées auhourd’hui c’est surement le border-radius :

.moncoin {
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
}

Puisque la propriété CSS3 border-radius n’est pas reconnue par Internet Explorer jusqu’à sa version 8 incluse et que l’on souhaite opérer néanmoins dans le cadre d’une rétrocompatibilité entre navigateurs ancienne génération et les navigateurs récents ont peut utiliser CSS3pie.com pour Internet Explorer 6-8

Un design tranchant

Dernièrement je me suis essayé à des design utilisant les pseudo-éléments :before et :after. Ces pseudo-éléments ont longtemps été négligés par les designers et intégrateurs. IE6 et IE7 ne les comprennent pas, donc à l’époque ou ces deux navigateurs était dominant c’était inutilisable. Mais aujourd’hui les choses ont changé et les navigateurs modernes prennent le pas, et il n’est pas inconcevable selon moi de proposer une dégradation élégante du design pour les anciens navigateurs. Après tous je suis de ceux qui pensent que le web doit avancer, on ne va pas continuer à produire des sites au design éculés sous prétexte que quelques internautes conservateurs ne souhaitent pas changer leurs habitudes. Un exemple ici css-tranchantePas de difficulté particulière sinon de comprendre comment et dans quel sens fonctionnent les border. La conception du menu est particulièrement intéressante à analyser:

ul {
	margin: 0;
	padding: 0;
	font-size: 1em;
	color: #FFF;
	position: relative;
	height: 44px;
	padding-left: 45px;
	overflow: hidden;
	display: block;
	list-style-type: none;
}

li a:after {
	content: '';
	border-right: 45px solid transparent;
	border-top: 44px solid #000;
	position: absolute;
	top: 0;
	margin-left: 5px;
}
li a:hover:after {
	content: '';
	border-right: 45px solid transparent;
	border-top: 44px solid red;
	position: absolute;
	top: 0;
	margin-left: 5px;
}

La calage des triangle sur les li devant se faire au pixel près, il sera judicieux de mettre un overflow: hidden; au parent UL afin d’éviter tous débordement. L’autre élément intéressant c’est la possibilité de mettre une action au survol des boutons LI et d’ajouter un hover sur l’élément before ou after déjà présent, vous apprécierez d’ailleurs l’ordre d’appel des éléments :
a:hover:after sinon ça ne marche pas.

Les formes géométriques composées

css3

Une fois qu’on a compris les bases ont peu s’amuser à construire des formes plus complexes comme une étoile par exemple en assemblant 2 triangles :

.etoile{
background:#000;
margin:100px auto;
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #000;
position: relative;
}
.etoile:after{
content:'';
border: 1px solid #069;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #000;
width:0;
height:0;
position: absolute;
top:30px;
left:-50px;
}


2 commentaires pour “Le web design géométrique”

  1. Bonjour

    Je recherche certaines formes géométriques car je vais commencer une formation de webmaster et web designer.

    Pour mes modules de présentation je souhaite créer un concept de menu déroulant géométriques. Avec les formes que vous avez créer, a votre avis est-il possible de faire ce dont je souhaite?

    merci par avance de votre réponse qui est très importante pour moi.

  2. Bonjour,
    oui vous pouvez créer un menu déroulant géométrique, attention toutefois au rendu sur des navigateurs qui ne supportent pas CSS3, il faudra prévoir soit une dégradation, soit un passage au JavaScript pour les anciens navigateurs.
    Mais c’est réalisable et je suis très impatient de voir ce que ça donne :)

Laissez un commentaire