이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (2)

이전 강의에서 우리 솔루션은 jquery를 사용하여 스팬 태그를 생성했습니다. 이번 강의에서는 :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입니다. 여기서 주목해야 할 점은 에서 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 요소

:before 요소에 30 x 60px 클립 배경 이미지를 지정합니다. CSS 콘텐츠 속성 을 null 값으로 설정했습니다. 빈 콘텐츠 속성이 없으면 컨테이너가 표시되지 않습니다.

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

아트 테두리

이 기술을 사용하면 이미지에 마스킹 효과를 추가할 수 있습니다. 아래 예에서는 이미지 배경을 예술적인 테두리로 변경했습니다.

.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

이전에 두 개를 추가했습니다. 하나는

요소용이고 다른 하나는

마스크 이미지 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 {
    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을 사용하여 이미지를 필터링하고 이미지마다 다른 회전 각도를 설정합니다.

rree

자, 오늘의 튜토리얼은 여기까지입니다.

위 내용은 이미지 갤러리를 장식하기 위해 CSS를 사용하기 위한 HTML5 연습 코드 공유 (2)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!