Sự lan tỏa của internet và sức mạnh của Social Media Network ngày càng được thể hiện rõ nét hơn trong đời sống, nhất là những người làm SEO. Vậy thì bài viết này sẽ hướng dẫn các bạn tạo ra một bộ đếm những lượt like, share của các mạng xã hội nổi tiếng trên thế giới.
Đây là thành quả mà các bạn sẽ làm được
OK, chúng ta bắt tay vào thiết kế CSS cho nó nhé.
Đầu tiên chúng ta cần vài thẻ div có cấu trúc như bên dưới.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id='wrapper'> <div class='cool_btn1 green'> <h1 class='top'>126 <i>Plays</i></h1> <h2>H</h2> </div> <div class='cool_btn1 teal'> <h1 class='top'>10k <i>Likes</i></h1> <h2>U</h2> </div> <div class='cool_btn1 blue'> <h1 class='top'>240 <i>Likes</i></h1> <h2>G</h2> </div> <div class='cool_btn1 orange'> <h1 class='top'>21k <i>Points</i></h1> <h2>)</h2> </div> </div> |
Viết mã css nhé.
Đầu tiên là đoạn khai báo yêu cầu include thêm font chữ bên ngoài vào.
|
1 2 3 4 5 6 7 8 |
@import url('http://fonts.googleapis.com/css?family=Lobster'); @font-face { font-family: 'ModernPictogramsNormal'; src: url("http://www.bradysammons.com/modernpics/modernpics-webfont.eot"); src: url("http://www.bradysammons.com/modernpics/modernpics-webfont.eot?#iefix") format("embedded-opentype"), url("http://www.bradysammons.com/modernpics/modernpics-webfont.woff") format("woff"), url("http://www.bradysammons.com/modernpics/modernpics-webfont.ttf") format("truetype"), url("http://www.bradysammons.com/modernpics/modernpics-webfont.svg#ModernPictogramsNormal") format("svg"); font-weight: normal; font-style: normal; } |
Thứ hai là css cho phần body, tạo nền cho phần Badges của chúng ta
|
1 2 3 4 |
body { background: url("http://www.vancouverad.com/bgimg/img/noise_pattern_with_crosslines.png") repeat; font-family: helvetica, arial, sans-serif; } |
Thứ ba là căn giữa cái thẻ div có id=”wrapper”
|
1 2 3 4 |
#wrapper { width: 900px; margin: 10px auto 0 auto; } |
Thứ tư, đoạn CSS sau sẽ giúp bạn tạo ra một hình tròn có màu nền từ xám tới trắng của thẻ div có class là cool_btn1
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
.cool_btn1 { width: 190px; height: 190px; margin: 15px 15px 15px 15px; position: relative; -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; border-radius: 200px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #fafafa), color-stop(50%, #e3e3e3), color-stop(50%, #888888), color-stop(100%, #666666)); background-image: -webkit-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: -moz-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: -o-linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); background-image: linear-gradient(#fafafa, #e3e3e3 50%, #888888 50%, #666666); -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3); display: inline-block; } |
Thứ năm là style cho các thẻ heading bên trong
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.cool_btn1 h1 { text-align: center; font-size: 50px; margin: 20px 0 0 0; color: #333; text-shadow: 0 1px 0 white, 0 -1px 0 rgba(0, 0, 0, 0.5); font-family: 'Lobster', cursive; font-weight: normal; line-height: 1; } /* line 40, ../sass/screen.scss */ .cool_btn1 h1 i { display: block; font-style: normal; font-size: 14px; font-weight: bold; font-family: helvetica, arial, sans-serif; text-shadow: none; } /* line 49, ../sass/screen.scss */ .cool_btn1 h2 { font-family: 'ModernPictogramsNormal', Arial, sans-serif; font-weight: normal; text-align: center; font-size: 90px; line-height: 1; margin: 15px 0 0 0; text-shadow: 0 1px 0 rgba(255, 255, 255, 0.4), 0 -1px 0px rgba(0, 0, 0, 0.8); color: #fafafa; } |
Thứ sáu, tạo viền cho hình tròn của chúng ta,
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 |
.cool_btn1:after { content: ""; width: 200px; height: 200px; display: block; position: absolute; left: -5px; top: -5px; z-index: -1; -webkit-border-radius: 200px; -moz-border-radius: 200px; -ms-border-radius: 200px; -o-border-radius: 200px; border-radius: 200px; background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #cecece), color-stop(100%, #e7e7e7)); background-image: -webkit-linear-gradient(#cecece, #e7e7e7); background-image: -moz-linear-gradient(#cecece, #e7e7e7); background-image: -o-linear-gradient(#cecece, #e7e7e7); background-image: linear-gradient(#cecece, #e7e7e7); -webkit-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); -moz-box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); box-shadow: 0 1px 0px rgba(255, 255, 255, 0.9); } |
Thứ bẩy, khởi tạo các giá trị mầu cho hiệu ứng css thêm đẹp
|
1 2 3 4 5 6 7 8 9 10 11 |
.cool_btn1.blue, .cool_btn1.teal, .cool_btn1.orange, .cool_btn1.green { -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.4s; -moz-transition-duration: 0.4s; -o-transition-duration: 0.4s; transition-duration: 0.4s; cursor: pointer; } |
Giờ là tới các class định dạng màu cho từng hình tròn của chúng ta. Đầu tiên là blue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.cool_btn1.blue { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #577fbd), color-stop(100%, #274281)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #577fbd 50%, #274281); } /* line 86, ../sass/screen.scss */ .cool_btn1.blue h1 { color: #4265A3; } /* line 89, ../sass/screen.scss */ .cool_btn1.blue h2 { color: #1E3261; } |
Màu teal
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
/* line 93, ../sass/screen.scss */ .cool_btn1.teal { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #11b8fe), color-stop(100%, #0187b8)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #11b8fe 50%, #0187b8); } /* line 95, ../sass/screen.scss */ .cool_btn1.teal h1 { color: #149EDB; } /* line 98, ../sass/screen.scss */ .cool_btn1.teal h2 { color: #0C6186; } |
Màu cam
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.cool_btn1.orange { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #f49e23), color-stop(100%, #e27619)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #f49e23 50%, #e27619); } /* line 104, ../sass/screen.scss */ .cool_btn1.orange h1 { color: #e27619; } /* line 107, ../sass/screen.scss */ .cool_btn1.orange h2 { color: #AC5509; } |
màu xanh lá
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
.cool_btn1.green { background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #d5d5d5), color-stop(50%, #ffffff), color-stop(50%, #2fd51d), color-stop(100%, #00a01e)); background-image: -webkit-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: -moz-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: -o-linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); background-image: linear-gradient(#d5d5d5, #ffffff 50%, #2fd51d 50%, #00a01e); } /* line 113, ../sass/screen.scss */ .cool_btn1.green h1 { color: #00a01e; } /* line 116, ../sass/screen.scss */ .cool_btn1.green h2 { color: #006312; } |
Tiếp theo là hiệu ứng di chuột vào hình tròn sẽ làm nổi bật hình tròn đó lên
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
.cool_btn1.orange:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(255, 174, 0, 0.8); } /* line 128, ../sass/screen.scss */ .cool_btn1.teal:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(16, 216, 252, 0.8); } /* line 133, ../sass/screen.scss */ .cool_btn1.blue:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(43, 95, 187, 0.8); } /* line 138, ../sass/screen.scss */ .cool_btn1.green:hover { -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); -moz-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3), inset 0px 2px 5px rgba(0, 0, 0, 0.3), 0 0 28px 6px rgba(47, 217, 29, 0.8); } |
Và cuối cùng là tự động thay đổi kích thước của id=”wrapper”
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
@media screen and (max-width: 860px) { /* line 147, ../sass/screen.scss */ #wrapper { width: 700px; } } @media screen and (max-width: 740px) { /* line 152, ../sass/screen.scss */ #wrapper { width: 480px; } } @media screen and (max-width: 440px) { /* line 157, ../sass/screen.scss */ #wrapper { width: 370px; text-align: center; } } |
Vậy là xong rồi đó, hy vọng bài viết này sẽ giúp bạn thỏa sức sáng tạo và design cho blog của mình thêm đẹp hơn. Chúc bạn thành công!
bài viết được chia sẻ bởi
Sharecodeweb.com
