04/10/2018, 20:02
Đẹp không tưởng với logo Pepsi được thiết kế bằng CSS3
Pepsi là loại thức uống có gas mà mình thất nhất, đặc biệt là khi ăn xong ổ bánh mì kẹp thịt rồi uống một lon pepsi thì không còn gì bằng ^^. Nói thế không có nghĩa là hôm nay mình chia sẻ cho các bạn món ăn ưa thích của mình, mà hôm nay, các bạn sẽ học được cách thiết kế logo của hãng nước ngọt ...
Pepsi là loại thức uống có gas mà mình thất nhất, đặc biệt là khi ăn xong ổ bánh mì kẹp thịt rồi uống một lon pepsi thì không còn gì bằng ^^. Nói thế không có nghĩa là hôm nay mình chia sẻ cho các bạn món ăn ưa thích của mình, mà hôm nay, các bạn sẽ học được cách thiết kế logo của hãng nước ngọt nổi tiếng trên thế giới này.
Xem Demo | Download
HTML
Khung html cần thiết cho việc thiết kế logo như sau :
<div id="pepsi">
<div class="canvas">
<div class="icon">
<div class="red1"></div>
<div class="red2"></div>
<div class="red3"></div>
<div class="blue1"></div>
<div class="blue2"></div>
<div class="blue3"></div>
<div class="white1"></div>
<div class="white2"></div>
<div class="drop1 drop"></div>
<div class="drop2 drop"></div>
<div class="drop3 drop"></div>
<div class="drop4 drop"></div>
<div class="drop5 drop"></div>
<div class="drop6 drop"></div>
</div>
</div>
</div>
CSS
Và sau đây là các định dạng css giúp các bạn thiết kế ra logo Pepsi
#pepsi .canvas {
background: #013668;
height: 304px;
awidth:540px;
}
#pepsi .icon {
background: white;
border-radius: 220px;
height: 220px;
left: 160px;
position: absolute;
top: 42px;
awidth: 220px;
}
#pepsi .red1,#pepsi .red2,#pepsi .red3 {
background: #ee3a43;
}
#pepsi .red1 {
border-radius: 200px 0 0 0;
clip: rect(0px 200px 79px 0);
height: 100px;
left:10px;
position: absolute;
top:10px;
awidth:100px;
}
#pepsi .red2 {
border-radius: 0 200px 0 0;
clip: rect(0px 200px 92px 0);
height: 100px;
left:110px;
position: absolute;
top:10px;
awidth:100px;
}
#pepsi .red3 {
border-radius:161px/117px;
clip: rect(103px 140px 117px 30px);
height:117px;
left: -17px;
position: absolute;
top: -15px;
awidth:161px;
}
#pepsi .blue1,#pepsi .blue2,#pepsi .blue3 {
background: #016aab;
}
#pepsi .blue1 {
border-radius: 0 0 0 200px;
bottom:10px;
clip: rect(8px 200px 100px 0);
height: 100px;
left:10px;
position: absolute;
awidth:100px;
}
#pepsi .blue2 {
border-radius: 0 0 200px 0;
bottom:10px;
clip: rect(22px 200px 100px 0);
height: 100px;
left:110px;
position: absolute;
awidth:100px;
}
#pepsi .blue3 {
border-radius:161px/117px;
clip: rect(0 132px 15px 29px);
height:117px;
left: 75px;
position: absolute;
top: 118px;
awidth:161px;
}
#pepsi .white1 {
background: #ffffff;
border-radius:161px/117px;
clip:rect(0 136px 22px 0);
height:117px;
left: 75px;
position: absolute;
top: 81px;
awidth:161px;
}
#pepsi .white2 {
background: #ffffff;
border-radius:161px/117px;
clip:rect(95px 136px 117px 0);
height:117px;
left: -17px;
position: absolute;
top: 22px;
awidth:161px;
}
#pepsi .drop {
border:1px solid rgba(0,0,0,0.3);
border-radius:26px/30px;
box-shadow:0 2px 2px rgba(0,0,0,0.3);
height: 30px;
opacity:0.6;
position: absolute;
awidth:26px;
}
#pepsi .drop:before {
background: -moz-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* FF3.6+ */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(255,255,255,1)),color-stop(30%,rgba(255,255,255,1)),color-stop(70%,rgba(255,255,255,0)),color-stop(100%,rgba(255,255,255,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* Opera11.10+ */
background: linear-gradient(top,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 30%,rgba(255,255,255,0) 70%,rgba(255,255,255,0) 100%); /* W3C */
border-radius:20px;
content: "drop";
height: 20px;
left:4px;
position: absolute;
text-indent: -9999px;
top:2px;
awidth:18px;
}
#pepsi .drop:after {
border-radius:26px;
background: -moz-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* FF3.6+ */
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,rgba(0,0,0,0)),color-stop(50%,rgba(0,0,0,0)),color-stop(100%,rgba(0,0,0,0.5))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* Opera11.10+ */
background: linear-gradient(top,rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,0.5) 100%); /* W3C */
box-shadow:0 2px 0 #fff;
content: "drop";
height: 24px;
left:1px;
position: absolute;
text-indent: -9999px;
top:3px;
awidth:24px;
}
#pepsi .drop1 {
left:80px;
top:80px;
}
#pepsi .drop2 {
left:33px;
top:50px;
-o-transform: scale(0.6);
-moz-transform: scale(0.6);
-ms-transform: scale(0.6);
-webkit-transform: scale(0.6);
transform: scale(0.6);
}
#pepsi .drop3 {
left:150px;
top:136px;
-o-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
#pepsi .drop4 {
left:145px;
top:169px;
}
#pepsi .drop5 {
left:130px;
top:26px;
-o-transform: scale(0.9);
-moz-transform: scale(0.9);
-ms-transform: scale(0.9);
-webkit-transform: scale(0.9);
transform: scale(0.9);
}
#pepsi .drop6 {
left:50px;
top:138px;
-o-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-webkit-transform: scale(0.7);
transform: scale(0.7);
}
/* general styles */
.canvas {
display: block;
overflow: hidden;
position: relative;
top: 0px;
text-indent:-9999px;
z-index: 10;
}
.icon, .icon * {
display: block;
position: absolute;
}
Hy vọng khi các bạn thiết kế logo này xong, các bạn cũng sẽ thấy thích nước uống có gas này cũng giống như mình (Mình không hề làm việc cho pepsi nhé ^^).
Chuyên Mục: Css
Bài viết được đăng bởi webmaster
