Blog OSEOX : Marketing, Trafic et E-commmerce

RSS referencement
Ajouter à netvibes
Ajouter à google

Oseox c'est aussi plus de 500 formations web, un forum et des services gratuits.

Développement Web

Astuce css : Dégradé, ombre, couleurs alternées et rotation

Aurélien Bardon

16 février 2010

Astuce css : Oubliez photoshop et utilisez moins d'images Comment est-il possible d'utiliser CSS aujourd'hui au sein des navigateurs modernes afin de réduire l'utilisation des images ? Et pourquoi ne pas dessiner avec CSS ?

Par Aurélien Bardon,

Cet article est une traduction partielle de Forget About Photoshop: 5 More Ways to Stop Using Images in Your Designs

L'auteur nous propose d'utiliser la puissance de CSS en lieu et place d'images à travers 5 techniques que vous ne connaissez peut être pas. Je n'ai pas testé les codes proposés.

Objectif 1 : Rotation d'un texte

Code CSS

.sideways {

-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);

}

Objectif 2 : Triangle

Code CSS

<div class="upper">
<div class="inner"></div>
</div>

Et une petite classe supplémentaire afin de compléter l'effet :

.upper {

position:absolute;
left:150px; top:100px;
}

.upper div {

border-left-color: transparent;
border-style: solid;
}

.inner{

border-width: 0 0 300px / 200px;
border-bottom-color: #955;
}

Objectif 3 : Couleurs alternées et tableau

Code CSS

<table border="0">
<tbody>
<tr><td>One</td><td>and</td></tr>
<tr><td>Two</td><td>and</td></tr>
<tr><td>Three</td><td>and</td></tr>
<tr><td>Four</td><td>end.</td></tr>
</tbody>
</table>

Et voici la classe magique :

tbody tr:nth-child(odd) {

background-color: #ccc;
}

Objectif 4 : Ombre

Code CSS

module {

background-color: #cccccc;
/* offset left, top, thickness, color with alpha */
-webkit-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.5);
/* IE */
filter:progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray');
/* slightly different syntax for IE8 */
-ms-filter:"progid:DXImageTransform.Microsoft.dropshadow(OffX=5, OffY=5, Color='gray')";
}

Objectif 5 : Dégradé

Code CSS

.gradient {

background-image: -moz-linear-gradient(top, #aaaaaa, #dddddd);
background-image: -webkit-gradient(linear, left top, left bottom, from(#aaa), to(#ddd));
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd);
-ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#aaaaaa,endColorstr=#dddddd)";
}

Pour troller, cela se passe dans les commentaires :-)

S'il vous plait, motivez moi à écrire d'autres articles

Formez-vous avec notre newsletter professionnelle (gratuite)


(En cadeau, un guide sur le Référencement de plus de 30 pages)

Editeur du portail Oseox.fr, Aurélien Bardon est expert en création de trafic. Après avoir travaillé en agence et chez l'annonceur, aussi bien pour des petites sociétés que pour de grands comptes, il fonde en 2009 l'agence web Aseox.

suivre Aurélien Bardon sur twitter

Affichez les commentaires

N'oubliez pas de vous abonner au flux

S'inscrire à la newsletter (info exclusive)

Recevoir 80 tests Référencement ?
(PDF gratuit de 31 pages)
(Désabonnement en 1 clic)
oseox Monitoring
Yooda
E-commerce

E-commerçants ? Vous recherchez un partenaire ?

18/03/2015 par Aurélien Bardon : 12071 lectures.

chapeau bas de bloc
Référencement

Code promo SEOCampus 2015

06/03/2015 par Aurélien Bardon : 11288 lectures.

chapeau bas de bloc
Développement Web

CDI Full Stack Developer

18/12/2014 par Aurélien Bardon : 13484 lectures.

chapeau bas de bloc
Référencement

Compte rendu du SEOcamp'US de Lille 2014

09/12/2014 par Aurélien Bardon : 12265 lectures.

chapeau bas de bloc
Référencement

Apéro Référencement à Lille le 5 décembre

02/12/2014 par Aurélien Bardon : 9898 lectures.

chapeau bas de bloc
Internet

Interview de Julien Ringard

26/11/2014 par Aurélien Bardon : 9581 lectures.

chapeau bas de bloc
Internet

Interview de Mounira Hamdi, spécialiste SMO

19/11/2014 par Aurélien Bardon : 12069 lectures.

chapeau bas de bloc
Internet

Le programme du SEOCAMP'US de Lille dévoilé

18/11/2014 par Aurélien Bardon : 10134 lectures.

chapeau bas de bloc
Internet

Interview de Nicolas Gallet

17/11/2014 par Aurélien Bardon : 8508 lectures.

chapeau bas de bloc
Internet

Interview de Elie Sloïm

14/11/2014 par Aurélien Bardon : 10342 lectures.

chapeau bas de bloc

Forum Marketing