Blog d'un Éternel Geek

Le Dégradé reprend ses lettres de noblesse dans le Webdesign

http://vivageek.livehost.fr/data/images/news/design/gradienpower.jpg

 

On ne l'attendais plus et pourtant le dégradé reprend ses marque et son rang au sein des webdesigners.

 

Après la domination du flat et des couleurs pastels dans la conception Web, j'ai remarqué qu'une nouvelle tendance avec l'utilisation des dégradés commence à émerger. Les Dégradés ne sont pas nouveau dans la conception web, mais la propriété CSS de linear-gradient permet désormais aux concepteurs d'ajouter des spectres dynamiques de couleur directement à leur code, plutôt que la méthode traditionnelle de création d'une image gradient dans Photoshop.

 

Un avantage de l'approche du CSS est que le dégradé peut être adapté à toutes les tailles, ce qui le rend idéal pour remplir l'écran. J'ai pu trouver près de 25 exemples de ces gdégradés utilisés comme arrière-plans, en-têtes ou en superposition.

Comment expliquer ce renouveau ?

C'est une évolution logique du Flat Design avec son étendue vers le dégradé, logos, images,…. Les flats couleurs laissent désormais place à de subtils dégradés. Sans vouloir investiguer en profondeur sur la naissance d’une tendance graphique employée depuis bien longtemps, je pense que le renouveau des dégradés est lié à plusieurs facteurs : 

 

  1. Nous ne pouvons pas nier l’influence du design d’iOS7, qui a imposé très rapidement ses effets de dégradés dans ses applications.
  2. Le support de la propriété CSS3 « linear-gradient » permet aujourd’hui d’utiliser d’intéressants spectres de couleurs directement dans le code. Elle représente un avantage énorme par rapport à un dégradé généré sous Photoshop par exemple. En effet grâce au CSS, votre effet peut s’adapter correctement à votre design, quelque soit votre résolution d’écran.
  3. Sans se voiler la face, l’effet fonctionne bien pour le moment et est clairement à la mode…

Utiliser des dégradés permet d’employer des couleurs vives / vibrantes qui donnent ainsi de la puissance à vos visuels. Une certaine profondeur et dynamise l'étendue des actions. Attention tout de même à bien choisir les teintes utilisées : une association de couleurs mal gérée risque très fortement de faire fuir l’utilisateur.

 

Mais Comment cela fonctionne il ?

Avec CSS3 on a de multiples possibilités tout comme avec Photoshop. Cela créera des styles différents à l'utilisation.

 

On va dans un premier temps encadrer notre background image avec un div :

<div id="gradient"></div>

 

Ensuite, on va mettre en place le css.

#gradient {

    width:200px;

    height: 60px;

}

 

« Gradient est une valeur de la propriété background-image. »

Donc on écrira simplement par souci de satisfaire tous les navigateurs :

#gradient {

background-image: -webkit-linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

background-image:    -moz-linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

background-image:     -ms-linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

background-image:      -o-linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

background-image:         linear-gradient(right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%);

filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D60F0F',endColorstr='#FFDD00', GradientType=1);

}

 

Explication:

On attribut à background-image le code linear-gradient donc notre dégrade avec les paramètres suivant (right top, rgb(214,15,15) 0%, rgb(251,221,0) 100%)produira un dégrader du rouge vers le jaune

Right top signifie que le dégradé démarre du haut: top et de la droite.

Valeurs: top, bottom, right, left.

  • -webkit- pour Chrome 10 et suivants ainsi que pour Safari 5.1 et suivants,
  • -moz- pour Firefox 3.6, et suivants,
  • -ms- pour IE 10 et suivants,
  • -o- pour Opera 11.10, et suivants.
  • Filter : pour internet Explorer

 

Des dégradés transparents ?

Il suffit d'utiliser rgba ce qui nous permettra de rajouter un 4ème paramètre : opacity ainsi rgba(214,15,15,0.5).

 

Pas seulement linear mais aussi radial ?

En effet, on peu également faire des dégradés radial juste en changeant la valeur de linear ainsi : radial-gradient.

 

Au plus simple en conclusion

background: -webkit-linear-gradient( right, red, blue);

background: -moz-linear-gradient( right, red, blue);

background: -ms-linear-gradient( right, red, blue); background: -o-linear-gradient( right, red, blue);

background: linear-gradient( to left, red, blue);

Vous voyez ce n'est pas si difficile.

Voici quelques sites exemple qui utilisent avec technicité ce système avancé de dégradés.

http://vivageek.livehost.fr/data/images/news/design/gradient1.png

 

http://loubsol.com/

 

http://vivageek.livehost.fr/data/images/news/design/gradient2.png

 

 

http://www.niekdekker.com/

 

http://vivageek.livehost.fr/data/images/news/design/gradient3.png

 

 

http://www.symodd.com/

 

http://vivageek.livehost.fr/data/images/news/design/gradient4.png

 

 

http://erikzuuring.com/

 

Merci à bientôt.

 

Source : webdesignertrends, line25, google flat design






 Geek me     Je suis un Geek dans l'âme. 18 ans à silloner internet pour récolter des informations afin de comprendre son fonctionnement. Idéalement j'étudie également le comportement humain.

C'est afin de vous partager mes connaissances que j'ai ouvert ce blog alors je vous souhaite une bonne lecture.



À lire également


Écrire un commentaire

Votre adresse de messagerie ne sera pas publiée.

Quelle est la deuxième lettre du mot hqjihb ? :