Thiết kế logo Dribbble bằng CSS3 & HTML

Logo Dribbble cũng là một trong những logo thường được tích hợp vào trong các mẫu thiết kế web, nếu bạn không muốn sử dụng hình ảnh của logo này, thì có thể dùng html và css3 để dựng hình lên logo này. Trong bài viết này, mình sẽ chia sẻ cho các bạn cách thiết kế logo Dribbble với chỉ bằng CSS3 thuần.

Xem Demo | Download

HTML

<div id="dribbble">
  <div class="canvas">
      <div class="icon">
          <div class="dribbble1"></div>
          <div class="dribbble2"></div>
          <div class="dribbble3"></div>
          <div class="dribbble4"></div>
          <div class="dribbble5"></div>
       </div>
   </div>
</div>

CSS

#dribbble .canvas {
    background: #434950;
}
#dribbble .icon {
    background: #f05e95;
    border-radius:50%;
    height: 250px;
    left: 120px;
    top: 2px;
    awidth: 250px;
    -ms-transform:scale(0.7);
    -moz-transform:scale(0.7);
    -o-transform:scale(0.7);
    -webkit-transform:scale(0.7);
    transform:scale(0.7);
}
.dribbble1 {
    background: #F58FB5;
    border-radius: 50%;
    height: 132px;
    left: 37px;
    top: 8px;
    -o-transform: rotate(12deg);
    -moz-transform: rotate(12deg);
    -ms-transform: rotate(12deg);
    -webkit-transform: rotate(12deg);
    transform: rotate(12deg);
    awidth: 200px;
}
#dribbble .icon, .dribbble2, .dribbble3, .dribbble4 {
    border:25px solid #cb386f;
}
.dribbble2 {
    border-radius: 50%;
    clip: rect(0px,200px,140px,0);
    height: 309px;
    left: 53px;
    top: 108px;
    awidth: 356px;
}
.dribbble3 {
    border-radius: 50%;
    clip: rect(230px, 390px, 360px, 180px);
    height: 309px;
    left: -192px;
    top: -234px;
    awidth: 353px;
}
.dribbble4 {
    border-radius: 50%;
    clip: rect(0, 1088px, 184px, 850px);
    height: 1164px;
    left: -1054px;
    top: -207px;
    -o-transform: rotate(30deg);
    -moz-transform: rotate(30deg);
    -ms-transform: rotate(30deg);
    -webkit-transform: rotate(30deg);
    transform: rotate(30deg);
    awidth: 1248px;
}
/* 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;
}

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

Hy vọng qua việc thiết kế logo Dribbble này, các bạn sẽ học hỏi được nhiều và biết cách sử dụng tốt những thuộc tính mà CSS3 mang lại.

Chuyên Mục: Css

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