Thiết Kế Logo Adobe Với CSS3

Nếu các bạn là fan của hãng phần mềm nổi tiếng thế giới Adobe thì chắc hẳn là quá quen thuộc với 2 phần mềm tạo ảnh Photoshop và Illustrator. Và với 2 phần mềm này, chúng ta có thể thiết kế nhiều mẫu logo tuyệt đẹp. Nhưng hôm nay , chúng ta sẽ không thiết kế logo bằng những phần mềm này, mà chỉ làm bằng CSS3, và đặc biệt hơn nữa là thiết kế ngay cho chính logo của hãng Adobe.

Xem Demo | Download

HTML

Đầu tiên, chúng ta cần khung html cho việc tạo logo Adobe như sau:

<div id="adobe">
   <div class="canvas">
      <div class="icon">
          <div class="adobe1"></div>
          <div class="adobe2"></div>
          <div class="adobe3"></div>
      </div>
  </div>
</div>

CSS

Và chi tiết của từng khung được thiết kế bằng css như sau :

/* general styles */
.canvas {
    display: block;
    overflow: hidden;
    position: relative;
    top: 0px;
    text-indent:-9999px;
    z-index: 10;
	 height: 304px;
    awidth:540px;
}
.icon, .icon * {
    display: block;
    position: absolute;
}

#adobe .canvas {
    background: #df2624;
}
#adobe .icon {
    height: 250px;
    left: 124px;
    overflow: hidden;
    top: 27px;
    awidth:292px;
}
.adobe1,
.adobe2,
.adobe3 {
    background: #fff;
    position: absolute;
}
.adobe1 {
    height: 305px;
    left:55px;
    top:-26px;
    -o-transform:rotate(23deg);
    -moz-transform:rotate(23deg);
    -ms-transform:rotate(23deg);
    -webkit-transform:rotate(23deg);
    transform:rotate(23deg);
    awidth:70px;
}
.adobe2 {
    height: 305px;
    left:162px;
    top:-26px;
    -o-transform:rotate(-23deg);
    -moz-transform:rotate(-23deg);
    -ms-transform:rotate(-23deg);
    -webkit-transform:rotate(-23deg);
    transform:rotate(-23deg);
    awidth:70px;
}
.adobe3 {
    height: 50px;
    left: 62px;
    top: 200px;
    -o-transform:skewx(22deg);
    -moz-transform:skewx(22deg);
    -ms-transform:skewx(22deg);
    -webkit-transform:skewx(22deg);
    transform:skewx(22deg);
    awidth: 93px;
}

Hy vọng các bạn sẽ thấy thích với mẫu logo của hãng adobe này, nhớ chia sẻ cho mình những logo mà các bạn có thể tự thiết kế được nhé.

Chuyên Mục: Css

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