Маленький человечек в нижнем углу сайта

7171
6.2 из 10
Проголосовало: 11






Классный человечек в углу сайта, оченивайте не сильно жестоко моя первая работа!

Html код
Код
<div class="chel">
  <div style=" position: relative;" class="head">
  <div class="l_eye"></div>
  <div class="r_eye"></div>
  <div class="smile">)</div>
  </div>
  <div style=" position: relative;" class="body">
  <div class="l_arm"></div>
  <div class="r_arm"></div>
  <div class="l_leg"></div>
  <div class="r_leg"></div>
  </div>
</div>


CSS код
Код
.chel
{
  height: 404px; width: 334px;
  margin: 0 auto;
  bottom:-205px;
  right:-280px;  
  position:absolute;
}
.head {
width: 50px;
height: 50px;
background: #31527d;
border-radius: 100px;
-moz-border-radius: 100px;
-webkit-border-radius: 100px;
}
.r_eye {
  right: 10px;
}
.l_eye {
left: 10px;
}
.l_eye, .r_eye {
background: white;
width: 10px;
height: 10px;
position: absolute;
top:15px;
border-radius: 10px;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

   
.body {
width: 10px;
height: 75px;
top: 0px;
background: #31527d;
border-radius: 25px;
-webkit-border-radius: 25px;
-moz-border-radius: 25px;
left: 20px;
}

.l_arm, .r_arm {
height: 50px;
border-radius: 25px;
-moz-border-radius: 25px;
-webkit-border-radius: 25px;
top: 25px;
}
.l_arm, .r_arm, .l_leg, .r_leg {
width: 7px;
position: absolute;
background: #31527d;
}

.l_leg, .r_leg {
height: 40px;
top: 75px;
border-radius: 0 0 25px 25px;
-moz-border-radius: 0 0 25px 25px;
-webkit-border-radius: 0 0 25px 25px;
}

.l_arm {
left: -8px;
-webkit-transform: rotate(9deg) translate(-1px, -8px);
-transform: rotate(-5deg) translate(-4px, -8px);
-moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.r_arm {
right: -14px;
-webkit-transform: rotate(-10deg) translate(-4px, -8px);
-transform: rotate(-5deg) translate(-4px, -8px);
-moz-transform: rotate(-5deg) translate(-4px, -8px);
}

.l_leg {
left: 12px;
-webkit-transform: rotate(-10deg) translate(-4px, -8px);
-transform: rotate(-5deg) translate(-4px, -8px);
-moz-transform: rotate(-5deg) translate(-4px, -8px);
  -webkit-transition: all 1s ease-in;
}
.r_leg {
right: 4px;
-webkit-transform: rotate(10deg) translate(-4px, -8px);
-transform: rotate(-5deg) translate(-4px, -8px);
-moz-transform: rotate(-5deg) translate(-4px, -8px);
  -webkit-transition: all 1s ease-in;
}

.head:hover {
  -webkit-transform: rotate(-5deg) translate(-4px, -8px);
  -transform: rotate(-5deg) translate(-4px, -8px);
  -moz-transform: rotate(-5deg) translate(-4px, -8px);
}
.l_arm:hover{
  -webkit-transform: rotate(20deg) translate(-7px, -7px);
  -transform: rotate(15deg) translate(-14px, 0);
  -moz-transform: rotate(15deg) translate(-14px, 0);
  -webkit-transition: all 0.5s ease-in;  
}
.r_arm:hover{
  -webkit-transform: rotate(-21deg) translate(1px, -9px);
  -transform: rotate(-30deg) translate(30px, 0);
  -moz-transform: rotate(-30deg) translate(30px, 0);
  -webkit-transition: all 0.5s ease-in;
}

.smile {
color: white;
width: 10px;
height: 10px;
position: absolute;
top: 35px;
-webkit-transform: rotate(90deg) translate(0px, 2px);
-transform: rotate(-30deg) translate(30px, 0);
-moz-transform: rotate(-30deg) translate(30px, 0);
  font-size: 11px;
}
.smile {
left: 25px;
}  
Автор публикации: Загрузка
Загрузка
СёмКа, это его n материал
Источник: http://www.weto4ka.tk/
  • Всего комментариев: 7

Black_Sun
0
Black_Sun написал: Написано 25 Декабря 2012 в 15:21
Комментарий №7
Глазки и рот убрать и будет норм smile

Soul
+1
Soul написал: Написано 25 Декабря 2012 в 12:18
Комментарий №5
прикольно smile
но автору видно делать нечего

СёмКа
0
СёмКа написал: Написано 25 Декабря 2012 в 15:07
Комментарий №6
ага biggrin biggrin

Dimas777
-2
Dimas777 написал: Написано 25 Декабря 2012 в 08:06
Комментарий №4
Он не к чему только сайт засира** и CSS стили переполнять))То есть CSS символов MAX можно 50000 сувать((

Xgibit
0
Xgibit написал: Написано 25 Декабря 2012 в 00:14
Комментарий №1
а что он вообще делает?

Sevog
0
Sevog написал: Написано 25 Декабря 2012 в 01:01
Комментарий №2
Ничего) Ну это я по ксс посмотрел, то ничего наверное не делает. Это просто картинка по частям.

{WarhameR}_KENT
0
{WarhameR}_KENT написал: Написано 25 Декабря 2012 в 02:03
Комментарий №3
когда наводишь на голову то она отрывается.

  • Оставить комментарий:
Добавлять комментарии могут только зарегистрированные пользователи.
Регистрация | Вход
Меню сайта
Категории
Для помощи создания сайта uCoz 25
Скрипты и модификации для Ucoz 2116
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 431
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Добрый вечер.Подскажите,пожалуйста: как сделать, чтобы второй или третий набор смайлов заменить своими.
Вы сами себе пишите?
  • CbIPoK2513 написал:
  • Скрипт хорош, уже подстроил свой сайт под него :3
  • gefest35 написал:
  • Супер)))!пасиб за работу!!!
  • sasha2016tv написал:
  • Хороший скрипт
    Последние темы
    Опрос
    240
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 6
    Гостей: 5
    Пользователей: 1
    0
    Сегодня были
    Топ пользователей: