Partage de code pratique HTML5 pour utiliser CSS pour décorer des galeries d'images (2)

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.

HTML

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>

CSS

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;
}

　:élément avant

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;
}

Bordure artistique

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;
}

　HTML5Galerie

Nous pouvons utiliser des balises html5 pour créer des galeries plus avancées. Dans l'exemple suivant, nous utilisons

pour envelopper l'image et

pour contenir le titre de l'image.

<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>

CSS

J'en ai ajouté deux : avant en css, un pour l'élément

. L'image de masque overlay.png est utilisée sur figure:before, et l'image de bande est utilisée sur a:before.

.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;
}

Transformation CSS3

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;
}

　Nième de type

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!