Tạo biểu tượng (icons) theo phong cách IOS7 với CSS3

Nếu các bạn đang dùng iPhone hay iPad và đã cập nhật phiên bản IOS 7, chắc hẳn là đã quen thuộc với kiểu thiết kế đẹp và lạ mắt của các biểu tượng (icons) trên màn hình.  Kiểu thiết kế này được gọi là Squircles, nó là sự kết hợp giữa hình vuông và hình tròn.

Nếu các bạn cũng muốn áp dụng kiểu thiết kế này cho các biểu tượng mạng xã hội dùng cho website hay blog của mình, thì chỉ cần làm theo từng bước đơn giản mà mình giới thiệu trong bài viết này là okie.

Xem Demo | Download

Bước 1 : HTML

Đầu tiên , chúng ta sẽ cần bộ khung để làm các icon như sau :

<div class="icons">
	<a href="#" class="tw"><i class="icon-twitter"></i></a>
	<a href="#" class="fb"><i class="icon-facebook"></i></a>
	<a href="#" class="gp"><i class="icon-google-plus"></i></a>
	<a href="#" class="ig"><i class="icon-instagram"></i></a>
	<a href="#" class="li"><i class="icon-linkedin"></i></a>
	<a href="#" class="yt"><i class="icon-youtube"></i></a>
</div>

Bước 2 : CSS

Chúng ta sẽ dùng font để tạo icon, nếu bạn nào chưa biết kỹ thuật này thì xem  bài viết Tạo icon từ bộ Font Awesome bằng CSS là sẽ rõ. Chúng ta sẽ chèn font vào file css như sau :

/*Importing custom fonts*/
@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.css);
@import url(https://fonts.googleapis.com/css?family=Montserrat);

Kế tiếp là định hình cho các icons

.icons {
	awidth: 220px;
	margin: 0 auto;
}
.icons i {
	display: block;
	font-size: 24px;
	line-height: 50px; awidth: 50px;
	text-align: center;
}
.icons a {
	text-decoration: none;
	color: white;
	display: inline-block;
	margin: 10px;
	border-radius: 12px;
	position: relative;
}

/*Now we will create fish-eye shapes using pseudo elements and clip them to add a curve to the sides of the icons*/
.icons a:before, .icons a:after {
	content: ';
	position: absolute; left: 0; top: 0;
	awidth: 100%; height: 100%;
	background: inherit;
	border-radius: 100%; /*circle*/
	/*time to transform the circle into fish-eye shape. iOS7 style now.*/
	transform: scaleX(2) scaleY(1.05);
	/*clipping the left and right sides - 17px from the left and right*/
	clip: rect(0, 33px, 50px, 17px);
	/*pushing it behind the icon*/
	z-index: -1;
}
/*duplicating the :before element and rotating it 90deg and swapping the X/Y transforms*/
.icons a:after {
	transform: scaleY(2) scaleX(1.05) rotate(90deg);
}

Cuối cùng , chúng ta thêm từng màu riêng biệt cho các icons nữa là xong.

/*colors*/
.tw {background: #00ACF0;}
.fb {background: #3B5997;}
.gp {background: #DB4F48;}
.ig {background: #447397;}
.li {background: #007DB8;}
.yt {background: #D12E2E;}

Rất đơn giản và dễ thực hiện phải không nào, việc của các bạn bây giờ là chỉ cần copy đoạn css trong bài viết này, và áp dụng ngay cho các icon trên website của mình là xong.

Chúc các bạn thành công !

Chuyên Mục: Css

Bài viết được đăng bởi webmaster