انجمنهای فارسی اوبونتو
کمک و پشتیبانی => برنامهسازی => نویسنده: عرفان علیزاده در 19 امرداد 1393، 07:01 بظ
-
html
<!DOCTYPE html>
<html>
<head>
<title>Tux - CSS</title>
<link rel="stylesheet" href="style.css"/>
</head>
<body>
<div class="container">
<div class="body">
<div class="r_eye">
<div class="r_eyeball">
<div class="r_inner_eb"></div>
</div>
</div>
<div class="l_eye">
<div class="l_eyeball">
<div class="l_inner_eb"></div>
</div>
</div>
<div class="beak"></div>
<div class="l_wing"></div>
<div class="r_wing"></div>
<div class="belly"></div>
<div class="l_paw"></div>
<div class="r_paw"></div>
</div>
</div>
</body>
</html>
css
body {
margin-left: 500px;
margin-top: 100px;
}
.body {
position: absolute;
height: 500px;
width: 500px;
background-color: black;
border-radius: 100% 100% 80% 80%
}
.l_eye {
left: 250px;
top: 70px;
position: absolute;
height: 150px;
width: 150px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.r_eye {
left: 110px;
top: 70px;
position: absolute;
height: 150px;
width: 150px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.l_eyeball {
left: 30px;
top: 70px;
position: absolute;
height: 40px;
width: 35px;
background-color: black;
border-radius: 100% 100% 100% 100%
}
.r_eyeball {
left: 95px;
top: 45px;
position: absolute;
height: 70px;
width: 35px;
background-color: black;
border-radius: 100% 100% 100% 100%
}
.l_inner_eb {
left: 12px;
top: 2px;
position: absolute;
height: 20px;
width: 17px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.r_inner_eb {
left: 11px;
top: 2px;
position: absolute;
height: 35px;
width: 17px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.beak {
position: absolute;
z-index: 2;
left: 225px;
top: 194px;
width:70px;
height:70px;
background:orange;
margin:3px 0 0 30px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transform-origin: 0 100%;
-moz-transform-origin: 0 100%;
-ms-transform-origin: 0 100%;
-o-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.r_wing {
left: 350px;
top: 270px;
z-index: 2;
position: absolute;
width:0;
height:0;
border-radius: 10% 10% 10% 10%;
border-right:10px solid transparent;
border-top:10px solid transparent;
border-left:50px solid black;
border-bottom:50px solid black;
}
.l_wing {
left: 110px;
top: 270px;
z-index: 2;
position: absolute;
width:0;
height:0;
border-radius: 10% 10% 10% 10%;
border-right:50px solid black;
border-top:10px solid transparent;
border-left:10px solid transparent;
border-bottom:50px solid black;
}
.belly {
left: 110px;
top: 250px;
position: absolute;
height: 300px;
width: 300px;
background-color: white;
border-radius: 100% 100% 100% 100%
}
.r_paw {
position: absolute;
left: 260px;
top: 420px;
height:90px;
width:180px;
border-radius: 90px 90px 10px 10px;
-moz-border-radius: 90px 90px 0 0;
-webkit-border-radius: 90px 90px 0 0;
background:orange;
}
.l_paw {
position: absolute;
left: 80px;
top: 420px;
height:90px;
width:180px;
border-radius: 90px 90px 10px 10px;
-moz-border-radius: 90px 90px 10px 10px;
-webkit-border-radius: 90px 90px 10px 10px;
background:orange;
}
(https://developer.cdn.mozilla.net/media/uploads/demos/g/t/gtcarlos/86a57388b5748371673b4214adc0024e/1359330764_screenshot_1.png)
-
ماشالا عجب حوصله ای داری