CSS3 commence vraiment à s'accélérer avec la plupart des commandes décrites dans le projet de CSS3 travail, appuyé par Firefox, Safari et Google Chrome. Nous avons pensé rassembler certains de nos favoris. Avant de commencer CSS3 commandes nécessitent une syntaxe spécifiques à un navigateur pour eux de travailler.

Pour Mozilla Firefox, nous devons utiliser le-moz-préfixe, par exemple:

-Moz-border-radius:

Et pour Safari du-webkit-préfixe, par exemple:

-Webkit-border-radius:

1. Rayon des frontières

La commande CSS3 rayon de la frontière crée des coins courbés sur un élément. Au lieu d'utiliser 4 ou plusieurs images pour créer des angles arrondis utiliser les commandes suivantes:

/ * Pour Mozilla Firefox * /
-Moz-border-radius: 20px;

/ * Pour Safari et Google Chrome * /
-Webkit-border-radius: 20px;
}

2. Boîte d'ombre

Une ombre peut être appliquée aux éléments en utilisant la commande CSS3 zone d'ombre. L'ombre boîte accepte trois valeurs numériques plus une couleur à appliquer cet effet. Ces chiffres sont les suivants:

1. Distance de décalage horizontal de l'ombre - Une valeur positive signifie l'ombre jettera sur la droite et une valeur négative pour la gauche
2. Distance de décalage vertical de l'ombre - Une valeur positive signifie l'ombre jettera bas et une valeur négative au-dessus
3. Comment floues vous souhaitez l'ombre

Avec l'ajout d'une valeur de couleur de l'ombre est complète:

/ * Pour Mozilla Firefox * /
-Moz-box-shadow: 5px 5px 5px # b6ebf7;

/ * Pour Safari et Google Chrome * /
-Webkit-box-shadow: 5x 5px 5px # b6ebf7;

3. Transparence ou RGBA

La transparence a toujours été délicat. Les différents navigateurs ont historiquement appliquée transparence à l'aide des commandes différentes. Poursuivant cette incohérence cross-browser, nous avons l'ajout de la nouvelle propriété CSS3 RGBA de fond, toutefois, en principe, cette commande est plus logique. La commande se compose de 4 valeurs - la première, deuxième et troisième sont les valeurs de rouge, vert et bleu (0-255), respectivement suivis par le canal alpha de transparence ou de (0-1).

Pour la commande RGBA les préfixes navigateur spécifique (-moz-,-webkit-) ne sont pas nécessaires:

# {Encadré 3
background-color: rgba (110, 142, 185, 0.5);
}

La commande la couleur de fond ajoute un joli bleu-gris de fond à 0,5 ou l'opacité de 50% dans les navigateurs qui comprennent la propriété CSS3 RGBA.

Malheureusement Internet Explorer tentera également de rendre la commande la couleur de fond, mais ne comprennent pas RGBA. Afin de s'assurer que la couleur de fond est également fixé dans IE un hack IE seule est nécessaire. Dans l'exemple suivant l': last-child sélecteur de pseudo que l'Internet Explorer ne comprend pas est utilisée pour l'exclure.

corps: last-child # {encadré 3
/ * Exclure tous les navigateurs IE en utilisant: last-child * /
background-color: rgba (110, 142, 185, 0.5) importante;
}

4. Colonnes

La possibilité d'ajouter des colonnes a été ajoutée au CSS3. Plutôt que d'éléments flottants dans les conteneurs que nous pouvons définir le nombre de colonnes, la largeur et la règle:

/ * Pour Mozilla Firefox * /
-Moz-column-count: 2;
-Moz-column-gap: 20px;
-Moz-column-rule: 1px solid # 6e8eb9;

/ * Pour Safari et Google Chrome * /
-Webkit-column-count: 2;
-Webkit-column-gap: 20px;
-Webkit-column-rule: 1px solid # 6e8eb9;
}

5. Plusieurs images de fond

L'imagerie de fond a toujours été restrictive quand il s'agit de due au fait que vous ne pouvez appliquer une image de fond par élément CSS. Ce n'est pas le cas avec CSS3 qui permet de multiples images par élément, simplement en les séparant par des virgules.

Pour placer une image à la fois la gauche et à droite d'un élément, vous pouvez utiliser les commandes suivantes, avec un peu de style:

padding: 0 20px;
}

Cette commande va être mal rendu par Internet Explorer car il n'accepte pas les deux images de fond sur un seul élément. Un exclure tous les pirater IE est nécessaire.

# Box5 blockquote {
/ * Pour tous les navigateurs, juste une citation ouverte * /
background: url (/ i / quotel.gif) 0 0 no-repeat;
padding: 0 20px;
}

corps: last-child # box5 blockquote {
/ * Exclure tous les navigateurs IE en utilisant: last-child * /
/ * Puis les deux images * /
background: url (/ i / quotel.gif) no-repeat 0 0, url (/ i / quoter.gif) no-repeat 100% 0;
}

6. Gradients de fond

Gradients de fond CSS3 sont extrêmement souples et peuvent être utilisés pour créer des motifs complexes. À sa plus simple expression du gradient CSS linéaire permet un dégradé à être appliquée à un élément de haut en bas et de gauche à droite.

Cet exemple d'un gradient CSS3 dans Mozilla Firefox applique un dégradé de lumière bleue au fond d'une boîte pour seulement 20% des boîtes 'de hauteur

Safari utilise une approche moins intuitive mais plus flexible en utilisant des valeurs étape de couleur. Un exemple de code spécifique au Safari suit (notez le linéaire est incluse entre parenthèses plutôt que de l'extérieur):

# {Box8
Contexte:-webkit-gradient (linéaire, en bas à gauche, en haut à gauche, la couleur-stop (0, # b6ebf7), couleur-stop (0,20, # fff));
}

7. Rotation

CSS3 permet également la rotation des éléments en utilisant la commande de transformer, avec la propriété rotation accepter degrés comme un paramètre.

<code> # {box9
-Moz-transform: rotate (2DEG);
-Webkit-transform: rotate (2DEG);
} </ Code>

8. Contours

Outilines sont inclus dans la spécification CSS3 et permettent à la fois une frontière et un contour pour être appliqué à un seul élément.

La propriété outline est identique à la commande des frontières. La propriété supplémentaire de décalage permet cependant la frontière pour être déplacé plus à l'intérieur ou à l'extérieur de l'élément.

Classé dans: Css par admin