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

لطفاً به انجمن‌ها وارد شده و یا جهت ورود ثبت‌نام نمائید

لطفاً جهت ورود نام کاربری و رمز عبورتان را وارد نمائید


ارائه ۲۴٫۱۰ اوبونتو منتشر شد 🎉

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

0 کاربر و 2 مهمان درحال مشاهده موضوع.

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

  • Jr. Member
  • *
  • ارسال: 83
  • جنسیت : پسر
    • برنامه نویسی و متن باز
لوگوی tux با html و css
« : 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

  • Full Member
  • *
  • ارسال: 112
پاسخ : لوگوی tux با html و css
« پاسخ #1 : 19 امرداد 1393، 08:52 ب‌ظ »
ماشالا عجب حوصله ای داری
به گمانم در هیچ جای دنیا دو الف مست را پیدا نخواهید کرد! البته بجز در سردابه های الف های سیاه بیشه!