CSS3 Logo : Colorvivo

Hôm nay tâm trạng mình thật sự là phấn kích sau khi nhận được thư mời phỏng vấn từ lãnh sự quán Hoa Kỳ . Trong tâm trang đó, mình xin chia sẻ cho các bạn một logo đầy màu sắc được làm từ CSS3, đó là logo Colorvivo. Qua bài viết này, các bạn sẽ có thể tận dụng thuộc tính transform để sắp xếp các màu sắc thành các hình thù như ý.

Xem Demo | Download

HTML

Trước hết chúng ta cần khung html như sau:

<div id="colorvivo">
    <div class="monitor">
      <div class="canvas">
        <div class="icon">
          <div class="big-colors"></div>
          <div class="small-colors"></div>
          <div class="center">
            <div class="letter1">c</div>
            <div class="letter2">o</div>
            <div class="letter3">l</div>
            <div class="letter4">o</div>
            <div class="letter5">r</div>
            <div class="letter6">v</div>
            <div class="letter7">i</div>
            <div class="letter8">v</div>
            <div class="letter9">o</div>
          </div>
        </div>
      </div>
    </div>
</div>

CSS

Sau đó là chúng ta thêm màu và sắp xếp lại các phần tử html với đoạn css sau :

#colorvivo .canvas,
#colorvivo .center,
#colorvivo .letter1:after,
#colorvivo .letter2:after,
#colorvivo .letter4:after,
#colorvivo .letter9:after,
#colorvivo .letter1:before {
  background: #19171c;
}
#colorvivo .icon {
  border-radius: 50%;
  height: 178px;
  left: 183px;
  top: 61px;
  awidth: 178px;
}
#colorvivo .big-colors {
  box-shadow: 1px 8px 0px 2px #e20079      /* pink   */,
               6px -6px 0 4px #219cd3      /* blue   */,
               -9px -4px 0 4px #fcea1a     /* yellow */,
      0 0 100px 0px rgba(255,255,255,0.5)  /* glow   */;

  border-radius: 50%;
  height: 178px;
  awidth: 178px;
}
#colorvivo .small-colors {
  border-radius: 50%;
  box-shadow: -12px 11px 0 #e42c38      /* red    */,
              12px 2px 0 #003a85        /* indigo */,
              -2px -14px 0 #58ab28      /* green  */;
  height: 162px;
  left: 8px;
  -ms-transform: skew(2deg);
  -moz-transform: skew(2deg);
  -o-transform: skew(2deg);
  -webkit-transform: skew(2deg);
  transform: skew(2deg);
  top: 8px;
  awidth: 162px;
}
#colorvivo .center {
  border-radius: 50%;
  height: 178px;
  awidth: 178px;
}
#colorvivo .center * {
  background: #fff;
}
#colorvivo .letter1,
#colorvivo .letter2,
#colorvivo .letter4,
#colorvivo .letter9 {
  border-radius: 50%;
  height: 30px;
  awidth: 30px;
}
#colorvivo .letter1:after,
#colorvivo .letter2:after,
#colorvivo .letter4:after,
#colorvivo .letter9:after {
  border-radius: 50%;
  content: "";
  display: block;
  height: 18px;
  left: 8px;
  position: absolute;
  top: 6px;
  awidth: 14px;
}
#colorvivo .letter1,
#colorvivo .letter2,
#colorvivo .letter4 {
  top: 58px;
}
#colorvivo .letter1 {
  left: 28px;
}
#colorvivo .letter1:before {
  content: "";
  display: block;
  height: 8px;
  left: 20px;
  position: absolute;
  top: 11px;
  awidth: 10px;
}
#colorvivo .letter2 {
  left: 59px;
}
#colorvivo .letter4 {
  left:101px;
}
#colorvivo .letter9 {
  left: 108px;
  top: 90px;
}
#colorvivo .letter3,
#colorvivo .letter7 {
  height: 41px;
  awidth: 8px;
}
#colorvivo .letter3 {
  border-radius: 0 4px 0 0;
  left: 91px;
  top: 47px;
}
#colorvivo .letter7 {
  border-radius: 0 0 0 4px;
  left: 71px;
  top: 90px;
}
#colorvivo .letter5 {
  background: none;
  border: 8px solid #fff; /* you can change the color in one place */
  border-right: 0 none;
  border-bottom: 0 none;
  border-radius: 15px 0 0 0;
  height: 23px;
  left: 133px;
  top: 57px;
  awidth: 9px;
}
#colorvivo .letter6,
#colorvivo .letter6:before,
#colorvivo .letter8,
#colorvivo .letter8:before {
  background: white;
  height: 30px;
  -ms-transform: skew(-18deg);
  -moz-transform: skew(-18deg);
  -o-transform: skew(-18deg);
  -webkit-transform: skew(-18deg);
  transform: skew(-18deg);
  top: 90px;
  awidth: 8px;
}
#colorvivo .letter6:before,
#colorvivo .letter8:before {
  content: "";
  display: block;
  left: -11px;
  top: 0;
  position: absolute;
  -ms-transform: skew(33deg);
  -moz-transform: skew(33deg);
  -o-transform: skew(33deg);
  -webkit-transform: skew(33deg);
  transform: skew(33deg);
}
#colorvivo .letter6 {
  left: 56px;
}
#colorvivo .letter8 {
  left: 97px;
}
/* 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;
}

Mình hy vọng các bạn sẽ cảm thấy thích với mẫu logo mà mình giới thiệu cho các bạn ngày hôm nay. Nhớ chia sẻ cho mình và mọi người những mấu logo làm bằng css3 mà các bạn biết nhé.

Chuyên Mục: Css

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