/* Ce code implémente l'effet de dégradé lorsque la souris glisse sur le lien*/
un {
couleur : #007c21 ;
transition : couleur .4s facilité ;
}
a: survol { couleur : #00bf32 }En utilisant CSS3, vous pouvez créer des coins arrondis pour la plupart des éléments, y compris les éléments de formulaire, les images et même le texte d'un paragraphe, sans introduire de balisage ou d'images supplémentaires.
<!DOCTYPEhtml> <html lang="fr"> <tête> <meta charset="utf-8" /> <title>Coins arrondis</title> <link rel="stylesheet" href="css/rounded-corners.css" /> </tête> <corps> <div class="all-corners"></div> <div class="one-corner"></div> <div class="elliptical-corners"></div> <div class="circle"></div> </corps> </html>
Quatre exemples utilisant des coins arrondis CSS, y compris les préfixes de fournisseur nécessaires pour prendre en charge les anciennes versions des navigateurs Android, Mobile Safari et Safari. Pour .circle , l'utilisation 75px a le même effet que 50% car l'élément mesure 150像素*150像素.
div{
arrière-plan : #999 ;
flotteur : gauche ;
hauteur : 150px ;
marge : 10px ;
largeur : 150 px ;
}
.tous les coins {
-radius de bordure de kit Web : 20 px ;
rayon de bordure : 20 px ;
}
.un coin {
-webkit-border-top-left-radius : 75px ;
rayon de la bordure supérieure gauche : 75 px ;
}
.coins-elliptiques {
-radius-bordure-webkit : 50px / 20px ;
rayon de bordure : 50 px / 20 px ;
}
.cercle {
-webkit-border-radius : 50 % ;
rayon de bordure : 50 % ;
} div{
arrière-plan : #ff9 ;
bordure : 5px solide #326795 ;
flotteur : gauche ;
hauteur : 150px ;
marge : 10px ;
largeur : 150 px ;
}
.exemple-1 {
/* Rend le rayon des coins supérieur gauche et inférieur droit 10px et
les coins supérieur droit et inférieur gauche 20px */
rayon de bordure : 10px 20px ;
}
.exemple-2 {
/* Rend le rayon du coin supérieur gauche à 20 px et tous les autres coins à 0 */
rayon de bordure : 20px 0 0 ;
}
.exemple-3 {
/* Rend le rayon du coin supérieur gauche à 10px, celui du coin supérieur droit à 20px,
le coin inférieur droit 0 et le coin inférieur gauche 30px */
rayon de bordure : 10px 20px 0 30px ;
}-webkit-border-radius: r , où r est le rayon du congé, exprimé en longueur (avec unités). Entrez border-radius: r , où r est le rayon du congé, utilisez la même valeur qu'à la première étape. Il s’agit de la syntaxe abrégée standard pour cette propriété.-webkit-border-top-left-radius: r , où r est le rayon du coin supérieur gauche, exprimé en longueur (avec unités). Entrez border-top-left-radius: r , en utilisant la même valeur pour r qu'à la première étape. Il s’agit de la syntaxe longue standard pour cette propriété. Pour créer un coin supérieur droit, utilisez top-right ; pour créer un coin inférieur droit, utilisez bottom-right ; pour créer un coin inférieur gauche, utilisez bottom-left .-webkit-border-radius: x/y , où x est le rayon du congé dans la direction horizontale, y est le rayon du congé dans la direction verticale, tous deux exprimés en longueur (avec unité) . Entrez border-radius: x/y , où x et y sont égaux aux valeurs de la première étape.-webkit-border-radius: r où r est le rayon de l'élément (avec unité de longueur). Pour créer un cercle, utilisez la forme courte de la syntaxe, où la valeur de r doit être égale à la moitié de la hauteur ou de la largeur de l'élément. Entrez border-radius: r où r est le rayon de l'élément (avec l'unité de longueur), qui est égal à r dans la première étape. Il s'agit d'une syntaxe standard sans préfixe. Remarque : Les navigateurs plus anciens qui ne prennent pas en charge border-radius n'afficheront que les éléments avec des coins carrés. border-radius n'affecte que les coins de l'élément auquel le style est appliqué, pas les coins de ses éléments enfants. Par conséquent, si un élément enfant a un arrière-plan, celui-ci peut apparaître aux coins d'un ou plusieurs éléments parents, affectant ainsi le style des coins arrondis. Parfois, l'arrière-plan d'un élément (et non l'arrière-plan de ses éléments enfants ici) apparaîtra à travers ses coins arrondis. Pour éviter cela, vous pouvez ajouter une règle de style après la déclaration border-radius de l'élément : background-clip: padding-box;
Utilisez text-shadow pour ajouter des effets d'ombre dynamiques au texte des paragraphes, des titres et d'autres éléments sans utiliser d'images pour représenter le texte.
text-shadow: . Entrez les valeurs représentant respectivement x-offset (décalage horizontal), y-offset (décalage vertical), blur-radius (rayon de flou) et color (les trois premières valeurs ont des unités de longueur et il n'y a pas de virgule entre les quatre valeurs séparées), par exemple -2px 3px 7px #999 .text-shadow: . Entrez respectivement les valeurs de x-offset (décalage horizontal), y-offset (décalage vertical), blur-radius (rayon de flou) et color (les trois premières valeurs ont des unités de longueur et il n'y a pas de virgule séparation entre les quatre valeurs). La valeur de blur-radius est facultative. Entrez, (virgule). Répétez la deuxième étape avec des valeurs différentes pour les quatre propriétés.<!DOCTYPEhtml> <html lang="fr"> <tête> <meta charset="utf-8" /> <title>Ombre du texte</title> <link rel="stylesheet" href="css/text-shadow.css" /> </tête> <corps> <p class="basic">Ombre de base</p> <p class="basic-negative">Ombre de base</p> <p class="blur">Rayon de flou</p> <p class="blur-inversed">Rayon de flou</p> <p class="multiple">Ombres de texte multiples</p> </corps> </html>
corps {
arrière-plan : #fff ;
couleur : #222 ;
police : 100 %/1,05 helvetica, sans empattement ;
rembourrage supérieur : 20 px ;
}
p{
couleur : #222 ; /* presque noir */
taille de police : 4,5 em ;
poids de la police : gras ;
marge : 0 0 45px ;
}
p:dernier enfant {
marge : 0 ;
}
.basique {
texte-ombre : 3px 3px #aaa ;
}
/* utilise des décalages négatifs --vous pouvez également mélanger des décalages positifs et négatifs */.
.basic-négatif {
text-shadow: -4px -2px #ccc; /* un gris un peu plus clair que #aaa */
}
.se brouiller {
texte-ombre : 2px 2px 10px gris ;
}
.flou inversé {
couleur : blanc ;
texte-ombre : 2px 2px 10px #000 /* noir */
}
/* cet exemple a deux ombres, mais vous pouvez inclure
plus en séparant chacun par une virgule */
.multiple {
texte-ombre :
2px 2px blanc,
6px 6px rgba(50,50,50,.25);
} Ces classes démontrent plusieurs effets text-shadow . Les premier, deuxième et cinquième omettent tous la valeur du rayon de flou. La classe .multiple nous indique que plusieurs styles d'ombre peuvent être ajoutés à un seul élément, des virgules séparant chaque ensemble d'attributs. De cette façon, en combinant plusieurs styles d’ombres, vous pouvez créer des effets spéciaux et intéressants.
Autrement dit, entrez text-shadow: none; Cet attribut n'a pas besoin d'être saisi et utilise le préfixe du fabricant.
La propriété text-shadow accepte quatre valeurs : x-offset avec des unités de longueur, y-offset avec des unités de longueur, blur-radius facultatif avec des unités de longueur et color . Si blur-radius n'est pas spécifié, sa valeur est supposée être 0. x-offset et y-offset peuvent être des entiers positifs ou négatifs, ce qui signifie que 1px et -1px sont tous deux valides. La valeur blur-radius doit être un entier positif. Les trois valeurs peuvent être 0. Bien que la syntaxe de text-shadow soit similaire à celle des propriétés border et background, elle ne peut pas spécifier quatre valeurs de propriété distinctes comme border et background. Si text-shadow n'est pas spécifié, il utilise la valeur initiale none .
Utilisez la propriété text-shadow pour ajouter une ombre au texte d'un élément et utilisez la propriété box-shadow pour ajouter une ombre à l'élément lui-même. Leur jeu de propriétés de base est le même, mais box-shadow permet également l'utilisation de deux propriétés facultatives : la propriété inset password et spread (utilisée pour agrandir ou réduire l'ombre).
box-shadow accepte six valeurs : x-offset et y-offset avec des unités de longueur, blur-radius facultatif avec des unités de longueur, un mot-clé inset facultatif, une valeur spread facultative avec des unités de longueur et une valeur color . Si les valeurs de blur-radius et spread ne sont pas précisées, elles sont définies sur 0.
<!DOCTYPEhtml> <html lang="fr"> <tête> <meta charset="utf-8" /> <title>Ombre de la boîte</title> <link rel="stylesheet" href="css/box-shadow.css" /> </tête> <corps> <div class="ombre"> <p>Ombre avec flou</p> </div> <div class="shadow-negative"> <p>Ombre avec décalages négatifs et flou</p> </div> <div class="shadow-spread"> <p>Ombre avec flou et propagation</p> </div> <div class="shadow-offsets-0"> <p>Ombre avec décalages zéro, flou et propagation</p> </div> <div class="inset-shadow"> <p>Incruster une ombre</p> </div> <div class="multiple"> <p>Ombres multiples</p> </div> <div class="shadow-negative-spread"> <p>Ombre avec flou et diffusion négative</p> </div> </corps> </html>
corps {
arrière-plan : #000 ;
couleur : #fff ;
}
h1 {
famille de polices : sans-serif ;
taille de police : 2,25 em ;
hauteur de ligne : 1,1 ;
alignement du texte : centre ;
}
/* REMARQUE : Les URL des images d'arrière-plan sont différentes ci-dessous de celles de l'exemple présenté dans le livre, car j'ai placé les images dans un sous-dossier (appelé "img"), comme c'est généralement le cas lors de l'organisation d'un site. J'ai pensé qu'il serait utile pour vous de voir comment construire vos URL d'image d'arrière-plan dans ces circonstances. Notez que les URL sont relatives à l'endroit où se trouve la feuille de style, PAS à la page HTML qui affiche l'image */.
.ciel nocturne {
couleur d'arrière-plan : marine /* couleur de repli */
image de fond :
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
position d'arrière-plan :
50% 102%,
100% -150px,
0 -150px,
50 % 100 % ;
répétition d'arrière-plan :
pas de répétition,
pas de répétition,
pas de répétition,
répéter-x ;
hauteur : 300px ;
margin : 25px auto 0 ; /* légèrement différent du livre */
rembourrage supérieur : 36 px ;
largeur : 75 % ;
} Le programme ci-dessus est utilisé pour démontrer l'effet de l'utilisation box-shadow pour ajouter une ou plusieurs ombres. Les cinq premières classes appliquent chacune un style d’ombrage différent les unes des autres. La dernière classe applique deux ombres (d’autres peuvent être appliquées). Les navigateurs qui ne comprennent pas box-shadow ignoreront simplement ces règles de style CSS et afficheront la page sans ombre.
-webkit-box-shadow: . Entrez les valeurs représentant respectivement x-offset , y-offset , blur-radius , spread et color (les quatre premières valeurs ont des unités de longueur), par exemple 2px 2px 5px #333 . Entrez box-shadow: et répétez la deuxième étape.-webkit-box-shadow: . Entrez les valeurs représentant respectivement x-offset , y-offset , blur-radius , spread et color (les quatre premières valeurs ont des unités de longueur), par exemple 2px 2px 5px #333 . Entrez inset après les deux points, puis entrez un espace (vous pouvez également saisir inset et un espace avant la deuxième étape). Entrez box-shadow: et répétez les étapes deux et trois.-webkit-box-shadow: . Entrez les valeurs représentant respectivement x-offset , y-offset , blur-radius , spread et color (les quatre premières valeurs ont des unités de longueur), par exemple 2px 2px 5px #333 . Si nécessaire, incluez le mot-clé inset . Entrez une virgule. Répétez la deuxième étape avec des valeurs différentes pour chaque attribut. Entrez box-shadow: et répétez les étapes deux à quatre.-webkit-box-shadow: none; Entrez box-shadow: none; Remarque : les valeurs x-offset , y-offset et spread peuvent être des entiers positifs ou négatifs. La valeur blur-radius doit être un entier positif. Les trois valeurs peuvent être nulles. Le mot-clé inset permet de placer l'ombre à l'intérieur de l'élément.
Plusieurs arrière-plans peuvent être appliqués à presque tous les éléments.
<!DOCTYPEhtml> <html lang="fr"> <tête> <meta charset="utf-8" /> <title>Plusieurs arrière-plans</title> <link rel="stylesheet" href="css/multiple-backgrounds.css" /> </tête> <corps> <div class="ciel-nuit"> <h1>Dans le ciel nocturne...</h1> </div> </corps> </html>
...
.ciel nocturne {
couleur d'arrière-plan : marine /* couleur de repli */
image de fond :
url(../img/ufo.png),
url(../img/stars.png),
url(../img/stars.png),
url(../img/sky.png);
position d'arrière-plan :
50% 102%,
100% -150px,
0 -150px,
50 % 100 % ;
répétition d'arrière-plan :
pas de répétition,
pas de répétition,
pas de répétition,
répéter-x ;
hauteur : 300px ;
margin : 25px auto 0 ; /* légèrement différent du livre */
rembourrage supérieur : 36 px ;
largeur : 75 % ;
}Appliquer plusieurs images d'arrière-plan à un seul élément (pas besoin d'utiliser les préfixes du fournisseur)
Entrezbackground-color: b , où b est la couleur d'arrière-plan alternative que vous souhaitez appliquer à l'élément. Entrez background-image: u , où u est une liste d' url référencées par des chemins absolus ou relatifs (séparés par des virgules. Pour les navigateurs prenant en charge plusieurs arrière-plans, les images sont superposées et se chevauchent. La première de la liste est séparée par des virgules. . image en haut. ) Entrez background-position: p , où p est une paire de x-offset et y-offset (peut être positif ou négatif ; avec une unité de longueur ou un mot-clé, tel que center top ) Ensembles, séparés par des virgules. . Pour chaque url spécifiée à la deuxième étape, il doit y avoir un ensemble de x-offset et y-offset . Entrez background-repeat: r , où r est repeat-x , repeat-y ou no-repeat , séparée par des virgules, une valeur pour chaque url spécifiée dans la deuxième étape.Pour plusieurs images d'arrière-plan, la syntaxe standard courte peut être utilisée, en utilisant des virgules pour séparer chaque ensemble de paramètres d'arrière-plan. L'avantage de cette représentation est que les développeurs peuvent spécifier soit une couleur d'arrière-plan alternative, soit une image pour les navigateurs plus anciens.
.ciel nocturne {
/* solution de secours avec à la fois une couleur et une image */
arrière-plan : url marine (../img/ufo.png) en bas au centre sans répétition ;
/* pour les navigateurs compatibles */
arrière-plan:
url(../img/ufo.png) pas de répétition 50% 102%,
url(../img/stars.png) sans répétition 100% -150px,
url(../img/stars.png) sans répétition 0 -150px,
url(../img/sky.png) répéter-x 50 % 100 % ;
hauteur : 300px ;
marge : 25px auto 0 ;
rembourrage supérieur : 36 px ;
largeur : 75 % ;
}<!DOCTYPEhtml> <html lang="fr"> <tête> <meta charset="utf-8" /> <title>Arrière-plans dégradés</title> <link rel="stylesheet" href="css/gradients.css" /> </tête> <corps> <div class="vertical-down"><p>par défaut</p></div> <div class="vertical-up"><p>vers le haut</p></div> <div class="horizontal-rt"><p>à droite</p></div> <div class="horizontal-lt"><p>à gauche</p></div> <div class="angle-bot-rt"><p>vers <br />en bas à droite</p></div> <div class="angle-bot-lt"><p>vers <br />en bas à gauche</p></div> <div class="angle-top-rt"><p>en haut à droite</p></div> <div class="angle-top-lt"><p>en haut à gauche</p></div> <div class="angle-120deg"><p>120deg</p></div> <div class="angle-290deg"><p>290deg</p></div> <section classe="radial"> <div class="radial-center"><p>par défaut</p></div> <div class="radial-top"><p>en haut</p></div> <div class="radial-size-1"><p>100px, 50px</p></div> <div class="radial-size-2"><p>70 % 90 % en <br />en bas à gauche</p></div> <div class="radial-various-1"><p>divers 1</p></div> <div class="radial-various-2"><p>divers 2</p></div> </section> <section class="color-stops"> <div class="color-stops-1"><p>jaune 10%, vert</p></div> <div class="color-stops-2"><p>en haut à droite, jaune, <br>vert 70 %, <br>bleu</p></div> </section> </corps> </html>
corps {
padding : 1,25em /* 20px/16px, donc 20px de chaque côté */
taille de police : 100 % ;
}
div{
flotteur : gauche ;
hauteur : 150px ;
marge : 10px ;
largeur : 150 px ;
}
p{
couleur : #fff ;
police : gras 1,25em/1 sans empattement /* 20px/16px */
rembourrage supérieur : 1,65em ; /* 33px/16px */
alignement du texte : centre ;
}
/* REMARQUE : les dégradés ci-dessous sont dans la syntaxe CSS3 standard. Les navigateurs qui les prennent en charge sont Chrome 26+, Firefox 16+, IE 10+ et Opera 12.10+. Voir gradients-with-browser-prefixes.css pour la même chose. effets de dégradé, mais avec le code de préfixe du fournisseur également inclus afin que les dégradés fonctionnent sur plusieurs navigateurs plus anciens. Un arrière-plan avec un commentaire « de secours » est la couleur qui s'affichera dans les navigateurs. qui ne prennent pas en charge la syntaxe du dégradé. Vous pouvez également utiliser une image d'arrière-plan comme solution de secours (seule ou en combinaison avec une couleur). Par exemple, background: red url(gradient-image.jpg) no-repeat; .*/
/* GRADIENTS LINÉAIRES
------------------------------------------ */
/* :::: Verticale :::: */
.vertical-bas {
arrière-plan : argent /* solution de repli */
/* dégradé par défaut, vous n'avez donc pas besoin de spécifier "vers le bas" avant les couleurs */
arrière-plan : dégradé linéaire (argent, noir) ;
}
.vertical-up {
fond : argent ;
arrière-plan : dégradé linéaire (vers le haut, argent, noir) ;
}
/* :::: Horizontal :::: */
.horizontal-rt {
arrière-plan : argent /* solution de repli */
arrière-plan : dégradé linéaire (à droite, argent, noir) ;
}
.horizontal-lt {
arrière-plan : argent /* solution de repli */
arrière-plan : dégradé linéaire (à gauche, argent, noir) ;
}
/* :::: Angles diagonaux :::: */
/* Remarque : les figures de la page 377 montrent l'aqua comme couleur de repli, mais je l'ai changée
en marine en dessous car le texte blanc sera plus facile à lire sur un fond marine */.
.angle-bot-rt {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (en bas à droite, aqua, marine) ;
}
.angle-bot-lt {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (en bas à gauche, aqua, marine) ;
}
.angle-haut-rt {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (en haut à droite, aqua, marine) ;
}
.angle-top-lt {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (en haut à gauche, aqua, marine) ;
}
/* :::: Angles via degrés :::: */
.angle-120deg {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (120 degrés, aqua, marine) ;
}
.angle-290deg {
arrière-plan : marine /* solution de repli */
arrière-plan : dégradé linéaire (290 degrés, aqua, marine) ;
}
/* GRADIENTS RADIAL
------------------------------------------ */
/* :::: Radial :::: */
.radial p {
texte-ombre : 0 0 3px #000 ;
}
.radial-centre {
arrière-plan : rouge /* solution de repli */
arrière-plan : dégradé radial (jaune, rouge) ; /* par défaut */
}
.radial-top {
arrière-plan : rouge ; /* solution de repli */
arrière-plan : dégradé radial (en haut, jaune, rouge) ;
}
.radial-taille-1 {
arrière-plan : rouge ; /* solution de repli */
arrière-plan : dégradé radial (100px 50px, jaune, rouge) ;
}
.radial-taille-2 {
arrière-plan : rouge /* solution de repli */
fond : dégradé radial (70 % 90 % en bas à gauche, jaune, rouge) ;
}
.radial-divers-1 {
arrière-plan : rouge ; /* solution de repli */
arrière-plan : dégradé radial (côté le plus proche à 70 px 60 px, jaune, citron vert, rouge) ;
}
.radial-divers-2 {
arrière-plan : rouge ; /* solution de repli */
arrière-plan : dégradé radial (30px 30px à 65 % 70 %, jaune, citron vert, rouge) ;
}
/* GRADIENTS LINÉAIRES AVEC STOPS DE COULEUR
------------------------------------------ */
.color-stops div {
marge inférieure : 30 px ;
}
.color-stops p {
rembourrage supérieur : 25 px ;
texte-ombre : 0 0 3px #000 ;
}
.color-stops-2 p {
taille de police : 18 px ;
hauteur de ligne : 1,05 ;
}
.color-stops-1 {
arrière-plan : vert ; /* solution de repli */
fond : dégradé linéaire (jaune 10 %, vert) ;
}
.color-stops-2 {
arrière-plan : vert ; /* solution de repli */
arrière-plan : dégradé linéaire (en haut à droite, jaune, vert 70 %, bleu) ;
} Entrez background: color ou background-color: color , où color peut être un nombre hexadécimal, une valeur RVB ou tout autre nom de couleur pris en charge. Les images peuvent également être utilisées. Il est préférable de ne pas utiliser les valeurs RGBA, HSL ou HSLA comme couleurs d'arrière-plan de secours (ne vous inquiétez pas si vous ne prévoyez pas de prendre en charge IE), car IE8 et les versions précédentes ne le prennent pas en charge.
background: linear-gradient( . Si vous souhaitez que la direction du dégradé soit de haut en bas (la direction par défaut), vous pouvez ignorer cette étape. Ajoutez une virgule après la direction de saisie et les directions font référence to top , to right , to bottom right , to top right , etc. Ou ajoutez une virgule après la direction de saisie, où la direction fait référence à la valeur de l'angle (telle que 45deg , 107deg , etc.). Définir la couleur du dégradé en fonction de la "couleur spécifiée" mentionnée plus loin );background: radial-gradient( . Spécifiez la forme du dégradé. Si vous souhaitez spécifier la taille, vous pouvez la déterminer vous-même en fonction de la taille spécifiée à la troisième étape. Sinon, entrez circle ou ellipse . Spécifiez la taille du dégradé Si vous souhaitez que la taille soit la valeur spécifiée automatiquement (la valeur par défaut est ·coin le plus éloigné·, le coin le plus éloigné), sinon entrez une valeur de longueur représentant la largeur et la hauteur du dégradé (telle que 200px ou 7em ) ou un. paire de valeurs représentant la largeur et la hauteur ( 390px 175px ou 60% 85% ) Notez que si une seule valeur est utilisée, la valeur ne peut pas être un pourcentage ni saisir closest-side , farthest-side , closest-corner ou farthest-corner . Ces mots-clés représentent jusqu'où le dégradé peut s'étendre par rapport à son centre. Les limites déterminent la taille du dégradé at right Vous pouvez ignorer cette étape si vous souhaitez que le dégradé commence at top centre de l'élément. at bottom left , at top right , etc. pour représenter la valeur de la position centrale du dégradé. Ou entrez une paire de coordonnées représentant la position centrale du dégradé, en commençant par at , par exemple at 200px 43px , at 30% 40% , at 50% -10px , etc. Définir la couleur du dégradé ); compléter le dégradé. Utilisez l'attribut opacity pour modifier la transparence d'un élément. La méthode consiste à saisir opacity: x , où x représente l'opacité de l'élément (deux décimales, sans unité).
La valeur par défaut de opacity est 1 (complètement opaque) et la plage est comprise 0~1 .
En utilisant l'attribut opacity et le pseudo-attribut :hover , vous pouvez produire des effets intéressants et pratiques. Par exemple, img { opacity: .75; } peut définir l'image sur une opacité de 75 % par défaut, img:hover { opacity: 1; } peut rendre l'élément opaque lorsque l'utilisateur le survole. Cet effet est souvent observé lors de la liaison de miniatures à des versions en taille réelle. Pour les visiteurs, la lévitation renforce le mouvement de l'image.
L'attribut opacity et la couleur d'arrière-plan transparente définie à l'aide de RGBA ou HSLA sont deux concepts faciles à confondre. opacity affecte l'ensemble de l'élément (y compris son contenu), tandis que background-color: rgba(128,0,64,.6); un tel paramètre n'affecte que la transparence de l'arrière-plan.
Utiliser :before et :after est un excellent moyen d’ajouter des effets de conception incroyables à vos pages. Ils peuvent être combinés avec l’attribut content pour créer ce que l’on appelle du contenu généré. Le contenu généré fait référence au contenu créé via CSS plutôt que HTML.
... <p>Cette zone est l'un des espaces les plus tranquilles de la Villa. Alors que je me promenais, profitant de l'ombre fournie par les sycomores et les lauriers et bercé par les éclaboussures d'eau de deux fontaines sculpturales, je n'ai pas pu m'empêcher de penser … href="victoria.html" class="more">Lire la suite</a></p> ...
/* Le contenu généré */
.plus :après {
contenu: " "";
} Grâce au code ci-dessus, l'élément avec class="more" peut afficher une double flèche après lui. S'il doit être modifié à l'avenir, il vous suffit de modifier la classe .more sans modifier un grand nombre de pages HTML.
Le texte s'affiche rapidement dans le navigateur, mais les images ont tendance à ralentir le chargement des pages. Pour résoudre ce problème, vous pouvez combiner plusieurs images en une seule image d'arrière-plan ( sprite ), puis contrôler quelle partie de l'image est affichée via CSS, à l'aide de l'attribut background-position .
.documents li {
marge supérieure : 0,45 em ;
}
/* Chaque lien dans le HTML a cette classe */
.icône {
affichage : bloc en ligne ;
hauteur de ligne : 1,1 ;
taille de police : .875em ;
min-height: 16px; /* défini sur la hauteur de l'icône pour qu'elle ne soit pas coupée du tout */
remplissage à gauche : 23 px ;
rembourrage supérieur : 2 px ;
/* permet de positionner l'icône de manière absolue par rapport aux éléments avec class="icon" dans le HTML */
position : relative ;
}
.icône :avant {
image d'arrière-plan : url(../img/sprite.png);
contenu: " ";
affichage : bloc ;
hauteur : 16 px ; /* hauteur de l'icône */
left: 0; /* changez ceci si vous souhaitez que l'icône apparaisse à un endroit différent */
position : absolue ;
largeur : 16 px ; /* largeur de l'icône */
top: 0; /* changez ceci si vous souhaitez que l'icône apparaisse à un endroit différent */
}
/* Décalage de la position de l'image sprite pour tout nom de fichier de document se terminant par .xls */
a[href$=".xls"]:avant {
position d'arrière-plan : -17px 0 ;
}
/* Décalage de la position de l'image sprite pour tout nom de fichier de document se terminant par .docx */
a[href$=".docx"]:avant {
position d'arrière-plan : -34px 0 ;
} sprite peuvent être appliqués à n’importe quel nombre d’éléments. Dans l'exemple ci-dessus, utilisez .icon:before pour obtenir l'effet souhaité. De cette façon, sprite est l'image de fond de l'espace généré par content: " "; . Réglez-le sur display: block; afin que vous puissiez définir la hauteur et la largeur en fonction de la taille de l'icône. Sans ces trois propriétés, l'image ne sera pas affichée. En utilisant background-position vous pouvez placer la bonne icône dans cette position.
Ceci conclut cet article sur l'utilisation de CSS3 pour améliorer les effets de style. Pour plus d'informations sur l'amélioration des effets de style CSS3, veuillez rechercher les articles précédents sur downcodes.com ou continuer à parcourir les articles connexes ci-dessous. J'espère que vous prendrez en charge les downcodes à l'avenir.