RSSPhát triển web

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.

social-icon

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 này 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ị.

ket-hop-nhieu-kieu-icon

2.1 Kích thước

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

kich-thuoc

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);
}

add-icon

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

Tags:

Nếu bạn thấy bài viết hữu ích, hãy nhấn +1 và các liên kết chia sẻ để website ngày càng phát triển hơn. Xin cám ơn bạn!

Nếu là khách, bạn phải đăng ký tài khoản và kích hoạt tài khoản để bình luận được hiển thị ở đây.
Thông tin kích hoạt gửi đến mail của bạn.

Tin mới hơn

Tin cũ hơn

Lên trên đầu