Hướng dẫn đổ bóng bằng CSS 3

Hướng dẫn cách đổ bóng CSS3 đơn giản:

Còn đây là HTML:

<aside id="wp_store_cta_simple-1" class="widget widget_wp_store_cta_simple">        <div class="cta-banner clearfix">
           
            <div class="banner-text">
                <div class="cta-title_simple main-title">Most popular woocommerce theme is here</div>
                <div class="cta-desc_simple">Download WPSTORE  theme now and move your business online. It is very simple, clean and feature rich theme.</div>
            </div>
            <div class="banner-btn">
                <a class="btn" href="#"><i class="fa fa-download"></i>Download Now</a>
            </div>
           
        </div>
</aside>

Các bạn làm theo các bước sau nhé:

.widget_wp_store_cta_simple {

1. background: #ffffff none repeat scroll 0 0;
2. border: 1px solid #ddd;
3. border-radius: 5px;
4. color: #444;
5. padding: 20px;
6. text-align: center;
7. position: relative;

}

.widget_wp_store_cta_simple::before {

1. right: inherit;
2. left: 0;
3. transform: rotate(-3deg);
4. -webkit-transform: rotate(-3deg);

}

style.css?ver=4.8.6:3423

.widget_wp_store_cta_simple::before, .widget_wp_store_cta_simple::after {

1. background: -webkit-radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%) repeat scroll 0 0;
2. background: -moz-radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%) repeat scroll 0 0;
3. background: -ms-radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%) repeat scroll 0 0;
4. background: -o-radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%) repeat scroll 0 0;
5. background: radial-gradient(rgba(0, 0, 0, 0.5), transparent 70%) repeat scroll 0 0;
6. border-radius: 100%;
7. content: "";
8. height: 40px;
9. position: absolute;
10. right: 0;
11. transform: rotate(3deg);
12. -webkit-transform: rotate(3deg);
13. width: 100%;
14. z-index: -1;
15. bottom: -13px;

}

.widget_wp_store_cta_simple {

1. background: #ffffff none repeat scroll 0 0;
2. border: 1px solid #ddd;
3. border-radius: 5px;
4. color: #444;
5. padding: 20px;
6. text-align: center;
7. position: relative;

}

Bạn đang đọc bài viết Hướng dẫn đổ bóng bằng CSS 3 tại Website: Học Lập Trình

• Tweet
• Share
• Share
• Share
• Share