How to Create CSS3 Ribbons Without Images - Pure CSS Ribbon Shape - HTML CSS Wrap Box with Ribbon

Bài viết này mình sẽ giới thiệu tới các bạn một giao diện liên quan tới Ribbons Without Images, đơn giản bằng CSS3 và HTML ai cũng có thể thực hiện được.

Lorem ipsum dolor.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, minima.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, corrupti optio maiores?

<div id="text-effect">
    <div class="text-container">
        <h3 class="ribbon"><span>Lorem ipsum dolor.</span></h3>
        <div class="des">
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Temporibus, minima.</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae, corrupti optio maiores?</p>
        </div>
    </div>
</div>

#text-effect {
    width: 300px;
    height: 400px;
    background-color: #262626;
    box-sizing: border-box;
    border-radius: 10px;
    color: #fff;
    text-align: center;
    h3 {
        position: relative;
        margin:30px 0;
        font-weight: bold;
        width: calc(100% + 30px);
        left: -15px;
        text-shadow: 0 5px 10px rgba(0,0,0,.5);
        span {
            position: relative;
            z-index: 2;
            display: block;
            padding: 5px 0;
            background-color: #169fff;
        }
        &:before,&:after {
            position: absolute;
            content: "";
            width: 15px;
            height: 100%;
        }
        &:before {
            background-color: #085a93;
            top:0;
            z-index: 1;
            left: 0;
            -webkit-transform: skewY(-50deg);
            -ms-transform: skewY(-50deg);
            transform: skewY(-50deg);
            -webkit-transition: -webkit-transform .5s;
            transition: -webkit-transform .5s;
            -o-transition: transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
            -webkit-transform-origin: top left;-ms-transform-origin: top left;transform-origin: top left;
        }
        &:after {
            background-color: #085a93;
            top:0;
            z-index: 1;
            right: 0;
            -webkit-transform: skewY(-50deg);
            -ms-transform: skewY(-50deg);
            transform: skewY(-50deg);
            -webkit-transition: -webkit-transform .5s;
            transition: -webkit-transform .5s;
            -o-transition: transform .5s;
            transition: transform .5s;
            transition: transform .5s, -webkit-transform .5s;
            -webkit-transform-origin: top right;
            -ms-transform-origin: top right;
            transform-origin: top right;
        }
    }
    .des {
        padding: 0 15px;
    }
    // &:hover {
    //     h3 {
    //         &:before {
    //             -webkit-transform: skewY(50deg);
    //                 -ms-transform: skewY(50deg);
    //                     transform: skewY(50deg);
    //         }
    //         &:after {
    //             -webkit-transform: skewY(50deg);
    //                 -ms-transform: skewY(50deg);
    //                     transform: skewY(50deg);
    //         }
    //     }
    // }
}

0 thảo luận về How to Create CSS3 Ribbons Without Images - Pure CSS Ribbon Shape - HTML CSS Wrap Box with Ribbon

comment_blank
Hãy để lại #comment của bạn mình sẽ giải đáp thắc mắc một cách sớm nhất có thể.

Bài viết cùng chuyên mục