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


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

7131
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 24
Скрипты и модификации для Ucoz 2101
Шаблоны форумов Ucoz 28
Шаблоны сайтов Ucoz 429
Авторство Webo4ki 309
php скрипты для ucoz 57
Графика для uCoz 40
Мини-чат
Последние комментарии
Поставил ваш код он начинает считать от 0 до 100 и останавливаеться. я думал он будет в случайном порядке показывать цыфры
как поставить свою ссылку и логотип
  • Сатурн-1 написал:
  • Похвально.
  • Winston888 написал:
  • Я не говорил что делаю только скрипты. Я делаю шаблоны, скрипты, адаптации с разных движков под ucoz и на оборот + я ещё и сам рисую. В данный момент занимаюсь дизайном для webo4ka сам рисую сам верстаю.
  • Сатурн-1 написал:
  • Заметь, мы делаем почти одну и ту же работу.
    Ты - скрипты, я -шаблон. И каждый делает это бесплатно, НО
    ты делаешь скрипты без шаблона, я делаю шаблон без скриптов (не считая основных).
    Я тоже могу сказать что твои скрипты не идеальны, но не буду т.к. даже не знаю какие из всех существующих твои.
    Поэтому ты не сравнивай скрипты и шаблоны да еще и на Ucoz'e, мы же не на хакатоне каком нибудь.
    Последние темы
    Опрос
    205
    А
    Р
    Что произойдёт: $("#...
    Статистика
    Анализ интернет сайта
    0
    онлайн
    0
    наших
    0
    чужих
    Онлайн всего: 1
    Гостей: 1
    Пользователей: 0
    0
    Сегодня были
    Топ пользователей: