CSS3 Ombres Box ("box-shadow" propriété)
Avis de la dernière ligne, ce qui est propre méthode d'IE d'ajouter une ombre à l'aide de filtres.
Pour plus d'informations sur sa syntaxe, voir: " Drop Shadow "filtre.
: Ajout d'infos sur la création d'ombres dans IE en utilisant des filtres.
CSS3 soutient une nouvelle "
box-shadow "propriété qui rend les travaux légers d'ajouter des ombres à des éléments sur votre page, comme des images, DIV et s'étend. La fonctionnalité est supportée dans FF3.5, Safari 3.1 +, et Google Chrome, mais le tout via des versions spécifiques au fournisseur de cette propriété.Et IE a longtemps soutenu les ombres portées simples via son pripoertary " Drop Shadow "filtre. Ensemble, ils vous permettent d'ajouter facilement des ombres légères qui travaillent dans ces navigateurs pris en charge tout en dégradant très bien dans les navigateurs qui ne sont pas.La syntaxe de "box-shadow» est:
box-shadow: <horizontal> <vertical> <blur> <couleur>Aux termes duquel:
- Horizontaux : Une longueur en spécifiant le décalage horizontal de l'ombre. Une valeur positive (ie: 5px) rendra l'ombre à la droite de la boîte, tandis qu'une valeur négative (c'est à dire:-10px) va le rendre à la gauche à la place.
- Verticale : Une longueur en spécifiant le décalage vertical de l'ombre. Une valeur positive (ie: 5px) rendra l'ombre suivant le fond de la boîte, tandis qu'une valeur négative (c'est à dire:-10px) va le rendre à la gauche à la place.
- Blur: Une longueur en réglant le rayon diffusion / flou. La valeur par défaut est 0, ce qui signifie pas de flou. Une valeur positive augmente le flou, alors qu'une valeur négative rétrécit réellement l'ombre. Cette propriété par défaut à 0 si elle n'est pas spécifiée.
- Couleur: Une valeur de couleur définissant la couleur de l'ombre.
Comme mentionné précédemment, tout en FF3.5 et WebKit navigateurs prennent en charge le
"
vous devez définir tous les trois propriétés dans le même temps, chacun suivant les règles
exactes même syntaxe que la propriété d'origine ci-dessus.
"
box-shadow "propriété, ils actuellement sa mise en œuvre via leur fournisseur de propriété équivalente lui est propre. Donc, pour appliquer une ombre CSS3 case pour un conteneur,vous devez définir tous les trois propriétés dans le même temps, chacun suivant les règles
exactes même syntaxe que la propriété d'origine ci-dessus.
L'exemple suivant ajoute une ombre à un DIV qui a compensé à droite et au fond, sans flou:
<style type="text/css">
{shadow1.
box-shadow: 5px 5px # 818181;
-webkit-box-shadow: 5px 5px # 818181;
-moz-box-shadow: 5px 5px # 818181;
filtre: ProgID: DXImageTransform.Microsoft.dropShadow (color = # 818181, offX = 5, offY = 5, positif = true);
}
</ style> <div class = "shadow1" style = "width: 500px; height: 50px; padding: 5px ; de fond: la marine; border: 1px solid black; "> </ div>
Pour plus d'informations sur sa syntaxe, voir: " Drop Shadow "filtre.
Voici une ombre très similaire, sauf avec un rayon de flou de 8px ajouté:
<style type="text/css">
. shadow2 {
box-shadow: 7px 7px 8px # 818181;
-webkit-box-shadow: 7px 7px 8px # 818181;
-moz-box-shadow: 7px 7px 8px # 818181;
Filtre : ProgID: DXImageTransform.Microsoft.dropShadow (color = # 818181, offX = 7, offY = 7, positif = true);
}
</ style> <div class = "shadow2" style = "width: 500px; height: 50px; padding: 5px; background: navy; border: 1px solid black; "> </ div>
L'effet de flou n'est pas visible dans IE, comme «Ombre portée» d'IE filtres ne le supporte pas. Et voici une ombre ajoutée à une image, inversée et en utilisant une couleur brunâtre:
<style type="text/css">
. shadow3 {
box-shadow:-6px-6px 10px # 561A0B;
-webkit-box-shadow:-6px-6px 10px # 561A0B;
-moz-box-shadow:-6px - 6px 10px # 561A0B;
filtre: ProgID: DXImageTransform.Microsoft.dropShadow (color = # 561A0B, offX =- 6, offY =- 6, positif = true);
}
</ style> <img src = "brandstorming.gif« classe = "shadow3" />
