Dans la leçon précédente, notre solution utilisait jquery pour créer une balise span. Dans cette conférence, nous utiliserons une meilleure solution, en utilisant :before et :after pseudo-classes . :before est souvent utilisé pour ajouter des éléments supplémentaires.
Ce qui suit est une galerie d'images représentée par une liste ul.
<ul class="gallery clip">
<li>
<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
</li>
<li>
<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-2.jpg" alt="image">
</li>
<li>
<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-1.jpg" alt="image">
</li></ul>Ce qui suit est le CSS défini pour .gallery. Une chose à noter ici est que nous devons définir la position pour la balise a sous . galerie : relative.
.gallery {
margin: 0 0 25px;
text-align: center;
}.gallery li {
display: inline-block;
margin: 5px;
list-style: none;
}.gallery a {
position: relative;
display: inline-block;
}Nous spécifierons une image d'arrière-plan en forme de trombone de 30 x 60 px pour l'élément :avant. Notez que j'ai défini l'attribut CSS content sur une valeur nulle. Sans attribut de contenu vide, le conteneur ne sera pas affiché.
.clip a:before {
position: absolute;
content: ' ';
top: -5px;
left: -4px;
width: 30px;
height: 60px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/paper-clip.png) no-repeat;
}En utilisant cette technique, vous pouvez ajouter n'importe quel masque à l'effet de l'image. Dans l'exemple ci-dessous, j'ai changé l'arrière-plan de l'image en bordure artistique.
.frame a:before {
position: absolute;
content: ' ';
top: -22px;
left: -23px;
width: 216px;
height: 166px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/frame.png) no-repeat;
}Nous pouvons utiliser des balises html5 pour créer des galeries plus avancées. Dans l'exemple suivant, nous utilisons
<ul class="gallery tape">
<li>
<figure>
<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-4.jpg" alt="image">
<figcaption>Image Caption</figcaption>
</figure>
</li>
<li>
<figure>
<img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-5.jpg" alt="image">
<figcaption>Image Caption</figcaption>
</figure>
</li>
<li>
<figure> <img src="http://webdesignerwall.com/wp-content/uploads/2012/09/sample-6.jpg" alt="image">
<figcaption>Image Caption</figcaption>
</figure>
</li></ul> J'en ai ajouté deux : avant en css, un pour l'élément
.tape li {
width: 170px;
padding: 5px;
margin: 15px 10px;
border: solid 1px #cac09f;
background: #fdf8e4;
text-align: center;
box-shadow: inset 0 1px rgba(255,255,255,.8), 0 1px 2px rgba(0,0,0,.2);
}.tape figure {
position: relative;
margin: 0;
}.tape a:before {
position: absolute;
content: ' ';
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/overlay.png) no-repeat;
}.tape figcaption {
font: 100%/120% Handlee, Arial, Helvetica, sans-serif;
color: #787568;
}.tape a:before {
position: absolute;
z-index: 2;
content: ' ';
top: -12px;
left: 50%;
width: 115px;
height: 32px;
margin-left: -57px;
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/tape.png) no-repeat;
}Dans cet exemple, j'ai utilisé un fond de texture en liège et j'ai utilisé transform Changement de propriété image.
.transform {
background: url(http://webdesignerwall.com/wp-content/uploads/2012/09/cork-bg.png);
padding: 25px;
border-radius: 10px;
box-shadow: inset 0 1px 5px rgba(0,0,0,.4);
}.transform li {
border: none;
}Afin de rendre la rotation de l'image plus aléatoire et naturelle, j'utilise le nième de type pour filtrer les images et définir différents angles de rotation pour différents images.
.transform li:nth-of-type(4n+1) {
-webkit-transform: rotate(2deg);
}.transform li:nth-of-type(2n) {
-webkit-transform: rotate(-1deg);
}.transform li:nth-of-type(4n+3) {
-webkit-transform: rotate(2deg);
}Bon, c'est tout pour le tutoriel d'aujourd'hui.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
