CSS3 Logo : Khéo léo với logo Magento

Nếu các bạn đã từng xây dựng trang bán hàng thương mại điện tử bằng Magento, thì ắt hẳn là đã quá quen thuộc với logo của hãng này. Hôm nay, qua bài viết này, mình sẽ chia sẻ cho các bạn cách thiết kế logo này để ứng dụng vào trong các trang bán hàng của mình, mà không cần phải dùng bất kì một hình ảnh, hay đoạn script nào, tất cả chỉ đơn thuần là CSS3.

Xem Demo | Download

HTML

Như tiêu đề bài viết, chúng ta sẽ phải khéo léo sắp đặt những phần tử html như sau :

<div id="magento">
   <div class="canvas">
      <div class="icon">
         <div class="magento1"></div>
         <div class="magento2"></div>
         <div class="magento3"></div>
         <div class="magento4"></div>
         <div class="magento5"></div>
         <div class="magento6"></div>
         <div class="magento7"></div>
         <div class="magento8"></div>
         <div class="magento9"></div>
         <div class="magento10"></div>
       </div>
   </div>
</div>

CSS

Và bây giờ chúng ta sẽ định dạng và sắp xếp từng phần tử như sau :

#magento .canvas {
    background: #fff;
}
#magento .icon {
    left:181px;
    height: 210px;
    top:65xpx;
    awidth: 178px;
}
.magento1 {
    background: #f6844e;
    height: 104px;
    position: absolute;
    top: 72px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    awidth: 89px;
}
.mozilla .magento1{
    left: 162px;
}
.magento2 {
    background: #f6844e;
    height: 104px;
    left: 89px;
    position: absolute;
    top: 72px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    awidth: 89px;
}
.magento3 {
    background: #f15c22;
    height: 104px;
    position: absolute;
    top: 124px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    awidth: 89px;
}
.mozilla .magento3 {
    left: 1px;
}
.magento4 {
    background: #f15c22;
    height: 104px;
    left: 89px;
    position: absolute;
    top: 124px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    awidth: 89px;
}
.magento5,.magento6,.magento7,.magento8,.magento9,.magento10 {
    background: #fff;
}
.magento5 {
    height: 105px;
    left: 22px;
    position: absolute;
    top: 118px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    awidth:24px;
}
.magento6 {
    height: 105px;
    left: 133px;
    position: absolute;
    top: 118px;
    -o-transform: skewy(-30deg);
    -moz-transform: skewy(-30deg);
    -ms-transform: skewy(-30deg);
    -webkit-transform: skewy(-30deg);
    transform: skewy(-30deg);
    awidth:24px;
}
.magento7 {
    height: 144px;
    left: 77px;
    position: absolute;
    top: 87px;
    -o-transform: skewy(30deg);
    -moz-transform: skewy(30deg);
    -ms-transform: skewy(30deg);
    -webkit-transform: skewy(30deg);
    transform: skewy(30deg);
    awidth:12px;
}
.mozilla .magento7 {
    left:78px;
}
.magento8 {
      height: 144px;
      left: 89px;
      position: absolute;
      top: 87px;
      -o-transform: skewy(-30deg);
      -moz-transform: skewy(-30deg);
      -ms-transform: skewy(-30deg);
      -webkit-transform: skewy(-30deg);
      transform: skewy(-30deg);
      awidth:12px;
}
.magento9 {
    height: 78px;
    left: 44px;
    position: absolute;
    top: 66px;
    -o-transform: rotate(60deg) skewy(30deg);
    -moz-transform: rotate(60deg) skewy(30deg);
    -ms-transform: rotate(60deg) skewy(30deg);
    -webkit-transform: rotate(60deg) skewy(30deg);
    transform: rotate(60deg) skewy(30deg);
    awidth:24px;
}
.magento10 {
    height: 78px;
    left: 111px;
    position: absolute;
    top: 66px;
    -o-transform: rotate(-60deg) skewy(-30deg);
    -moz-transform: rotate(-60deg) skewy(-30deg);
    -ms-transform: rotate(-60deg) skewy(-30deg);
    -webkit-transform: rotate(-60deg) skewy(-30deg);
    transform: rotate(-60deg) skewy(-30deg);
    awidth:24px;
}
/* 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;
}

Các bạn thấy có giống như tiêu đề bài viết mà mình đưa ra không ? Với logo này, chỉ cần khéo léo sắp đặt dựa trên các thuộc tính của CSS3 là chúng ta sẽ có ngay một logo như ý. Hãy tận dụng từ logo này, và tự sáng tạo cho mình một logo khác 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