CSS3 Vẽ ếch xanh thật dễ thương

Hôm trước lọ mọ online thấy hình con ếch xanh khá là đẹp và đơn giản, rồi tớ quyết định vẽ lại con ếch bằng CSS.

Vẽ ếch xanh với css3

[button link=”https://dl.dropbox.com/u/41171174/ech/index.html” color=”#AAAAAA” size=”3″ style=”1″ dark=”0″ radius=”auto” target=”self”]Demo[/button]
Trước tiên ta phân tích con ếch.

Vẽ ếch xanh với css3

Ta quan sát sơ bộ thấy con ếch được tạo thành chủ yếu tạo thành từ hình oval (bầu dục), để tạo một hình oval ta cho chiều cao gấp đôi chiều rộng và dùng thuộc tính border-radius của CSS3 để bo góc.
Ví dụ:

Vẽ ếch xanh với css3

#oval {
width: 200px;
 height: 100px;
 background: red;
 -moz-border-radius: 100px / 50px;
 -webkit-border-radius: 100px / 50px;
 border-radius: 100px / 50px;
}

Khi đó nó sẽ bo góc với bán kính chiều ngang là 100px,và bán kính chiều dọc là 50px(ta có thể thay bằng 50%) và khi ta áp dụng cho 1 hình vuông khi bo góc 50% thì ta được 1 hình tròn.
Lòng đen của con mắt phải (giống y hình pacman-phần này dài ko tiện giải thích).

Vẽ ếch xanh với css3

#pacman {
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-top: 40px solid red;
border-left: 40px solid red;
border-bottom: 40px solid red;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
}

Để tạo các bộ phận đối xứng ta xoay nó 1 góc 180 độ với thuộc tính transform:

transform: rotate(180deg);
-moz-transform:rotate(180deg); /* cho FF */
-webkit-transform:rotate(180deg); /* cho các trình duyệt webkit */

Ngoài ra ta sử dung position để căn chỉnh và selector ntd-child để lựa chọn các đối tượng.

Code HTML

</pre>
<div class="ech">
<div class="dau">
<div class="mattrai">
<div class="dongtu">
<div class="longden"></div>
</div>
</div>
<div class="matphai">
<div class="dongtu">
<div class="longden"></div>
</div>
</div>
<div class="mieng">
<div class="ma-trai"></div>
<div class="mieng-giua"></div>
<div class="ma-phai"></div>
</div>
</div>
<div class="than">
<div class="bung"></div>
<div class="taytrai">
<div class="ngontay"></div>
<div class="ngontay"></div>
<div class="ngontay"></div>
</div>
<div class="tayphai">
<div class="ngontay"></div>
<div class="ngontay"></div>
<div class="ngontay"></div>
</div>
<div class="chantrai">
<div class="ngonchan"></div>
<div class="”ngonchan”"></div>
<div class="ngonchan"></div>
</div>
<div class="chanphai">
<div class="ngonchan"></div>
<div class="ngonchan"></div>
<div class="ngonchan"></div>
</div>
</div>
</div>
<pre>

CSS

