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

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.

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;
    awidth: 198px;
  }
  #fpldbp .icon * {
    border-radius: 50%;
    height: 138px;
    awidth: 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;
    awidth: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: Css

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