نویسنده موضوع: لوگوی tux با html و css (دفعات بازدید: 1101 بار)

عرفان علیزاده · « : 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;
}

samis

ماشالا عجب حوصله ای داری

انجمن‌های فارسی اوبونتو

نویسنده موضوع: لوگوی tux با html و css (دفعات بازدید: 1101 بار)

عرفان علیزاده

لوگوی tux با html و css

samis

پاسخ : لوگوی tux با html و css