Designing CSS Lists 2019

Designing CSS Lists

HTML lists appear as a bulleted (small black circles) format. Using css we can make them stylish and effective.

Custom List Number Styling - 2018

Hôm nay mình giới thiệu về

Custom List Number Styling 2018 tuyệt đẹp. Các bạn có thể làm theo các bước dưới nhé. 100% thành công.

<main class="container">
    <section class="list-intro">
    </section>
    <section class="awesome-list">
        <div class="awesome-list-item"><span>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</span></div>
        <div class="awesome-list-item"><span>Illum placeat aut nam distinctio officiis dolore deset.</span></div>
        <div class="awesome-list-item"><span>Dignissimos aliquam, velit odio magni mollitia quos recusate.</span></div>
        <div class="awesome-list-item"><span>Labore quibusdam voluptatibus nobis minima reprehen.</span></div>
    </section>
</main>

<style>
.awesome-list {
    /* Create a new instance of a counter called "my-awesome-list" and set the counter to 0. */
    counter-reset: my-awesome-list;
    display: inline-block;
    margin-left: -3.4em;
    vertical-align: middle;
    position: relative;
}

.awesome-list-item {
     /* Increment the "my-awesome-list" counter for every list item. */
    counter-increment: my-awesome-list;
    margin: 1em 0;
    position: relative;
    width: 100%;
}

.awesome-list-item::before {
    /* Display the counter and set the list style for the list. */
    content: counter(my-awesome-list, decimal-leading-zero);
    background: #FFF;
    border: 10px solid #2C3E50;
    border-radius: 50%;
    color: #FFF;
    display: inline-block;
    font-weight: bold;
    font-size: 1.8em;
    line-height: 2.6em;
    position: relative;
    text-align: center;
    vertical-align: middle;
    width: 2.6em;
    z-index: 2;
}

/* Everything else is just basic styling. */

html, body {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
}

body {
    background: #ECF0F1;
    font-family: sans-serif;
    font-size: 15px;
    min-width: 600px;
}

.container {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    vertical-align: top;
}

.list-intro {
    background: #2C3E50;
    color: #FFF;
    box-sizing: border-box;
    display: inline-block;
    padding: 2em 4em 2em 2em;
    width: 100px;
    height: 100%;
    vertical-align: middle;
}

.list-intro > h1 {
    font-size: 1.4em;
}

.awesome-list-item > span {
    background: #8E44AD;
    border-radius: 4px;
    color: #FFF;
    display: inline-block;
    position: relative;
    line-height: 2em;
    margin: 0 0 0 -2em;
    padding: 1.2em 2em 1.2em 3em;
    vertical-align: middle;
}

.awesome-list-item > span::after {
    background: transparent;
    content: "";
    position: absolute;
    top: 24%;
    right: 2%;
    width: 50%;
    height: 50%;
    max-width: 300px;
    z-index: -1;
    box-shadow: 0 15px 10px rgba(0, 0, 0, 0.4);
    transform: rotate(3deg);
}

.awesome-list-item:nth-child(1)::before {
    background: #8E44AD;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #8E44AD;
}

.awesome-list-item:nth-child(1) > span {
    background: #8E44AD;
}

.awesome-list-item:nth-child(2)::before {
    background: #2980B9;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #2980B9;
}

.awesome-list-item:nth-child(2) > span {
    background: #2980B9;
}

.awesome-list-item:nth-child(3)::before {
    background: #27AE60;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #27AE60;
}

.awesome-list-item:nth-child(3) > span {
    background: #27AE60;
}

.awesome-list-item:nth-child(4)::before {
    background: #16A085;
    border-color: #2C3E50;
    box-shadow: 0 0 0 3px #16A085;
}
.awesome-list-item:nth-child(4) > span {
    background: #16A085;
}
</style>

/*===============================End======================*/ 

10 đoạn code đếm ngược (CountDown) sử dụng script cực đẹp, miễn phí

Code đếm ngược – Thời gian đếm ngược sử dụng cho các web site tổ chức sự kiện, đếm ngược thời gian bắt đầu sự kiện, cũng như sử dụng trong 1 số website bảo trì, bảo hành. Qua đó thể hiện sự chuyên nghiệp trong công việc.

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;

}

CSS3 - Hiệu ứng biểu tượng quay tròn khi rê chuột vào bằng css3

11:37

csscss stylecss3

Với CSS3 website của bạn sẽ trở lên lung linh, sinh động mà không cần đến sự trợ giúp của code javascript có thể làm website thêm chậm chạm khi phải load file javascript. Đoạn css đơn giản ở dưới sẽ giúp cho các biểu tượng như facebook, twitter, google plus... trên website của bạn trở lên thú vị khi rê chuột vào các biểu tượng đó

HTML Special Symbols - icon

The HTML codes listed on this page are only relevant for designers and developers. If you want to add any of these symbols to FaceBook, Twitter, etc., then you don't need the HTML code. Instead, copy the symbol itself, and paste it where you need it.

How to disable a link using only CSS?

The answer is already in the comments of the question. For more visibility, I am copying this solution here:

.not-active {
  pointer-events: none;
  cursor: default;
  text-decoration:none;
  color:black;
}

<a href="link.html" class="not-active">Link</a>

CSS3 Hướng dẫn cách làm bì thư và hình răng cưa

Hôm này mình tìm  thấy đoạn để làm phòng bì thư bằng css3  mình giới thiệu với các bạn nếu bạn nào muốn định dạng này.

Hình hộp thư

.et_bloom .et_bloom_optin_2.et_bloom_optin .et_bloom_border_letter {

1. background: repeating-linear-gradient(135deg,#719c28,#719c2810px,#fff 10px,#fff 20px,#f84d3b20px,#f84d3b 30px,#fff 30px,#fff40px)!important;
2. padding: 10px;

}

style.min.css:1

.et_bloom .et_bloom_optin .et_bloom_border_letter {

1. padding: 6px;
2. background: repeating-linear-gradient(135deg,#4fa8ed,#4fa8ed10px,#fff 10px,#fff 20px,#f84d3b20px,#f84d3b 30px,#fff 30px,#fff40px);

}

Hình răng cưa

.et_bloom .et_bloom_optin_2 .zigzag_edge .et_bloom_form_content:before {

1. background: linear-gradient(45deg,transparent 33.33%,#92c927 33.333%,#92c927 66.66%,transparent66.66%),linear-gradient(-45deg,transparent 33.33%,#92c927 33.33%,#92c927 66.66%,transparent66.66%)!important;
2. background-size: 20px 40px!important;

}

.et_bloom .zigzag_edge .et_bloom_form_content:before {:1

1. top: -10px;
2. left: 0;
3. width: 100%;
4. height: 10px;
5. background: linear-gradient(45deg,transparent 33.33%,#e9e9e9 33.333%,#e9e9e9 66.66%,transparent66.66%),linear-gradient(-45deg,transparent 33.33%,#e9e9e9 33.33%,#e9e9e9 66.66%,transparent 66.66%);
6. background-size: 20px 40px;

}