04/10/2018, 20:05
Tạo App Icon Weather với CSS3
Hôm nay mình tiếp tục giới thiệu với các bạn cách thiết kế một icon với CSS3, trong bài viết này, chúng ta sẽ bắt chước theo kiểu icon Weather mà chúng ta thường bắt gặp trên iPhone hay iPad. Xem Demo | Download HTML Để thiết kế icon, chúng ta cần khung chuẩn html như sau : ...
Hôm nay mình tiếp tục giới thiệu với các bạn cách thiết kế một icon với CSS3, trong bài viết này, chúng ta sẽ bắt chước theo kiểu icon Weather mà chúng ta thường bắt gặp trên iPhone hay iPad.
Xem Demo | Download
HTML
Để thiết kế icon, chúng ta cần khung chuẩn html như sau :
<div class="icon-large icon-weather">
<div class="sun">
</div>
<div class="cloud">
</div>
</div>
Chúng ta sẽ sử dụng font để làm icon, do đó các bạn cần khai báo thêm dòng sau bên trong thẻ <head>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Lato:100,300,400,700,900' rel='stylesheet' type='text/css'>
CSS
Đầu tiên, chúng ta sẽ định dạng chung cho icon với đoạn css sau :
.icon-large {
awidth: 220px;
height: 220px;
border-radius: 38px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.icon-weather {
overflow: hidden;
background: linear-gradient(to bottom, #1d61f0, #19d6fd);
}
Kế đến là hình mặt trời :
.sun {
awidth: 84px;
height: 84px;
border-radius: 50%;
background: linear-gradient(to bottom, #ffc600, #ffe828);
position: absolute;
top: 50px;
left: 30px;
}
Sau đó là mây :
.cloud {
position: absolute;
top: 85px;
left: 40px;
opacity: .95;
margin: 30px;
animation: float 3s linear infinite alternate;
}
.cloud:before, .cloud:after {
content: "";
display: block;
position: absolute;
}
.cloud:before {
awidth: 84px;
height: 48px;
background: #fff;
}
.cloud:after {
awidth: 48px;
height: 48px;
border-radius: 50%;
background: #fff;
position: absolute;
top: 0;
left: -24px;
box-shadow: 80px -9px 0 9px #fff,38px -25px 0 20px #fff;
}
Cuối cùng là hiệu ứng chuyển động cho mây :
@keyframes float {
0% {
transform: translate(-10px, 0);
opacity: .95;
}
100% {
transform: translate(30px, 0);
opacity: .65;
}
}
That’s it ! Mình hy vọng là qua bài viết này, các bạn có thể tự tay thiết kế riêng cho mình những icon khác và nâng cao kiến thức về CSS3 của mình.
Chúc các bạn thành công !
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
