Nếu các bạn đang tìm hiểu về các cách khai báo phần tử :before và :after, hoặc các thuộc tính CSS3 opacity và transform , CSS borders để vẽ các hình dạng nhất định thì bài viết mà mình giới thiệu hôm nay sẽ giúp các bạn hiểu rõ hơn về những thuộc tính này. Trong bài viết này, chúng ta sẽ vẽ logo HTML5 và logo này sẽ chỉ được thiết kế bằng CSS thuần.
.jpg "Thiết kế HTML 5 Logo với CSS")
HTML
Sau đây là khung html chuẩn cho việc tạo logo HTML5
<div id="wrapper">
<div id="five">
<div class="top"></div>
<div class="left-top"></div>
<div class="middle"></div>
<div class="right"></div>
<div class="bottom"></div>
<div class="left-bottom"></div>
</div>
<div class="inner"></div>
<div class="inner left"></div>
<div class="inner left cover"></div>
</div>
CSS
Và chi tiết thiết kế logo bằng CSS như sau :
h1
{
font: bold 90px 'arial black';
margin: 20px 0 0 0;
text-align: center;
}
p
{
text-align: center;
}
/**/
#wrapper
{
position: relative;
width: 340px;
margin: 10px auto 30px auto;
}
/**/
#five
{
position: absolute;
z-index: 1;
top: 0;
}
#five div, #five div:after
{
position: absolute;
background: #fff;
}
#five .left-top
{
width: 40px;
height: 130px;
top: 72px;
left: 70px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
#five .top
{
width: 90px;
height: 40px;
top: 72px;
left: 80px;
}
#five .top:after
{
content: '';
left: 85px;
top: 0;
height: 40px;
width: 110px;
-moz-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
#five .middle
{
width: 96px;
height: 40px;
top: 162px;
left: 75px;
}
#five .middle:after
{
content: '';
top: 0;
left: 96px;
width: 80px;
height: 40px;
}
#five .right
{
left: 225px;
top: 162px;
height: 125px;
width: 40px;
-moz-transform: skew(-5deg);
-webkit-transform: skew(-5deg);
-o-transform: skew(-5deg);
-ms-transform: skew(-5deg);
transform: skew(-5deg);
}
#five .bottom
{
width: 90px;
height: 40px;
top: 260px;
left: 87px;
-webkit-transform: rotate(14deg);
-moz-transform: rotate(14deg);
-o-transform: rotate(14deg);
-ms-transform: rotate(14deg);
transform: rotate(14deg);
}
#five .bottom:after
{
content: '';
left: 73px;
top: -19px;
height: 40px;
width: 94px;
-webkit-transform: rotate(-28deg);
-moz-transform: rotate(-28deg);
-o-transform: rotate(-28deg);
-ms-transform: rotate(-28deg);
transform: rotate(-28deg);
}
#five .left-bottom
{
width: 40px;
height: 65px;
top: 222px;
left: 80px;
-webkit-transform: skew(5deg);
-moz-transform: skew(5deg);
-o-transform: skew(5deg);
-ms-transform: skew(5deg);
transform: skew(5deg);
}
/**/
#wrapper:before
{
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #e34c26;
width: 280px;
}
#wrapper:after
{
content: '';
display: block;
/*280 total width */
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #e34c26;
width: 0;
margin-left: 30px;
}
/**/
.inner
{
position: absolute;
top: 0;
-moz-transform: scale(0.85);
-webkit-transform: scale(0.85);
-o-transform: scale(0.85);
-ms-transform: scale(0.85);
transform: scale(0.85);
}
.inner:before
{
content: '';
display: block;
/*340 total width */
border-left: 30px solid transparent;
border-right: 30px solid transparent;
border-top: 345px solid #f06529;
width: 280px;
}
.inner:after
{
content: '';
display: block;
/*280 total width */
border-left: 140px solid transparent;
border-right: 140px solid transparent;
border-top: 40px solid #f06529;
width: 0;
margin-left: 30px;
position: relative;
top: -1px; /* Fix spacing */
}
/**/
.inner.left
{
width: 170px; /* half from the 340px total width */
overflow: hidden;
-moz-transform: scale(1);
-webkit-transform: scale(1);
-o-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
}
.inner.left:before
{
border-top-color: #e34c26;
}
.inner.left:after
{
border-top-color: #e34c26;
}
/**/
.inner.left.cover
{
z-index: 10000;
opacity: 0.1;
}
Mình mong là qua bài viết này, các bạn sẽ có thể tự thiết kế thêm nhiều logo mới.