.ech{
margin: 100px;
}
.dau{//đầu là 1 hình oval
position: relative;
background: #55d400;
width:500px;
height: 250px;
-moz-border-radius: 250px / 125px;
-webkit-border-radius: 100px / 50px;
border-radius: 250px / 125px;
}
.mattrai,.matphai{
border-radius: 150px;
-moz-border-radius: 150px;
-webkit-border-radius: 150px;
width: 150px;
height: 150px;
background: #338000;
position: absolute;
}
.mattrai{
top: -50px;
left: 50px;
}
.matphai{
top: -54px;
left: 293px;
}
.dongtu{
border-radius: 120px;
background: #fff;
width: 120px;
height: 120px;
position:absolute;
}
.mattrai .dongtu{
top: 12px;
left: 22px;
}
.matphai .dongtu{
top: 12px;
left: 10px;
}
.longden{
width: 0px;
height: 0px;
border-right: 40px solid transparent;
border-top: 40px solid #000;
border-left: 40px solid #000;
border-bottom: 40px solid #000;
border-top-left-radius: 40px;
border-top-right-radius: 40px;
border-bottom-left-radius: 40px;
border-bottom-right-radius: 40px;
position: absolute;
}
.mattrai .longden{ /* xoay lòng đen của mắt phải 1 góc 180 độ ta có mắt trái */
top: 17px;
left: 30px;
transform: rotate(180deg);
-moz-transform:rotate(180deg);
-webkit-transform:rotate(180deg);
}
.matphai .longden{
top: 17px;
left: 10px;
}
.mieng{
position: relative;
}
.ma-trai,.ma-phai{
border-radius: 80px;
width: 80px;
height: 80px;
background: #fe0000;
position: absolute;
}
.ma-trai{
top: 120px;
left:90px;
}
.ma-phai{
top: 120px;
left:310px;
}
.mieng-giua{
border-radius: 200px;
width: 400px;
height: 400px;
border-bottom: 8px solid #000;
position: absolute;
top: -180px;
left: 40px;
z-index: 100;
clip: rect(360px auto auto auto);
}
.than{
background: #55d400;
width:400px;
height: 200px;
-moz-border-radius: 200px / 100px;
-webkit-border-radius: 200px / 100px;
border-radius: 200px / 100px;
position: absolute;
top: 300px;
left: 150px;
}
.bung{
background: #fff;
width:250px;
height: 125px;
-moz-border-radius: 125px / 62px;
-webkit-border-radius: 125px / 62px;
border-radius: 125px / 62px;
position: absolute;
top: 70px;
left: 70px;
}
.taytrai,.tayphai{
width: 80px;
height: 200px;
background-color: #338000;
border-radius: 50%;
position: absolute;
}
.taytrai{
transform: rotate(30deg); /* xoay  1 góc 30 độ để tạo tay trái */
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
top: 20px;
left: -35px;
}
.tayphai{
transform: rotate(-30deg); /* xoay  1 góc -30 độ để tạo tay phải */
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
top: 22px;
left: 340px;
}
.ngontay,.ngonchan{ /* vì ngón tay và ngón chân to bằng nhau nên dùng chung luôn */
width: 50px;
height: 50px;
border-radius: 50%;
background: #55d400;
position: relative;
}
.taytrai div:nth-child(1){ /* chọn phần tử div đầu tiên trong lớp taytrai- ngontay */
position: absolute;
top: 170px;
left: -20px;
}
.taytrai div:nth-child(2){
position: absolute;
top: 185px;
left: 10px;
}
.taytrai div:nth-child(3){
position: absolute;
top: 170px;
left: 42px;
}
.tayphai div:nth-child(1){
position: absolute;
top: 170px;
left: -20px;
}
.tayphai div:nth-child(2){
position: absolute;
top: 180px;
left: 10px;
}
.tayphai div:nth-child(3){
position: absolute;
top: 170px;
left: 42px;
}
.chantrai,.chanphai{
width: 80px;
height: 90px;
background-color: #338000;
border-radius: 50%;
position: absolute;
}
.chantrai{
transform: rotate(30deg);
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
top: 150px;
left: 70px;
z-index: -99;
}
.chanphai{
transform: rotate(-30deg);
-webkit-transform: rotate(-30deg);
-moz-transform: rotate(-30deg);
top: 150px;
left: 250px;
z-index: -99;
}
.chantrai div:nth-child(1){
position: absolute;
top: 70px;
left: -20px;
}
.chantrai div:nth-child(2){
position: absolute;
top: 80px;
left: 20px;
}
.chantrai div:nth-child(3){
position: absolute;
top: 50px;
left: 58px;
}
.chanphai div:nth-child(1){
position: absolute;
top: 50px;
left: -30px;
}
.chanphai div:nth-child(2){
position: absolute;
top: 70px;
left: 10px;
}
.chanphai div:nth-child(3){
position: absolute;
top: 60px;
left: 50px;
}

[button name=”Demo & Source” url=”https://dl.dropbox.com/u/41171174/ech/index.html&#8221; /]

2 thoughts on “CSS3 Vẽ ếch xanh thật dễ thương

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s