Notes

Un zest de CSS 3 dans Safari, Firefox et Chrome

Un premier aperçu de CSS 3 dans les moteurs webkit et Gecko

Tags : , , ,

En attendant l’arrivée de CSS 3 (sur lequel travaille le W3C et qui devrait révolutionner la façon de faire des sites en CSS), la sortie de Safari 3, permet quelques nouvelles expérimentations en introduisant certaines des fonctions à venir dans son moteur de rendu, WebKit. De son côté, Gecko de Firefox a depuis longtemps ajouté quelques fonctions CSS 3 dans son moteur.

[MAJ] : La sortie de Google Chrome basé sur WebKit ajoute un navigateur de plus gérant ces fonctionnalités !

Ci-dessous, j’ai regroupé certaines de ces fonctions CSS 3 pour Webkit et Gecko :

Text Stroke :

Contour du texte.

Webkit :

-webkit-text-stroke: 3px black;


Text Shadow :

Une ombre portée sous du texte.

Webkit :

text-shadow: 5px 5px 5px black;

Liste des fonctions :

  1. décalage en largeur ;
  2. décalage en hauteur ;
  3. épaisseur,
  4. couleur

fonctionne avec :first-letter et :first-line

url : http://webkit.org/blog/85/introduci...


Box Sadow :

Une ombre portée sous une boîte.

Webkit :

-webkit-box-shadow: 10px 10px 5px #888

Liste des fonctions :

  1. décalage en largeur ;
  2. décalage en hauteur ;
  3. épaisseur,
  4. couleur

Border Radius :

Permet de faire des blocs avec cadres arrondis.

Webkit :

-webkit-border-radius: 5px;

Coin par coin :

-webkit-border-top-left-radius
-webkit-border-top-right-radius
-webkit-border-bottom-left-radius
-webkit-border-bottom-right-radius

Gecko :

-moz-border-radius: 5px;

pour un seul coin :

-moz-border-radius-topleft


Opacity :

Modifie l’opacité d’un bloc.

Webkit, Gecko and Opera :

opacity: 0.5;


Multi-column layout

Permet de faire du texte "chaîné" dans plusieurs colonnes, une manière de ramener la souplesse de la mise-en-page "papier" sur le web.

Webkit :

-webkit-column-count: 3;
-webkit-column-gap: 1em;
-webkit-column-rule: 1px solid black;

Gecko :

-moz-column-count: 3;
-moz-column-gap: 1em;

Voilà, en attendant la sortie de CSS 3, vous pouvez déjà vous amuser avec ces quelques fonctions.

P.-S.

Il est préférable de bien faire attention au fait que ces fonctionnalités ne seront pas interprétés par les autres navigateurs, donc les effets produits ne doivent pas être indispensables à l’équilibre graphique ou au fonctionnement du site. Ils devraient être vus comme un plus.

© 2017 - Abel Poucet web design