Dùng CSS tạo nút lệnh mạng xã hội

Các nút lệnh mạng xã hội bằng CSS không đơn thuần chỉ là biểu tượng của CSS3 và HTML5 mà các icon này sử dụng kỹ thuật ảnh nền truyền thống với mục tiêu cung cấp CSS linh hoạt và phù hợp hơn có thể áp dụng vào các dạng thiết kế, các ứng dụng và theme. Về cơ bản, đây là 1 stylesheet chứa nhiều dạng thiết kế, cho phép hiển thị nhiều dạng button (nút lệnh) bằng cách kết hợp với các lớp trong CSS.

1. Cách thực hiện

Để áp dụng các icon mạng xã hội CSS vào website thì tải file css-social-button.zip về và áp file social-icons.css vào site:

<link href="/social-buttons.css" rel="stylesheet">

Tùy chọn A:

Chúng ta cần thêm 1 nút lệnh mạng xã hội (sb) và 1 icon (ví dụ: twitter, facebook, rss,..) vào thẻ <a>, sử dụng tùy chọn này nếu chúng ta muốn mỗi nút lệnh hiển thị theo từng kiểu riêng biệt.

<a href="#" class="sb orange  twitter">Twitter</a>

<a href="#" class="sb blue  facebook">Facebook</a> 

Tùy chọn B:

Một class .sb có thể được đặt trong thẻ <p>, <div> hoặc <ul>, còn các icon (twitter, facebook, rss,..) phải được đặt trong thẻ <a>, sử dụng tùy chọn này nếu chúng ta muốn các nút lệnh có cùng 1 kiểu hiển thị.

<p class="sb gradient blue">

              <a  href="#" class="twitter">Twitter</a>

              <a  href="#" class="facebook">Facebook</a>

</p>

<ul class="sb circle gray  text">

                <li><a  href="#" class="twitter">Twitter</a></li>

                <li><a  href="#" class="facebook">Facebook</a></li>

</ul>

2. Các lớp CSS sẵn có

Sau đây là danh sách các lớp CSS có sẵn, chúng ta có thể chỉ định nhiều lớp vì chúng rất linh hoạt. Chúng ta cũng có thể trộn lẫn và kết hợp các kiểu để cho ra nhiều kiểu hiển thị.

2.1 Kích thước

Mặc định: 34 px
Nhỏ: 28 px
Lớn: 42 px

2.2 Màu sắc

Xanh dương (blue)
Tím (purple)
Đỏ (red)
Xanh lá (green)
Cam (orange)
Nâu (brown)
Đen (black)
Xám (gray)
Xám nhạt (light-gray)
Xanh dương nhạt (light-blue)
Tím nhạt (light-purple)
Hồng (pink)
Xanh lá nhạt (light-green)
Vàng (yellow)

2.3 Kiểu hiển thị

Mi: kiểu nhỏ, không nền, không viền
Flat: không bo góc, không đổ bóng (phẳng)
Circle: kiểu vòng tròn
Embossed: kiểu nổi
Pressed: dạng nút nhấn
Thick-border: có đường viền dày
No-border: không viền
No-shadow: không đổ bóng
Gradient: lớp đổ bóng phía sau phần tử
Glossy: lớp đổ bóng phía trước phần tử
Text: hiển thị icon dạng text

2.4 Icon

Twitter
Facebook
Hình trái tim
In (biểu tượng của linkedin)
Biểu tượng của pinterest
Podcast
Rss
Share
Hình ngôi sao
Vimeo

3. Cách thức add icon

Vì có quá nhiều mạng xã hội mà chúng ta chỉ có thể include vài icon trong file social-icons.css, chúng ta có thể thêm nhiều icon theo mẫu code CSS trong ví dụ sau đây:

a.sb.youtube {

    background-image: url(images/youtube.png);

}

a.sb.email {

    background-image: url(images/email.png);

}

4. Ghi đè lên kích thước nút lệnh và màu nền

a.sb {

    width: 36px;

    height: 36px;

    background-color: #666;

}

5. Thêm các Gradient tùy chỉnh

Chúng ta có thể tạo thêm nhiều Gradient có tại đây. Lưu ý, các gradient SVG sử dụng được trong Internet Explorer 9 nhưng lại không hỗ trợ cho gradient CSS3.

a.sb.gradient.custom:after {

    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2I4YzZkZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiM2ZDg4YjciIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);

    background-image: -moz-linear-gradient(top,  #b8c6df 0%, #6d88b7 100%);

    background-image: -webkit-linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);

    background-image: linear-gradient(top,  #b8c6df 0%,#6d88b7 100%);

}

6. Cách tạo style riêng

Chúng ta có thể ghi đè lên file social-icon.css mặc định để tạo style riêng cho mình.

/* custom icon */

a.sb.custom {

    width: 80px;

    height: 80px;

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

}

a.sb.custom:after {

    background-image: url(images/custom-bg.png);

    -webkit-border-radius: 15px;

    -moz-border-radius: 15px;

    border-radius: 15px;

}

/* custom icon blue */

a.sb.custom.blue {

    border-color: #96a8af;

}

a.sb.custom.blue:after {

    background-image: url(images/custom-bg-blue.png);

}

/* custom icon pink */

a.sb.custom.pink {

    border-color: #b0a1aa;

}

a.sb.custom.pink:after {

    background-image: url(images/custom-bg-pink.png);

}

/* custom icon background images */

a.sb.custom.retweet {

    background-image: url(images/custom-icon-retweet.png);

}

a.sb.custom.photo {

    background-image: url(images/custom-icon-photo.png);

}

a.sb.custom.comment {

    background-image: url(images/custom-icon-comment.png);

}

7. Khả năng tương thích trình duyệt

Các style cơ bản có thể tương thích trên các trình duyệt, các hiệu ứng trong CSS3 như: rounded corners, gradient, glossy, pressed, and embossed tương thích trên các trình duyệt Chrome, Firefox, Safari và IE9

Theo danwep.vn