HTML5 実践 - CSS を使用して画像ギャラリーを装飾するためのコード共有 (2)

前回の講義では、私たちのソリューションはjqueryを使用してspanタグを作成しました。この講義では、:before と :after 疑似クラス を使用する、より良い解決策を使用します。 :before は、要素を追加するためによく使用されます。

HTML

以下は、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

以下は.galleryに設定したCSSです。ここで注意すべき点は、.gallery配下のaタグにposition: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;
}

:before element

:before 要素に 30 x 60px のペーパークリップの背景画像を指定します。 CSS コンテンツ 属性 を null 値に設定していることに注意してください。 content 属性が空でない場合、コンテナは表示されません。

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

Artistic Border

このテクニックを利用すると、画像に任意のマスキング効果を追加できます。以下の例では、画像の背景を芸術的な境界線に変更しました。

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

HTML5ギャラリー

html5タグを使用して、より高度なギャラリーを作成できます。次の例では、

を使用して画像をラップし、

を使用して画像のタイトルを含めます。

<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

以前に CSS に 2 つ追加しました。1 つは

要素用、もう 1 つは

要素用です。マスク画像のoverlay.pngはfigure:beforeで使用され、テープ画像は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;
}

CSS3 Transform

この例では、コルクテクスチャの背景を使用し、transform属性を使用して画像を変形させました。

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

Nth-of-Type

画像の回転をよりランダムで自然にするために、nth-of-typeを使用して画像をフィルタリングし、画像ごとに異なる回転角度を設定します。

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

さて、今日のチュートリアルはここまでです。

以上がHTML5 実践 - CSS を使用して画像ギャラリーを装飾するためのコード共有 (2)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。