Fotopersbureau LDB Prod Logo với thiết kế bằng CSS3

19/03/2014

Tiếp tục bổ sung vào những mẫu css3 logo, hôm nay chúng ta sẽ thiết kế một logo với độ khó tương đối dễ dàng, và cũng chỉ là dựa vào những tính năng quen thuộc của CSS3 là background gradient và thuộc tính transform.

fotopersbureau-ldb-prod-logo-voi-thiet-ke-bang-css3

Xem Demo | Download

HTML

<div id="fpldbp">
      <div class="canvas">
        <div class="icon">
          <div class="curve1">
            <div class="curve2">
              <div class="curve3">
                <div class="curve4">
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
</div>

fdfdf

CSS

#fpldbp .canvas {
    background-image: -ms-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -moz-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -o-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: -webkit-radial-gradient(0 0, #dde4e8, #b1d6e1);
    background-image: radial-gradient(0 0, #dde4e8, #b1d6e1);
}
  #fpldbp .icon {
    height: 198px;
    left: 170px;
    -ms-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
    top: 50px;
    width: 198px;
  }
  #fpldbp .icon * {
    border-radius: 50%;
    height: 138px;
    width: 142px;
  }
  #fpldbp .curve1 {
    left: 54px;
    top: 20px;
    box-shadow: 0 27px 0 yellow;
  }
  #fpldbp .icon .curve1 * {
    left: -15px;
    top: 35px;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
  }
  #fpldbp .curve1,
  #fpldbp .curve3 {
    box-shadow: 0 27px 0 #444;
  }
  #fpldbp .curve2,
  #fpldbp .curve4 {
    box-shadow: 0 27px 0 #009dd3;

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

Thế là xong, mình mong các bạn sẽ cảm thấy thích với mẫu logo này.

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é !