Tập thiết kế logo bằng CSS3 với logo CBS

Chào tất cả các bạn, tối nay mình sẽ tiếp tục giới thiệu cho các bạn một mẫu logo làm bằng CSS3. Có lẽ các bạn sẽ thắc mắc vì sao mình lại post quá nhiều bài viết về logo, thực ra cũng dễ hiểu thôi, bởi vì theo mình, cách học tốt nhất là thực hành. Càng thực hành , càng làm nhiều, thì các bạn mới có thể nâng cao khả năng CSS của mình.

Qua bài viết ngày hôm nay, các bạn sẽ hiểu và nắm rõ về cách sử dụng thuộc tính background gradient cũng box-shadow.

Xem Demo | Download

HTML

<div id="cbs">
   <div class="canvas">
      <div class="icon">
          <div class="cbs1"></div>
      </div>
   </div>
</div>

CSS

Và việc thiết kế bằng CSS sẽ được thực hiện đơn giản như sau :

#cbs .icon {
    border-radius: 50%;
    height: 200px;
    left: 170px;
    top: 50px;
    awidth: 200px;
}
#cbs .icon:before,
#cbs .icon:after
{
    background-color: #134b95;
    border-radius: 50%;
    content: "#";
    display: block;
    height: 204px;
    left: -2px;
    overflow: hidden;
    position: absolute;
    text-indent: -9999px;
    awidth: 204px;
}
#cbs .icon:before {
    box-shadow: inset 0 2px 2px rgba(0,0,0,0.5);
    clip: rect(0 200px 58px 0);
    top: 44px;
}
#cbs .icon:after {
    clip: rect(146px 200px 204px 0);
    top: -44px;
}
#cbs .cbs1 {
    border-radius: 50%;
    display: block;
    height: 106px;
    left: 47px;
    top: 47px;
    awidth: 106px;
    z-index:10;
}
#cbs .icon,
#cbs .cbs1 {
    background: #ccc;
    background-image: -ms-radial-gradient(top right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    background-image: -moz-radial-gradient(top right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    background-image: -o-radial-gradient(top right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    background-image: -webkit-radial-gradient(top right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    background-image: radial-gradient(top right, rgba(255,255,255,0.9) 0%, rgba(255,255,255,0) 50%);
    box-shadow: inset 0 3px 1px rgba(255,255,255,0.5), inset 0 -2px 0 #aaa, 0 2px 2px rgba(0,0,0,0.5), inset 0 -3px 2px rgba(255,255,255,0.5);
}
/* 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;
}

Đây là một trong những mẫu CSS3 logo đơn giản  và dễ thực hiện nhất, và cũng là bài học lý tưởng cho các bạn tìm hiểu sâu về những thuộc tính mới có trong CSS3.

Chuyên Mục: Css

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