Tạo App Icon Weather với CSS3

27/01/2015

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.

tao-app-icon-weather-voi-css3

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 {
  width: 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 {
  width: 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 {
  width: 84px;
  height: 48px;
  background: #fff;
}
.cloud:after {
  width: 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:

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

Nếu các bạn thấy bài viết hữu ích thì giúp mình Like cái nhé !