"Я - вебмастер!" Этап 2. Ликвидация жуков.

Страница: 1 2 »

Тема закрыта

Сообщений 1 страница 10 из 17

Поделиться103.12.12 19:21

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

"Я - вебмастер!" Этап 2. Ликвидация жуков.

Итак, начнем второй этап конкурса, уже знакомый прошлогодним участникам "Ликвидация жуков".

Напомню, что в этот этап прошли участники, набравшие 30 и более баллов в предыдущем. Это 7 участников.

45,5 баллов Рунный
44 балла faiko
43 балла Ghоst
42 балла Eri
41,5 баллов Leonheart
35,5 баллов Бу
34,5 баллов супернатурал

На этот раз этап "Ликвидация жуков" - сложнее, но и интереснее.
К нам в руки попал файл одного очень неумелого верстальщика. Непонятно, что он курил во время верстки, но ошибок допустил - ну ооочень много!
Что там в этом файле - никто не знает, верстальщика уволили и больше его никто не видел, так что секрет он раскрыть никому не успел.
Единственная возможность узнать что там - исправить все ошибки.

Для препарации Вам предложен html-файл со странным содержимым. Можно запустить его в браузере и увидеть следующее:

Явно что-то не то.
Единственное, в чем мы уверены, что здесь правильна эта строка (и файл по ссылке)

Код:

<link rel="stylesheet" href="https://forumstatic.ru/files/0007/e3/f7/18280.css">

потому что его писал наш лучший верстальщик и точно не мог допустить ошибок.

Правила этапа:
1. Скачайте файл и откройте его через любой html-редактор: http://sadhaka.moy.su/common/index.html
2. Исправьте все ошибки. За каждую найденную и исправленную ошибку Вы получите 1балл.
3. Но не переборщите - если наделаете ошибок сами - потеряете 2 балла.
4. Сохраните файл и пришлите мне ссылку на него в ЛС или опубликуйте в данной теме скрытым текстом с большим цензом постов.
4.1. Если после того, как Вы сдали свою работу Вы нашли еще ошибки - пришлите ее еще раз или запостите ниже. Проверяться будет ТОЛЬКО последний вариант.

Джекпот:
Те, кто восстановят изначальную картинку и пришлют ее скриншот (вместе с ссылкой), получат бонус в виде 50 баллов и подарок лично от меня (какой подарок - пока секрет, их будет много на выбор).
P.S. чтобы получить исходную картинку не обязательно исправлять совсем ВСЕ ошибки.
P.P.S. используйте для проверки современные браузеры. Желательно mozilla firefox, чтобы результат не отличался от моего.

Для самых любознательных:
Кроме того, Вы можете попытаться оптимизировать верстку (ввести новые классы, сгруппировать правила, вынести правила из встроенных во внутренние и т.п.), чтобы сделать код более читаемым и простым.
За каждый факт оптимизации Вы получите 10 баллов. Если Ваши старания приведут к ошибкам - потеряете 5 баллов.

Вопросы, обсуждения, мнения и т.п. оставляйте, пожалуйста, в соседней теме "Я - вебмастер!" To be continued... до завершения этапа и открытия данной темы для свободного общения.
Помните, что Вы не должны раскрывать ответы до окончания этапа.

Удачи! Не торопитесь! Этот этап на самом деле сложный!

Этап будет закрыт 9(11) декабря в 23.59 по Москве. Продления допустимы согласно правилам.

*запас два дня берется из пункта правила о продлении этапа. В данном случае, этим пунктом буду пользоваться я, так как из-за аварии у нас часто отключают электричество, и я могу просто на сутки остаться без оного.

Отредактировано sadhaka (05.12.12 15:19)

Поделиться205.12.12 07:18

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Еще вчера пришла работа от Leonheart в 22:33:26.
Очень оперативно!

Ждем с нетерпением работ остальных участников!

Поделиться305.12.12 15:24

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Из-за появившихся вопросов и неожиданной, но очень радующей активности участников в рамках расширения поддержки браузеров, добавила такую возможность во внешний файл https://forumstatic.ru/files/0007/e3/f7/18280.css

Перекачайте, пожалуйста, файл или поменяйте ссылку в уже существующем.

Еще раз

https://forumstatic.ru/files/0007/e3/f7/18280.css

Поделиться409.12.12 15:21

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Сегодня последний день, а работа по-прежнему одна. Точнее полторы. Остальные хотят техническое поражение?

Поделиться509.12.12 15:58

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Таак, в нашем полку прибывает, 2,5 работы

Поделиться609.12.12 19:12

Автор: Eri
Призрак
Последний визит:
17.08.14 02:18
Уважение: +619

Поделиться709.12.12 19:22

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

4 работы к 19.22. Еще остается время!

Поделиться810.12.12 07:14

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Этап решено продлить до 11.12.

Начался он довольно внезапно, поэтому необходимо дать участникам собраться с мыслями

Ждем Ваших работ!

Поделиться912.12.12 18:36

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Этап закрыт, поучаствовало 4 человека и 1 вне конкурса.

Итоги будут объявлены завтра ближе к вечеру.

Всем спасибо за участие!

Поделиться1014.12.12 23:24

Автор: sadhaka
Призрак
Последний визит:
12.04.15 16:29
Уважение: +874

Я все надеялась, что кто-то опомниться и еще поучаствует. Но нет, так нет. Участников становится меньше, но тем вкуснее будут призы для тех, кто пройдет этот марафон

Этап 2 был достаточно сложным, упор здесь был сделан не на просто выискивание ошибок, но на понимание сути и улучшение кода.
Ну и собрались воистину профессионалы!

Еще раз напомню, за что можно было получить баллы:
1. За исправленные ошибки по 1 за штуку. Всего было 64 ошибки (некоторые синтаксические ошибки считались за одну, если они были подобными). Max 64 балла.
2. За получение исходной картинки - 50 баллов.
3. За попытку улучшения кода - по 10 за каждый факт. Max 100
Что можно было улучшать:
- Можно было вынести стили из встроенных (атрибут тега style) во внутренние таблицы. 10 баллов
- Можно было сгруппировать классы. 10 баллов
- Можно было использовать обобщающее свойство background. 10 баллов
- Можно было сократить записи свойств и параметров (border, color). 20 баллов
- Можно было расширить поддержку браузеров через указание свойств с вендорными префиксами (border-radius, transform, transform-origin, animation, keyframes). 50 баллов

Всего за конкурс можно было получить 214 баллов.

Посмотрим на присланные работы:

Leonheart

[html]<iframe src="http://sadhaka.moy.su/common/leonheart.html" height="600" width="410"></iframe>[/html]

Исходный код

Код:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style>
/* ---------------------------------- Title ---------------------------------- */
h1 {
  font-size: 2em;
  text-align: center;
  color: red;
  }

/* ---------------------------------- Parts of body ---------------------------------- */
.cat {
  position: relative;
  margin: 0px auto;
  width: 400px;
  height: 400px;
  background: transparent;
  }

.head {
  position: absolute;
  left: 60px;
  top: 30px;
  width: 280px;
  height: 250px;
  background: #000;

  -webkit-border-radius: 280px/250px;
   -khtml-border-radius: 280px/250px;
     -moz-border-radius: 280px/250px;
       -o-border-radius: 280px/250px;
          border-radius: 280px/250px;
  }

.body {
  position: absolute;
  left: 165px;
  top: 250px;
  width: 66px;
  height: 125px;
  background: #000;

  -webkit-border-radius: 66px/125px;
   -khtml-border-radius: 66px/125px;
     -moz-border-radius: 66px/125px;
       -o-border-radius: 66px/125px;
          border-radius: 66px/125px;
  }

/* ---------------------------------- Legs/Paws ---------------------------------- */
.left-leg, .right-leg {
  position: absolute;
  top: 327px;
  width: 25px;
  height: 60px;
  background: #000;

  -webkit-border-radius: 25px/60px;
   -khtml-border-radius: 25px/60px;
     -moz-border-radius: 25px/60px;
       -o-border-radius: 25px/60px;
          border-radius: 25px/60px;
  }

.left-leg {
  left: 207px;

  -webkit-transform: rotate(60deg);
     -moz-transform: rotate(60deg);
      -ms-transform: rotate(60deg);
       -o-transform: rotate(60deg);
          transform: rotate(60deg);
  }

.right-leg {
  left: 163px;

  -webkit-transform: rotate(120deg);
     -moz-transform: rotate(120deg);
      -ms-transform: rotate(120deg);
       -o-transform: rotate(120deg);
          transform: rotate(120deg);
  }

.left-paw, .right-paw {
  position: absolute;
  top: 350px;
  width: 15px;
  height: 35px;
  background: #000;

  -webkit-border-radius: 16px/35px;
   -khtml-border-radius: 16px/35px;
     -moz-border-radius: 16px/35px;
       -o-border-radius: 16px/35px;
          border-radius: 16px/35px;
  }

.left-paw {
  left: 205px;
  }

.right-paw {
  left: 180px;
  }

/* ---------------------------------- Ears ---------------------------------- */
.left-ear, .right-ear {
  position: absolute;
  top: 40px;
  width: 30px;
  height: 60px;
  background: #000;

  -webkit-border-radius: 30px/60px;
   -khtml-border-radius: 30px/60px;
     -moz-border-radius: 30px/60px;
       -o-border-radius: 30px/60px;
          border-radius: 30px/60px;

  -webkit-transform-origin: 15px 60px;
     -moz-transform-origin: 15px 60px;
       -o-transform-origin: 15px 60px;
  }

.left-ear {
  left: 300px;

  -webkit-animation: left-ear 3s infinite linear normal none;
     -moz-animation: left-ear 3s infinite linear normal none;
  }

.right-ear {
  left: 70px;

  -webkit-animation: right-ear 3s infinite linear normal none;
     -moz-animation: right-ear 3s infinite linear normal none;
  }

/* ---------------------------------- Whiskers ---------------------------------- */
.left-whiskers, .right-whiskers {
  position: absolute;
  top: 140px;
  width: 45px;
  height: 30px;
  }

.left-whiskers {
  left: 330px;

  -webkit-transform-origin: 0px 15px;
     -moz-transform-origin: 0px 15px;
       -o-transform-origin: 0px 15px;

  -webkit-animation: left-whiskers 3s infinite linear normal none;
     -moz-animation: left-whiskers 3s infinite linear normal none;
  }

.right-whiskers {
  left: 25px;

  -webkit-transform-origin: 45px 15px;
     -moz-transform-origin: 45px 15px;
       -o-transform-origin: 45px 15px;

  -webkit-animation: right-whiskers 3s infinite linear normal none;
     -moz-animation: right-whiskers 3s infinite linear normal none;
  }

.w1, .w3, .w5, .w2, .w4, .w6 {
  position: absolute;
  left: 0px;
  width: 45px;
  height: 3px;
  background: #000;
  }

.w1, .w2 {
  top: 15px;
  }

.w3 {
  top: 8px;

  -webkit-transform: rotate(-5deg);
     -moz-transform: rotate(-5deg);
      -ms-transform: rotate(-5deg);
       -o-transform: rotate(-5deg);
          transform: rotate(-5deg);
  }

.w5 {
  top: 22px;

  -webkit-transform: rotate(-355deg);
     -moz-transform: rotate(-355deg);
      -ms-transform: rotate(-355deg);
       -o-transform: rotate(-355deg);
          transform: rotate(-355deg);
  }

.w4 {
  top: 8px;

  -webkit-transform: rotate(5deg);
     -moz-transform: rotate(5deg);
      -ms-transform: rotate(5deg);
       -o-transform: rotate(5deg);
          transform: rotate(5deg);
  }

.w6 {
  top: 22px;

  -webkit-transform: rotate(355deg);
     -moz-transform: rotate(355deg);
      -ms-transform: rotate(355deg);
       -o-transform: rotate(355deg);
          transform: rotate(355deg);
  }

/* ---------------------------------- Eyes ---------------------------------- */
.left-eye, .right-eye {
  position: absolute;
  top: 95px;
  width: 48px;
  height: 48px;
  background: #fff;

  -webkit-border-radius: 48px;
   -khtml-border-radius: 48px;
     -moz-border-radius: 48px;
       -o-border-radius: 48px;
          border-radius: 48px;
  }

.left-eye {
  left: 271px;

  -webkit-animation: left-eye 3s infinite linear normal none;
     -moz-animation: left-eye 3s infinite linear normal none;
  }

.right-eye {
  left: 81px;

  -webkit-animation: right-eye 3s infinite linear normal none;
     -moz-animation: right-eye 3s infinite linear normal none;
  }

.left-pupil, .right-pupil {
  position: absolute;
  left: 17px;
  top: 15px;
  width: 15px;
  height: 15px;
  background: #000;

  -webkit-border-radius: 15px;
   -khtml-border-radius: 15px;
     -moz-border-radius: 15px;
       -o-border-radius: 15px;
          border-radius: 15px;
  }

.left-pupil {
  -webkit-animation: left-pupil 3s infinite linear normal none;
     -moz-animation: left-pupil 3s infinite linear normal none;
  }

.right-pupil {
  -webkit-animation: right-pupil 3s infinite linear normal none;
     -moz-animation: right-pupil 3s infinite linear normal none;
  }

/* ---------------------------------- Tail ---------------------------------- */
.tail {
  position: absolute;
  left: 200px;
  top: 290px;
  width: 85px;
  height: 70px;
  background: transparent;
  border: 5px solid #000;
  border-top: none;
  border-left: none;

  -webkit-border-radius: 85px/70px;
   -khtml-border-radius: 85px/70px;
     -moz-border-radius: 85px/70px;
       -o-border-radius: 85px/70px;
          border-radius: 85px/70px;
  }

/* ---------------------------------- Mouth ---------------------------------- */
.mouth {
  position: absolute;
  left: 192px;
  top: 245px;
  width: 16px;
  height: 5px;
  background: #900;
  border: 1px solid #600;

  -webkit-border-radius: 16px/5px;
   -khtml-border-radius: 16px/5px;
     -moz-border-radius: 16px/5px;
       -o-border-radius: 16px/5px;
          border-radius: 16px/5px;

  opacity: 0;

  -webkit-animation: mouth 3s infinite linear normal none;
     -moz-animation: mouth 3s infinite linear normal none;
  }

/* ---------------------------------- Teeth ---------------------------------- */
.tooth-tl, .tooth-tr, .tooth-bl, .tooth-br {
  position: absolute;
  left: 50%;
  width: 0px;
  height: 0px;

  -moz-transform: scale(0);
  }

.tooth-tl, .tooth-tr {
  top: 2px;
  border-bottom: 12px solid transparent;
  border-top: 8px solid transparent;
  }

.tooth-bl, .tooth-br {
  bottom: 2px;
  border-bottom: 8px solid transparent;
  border-top: 12px solid transparent;
  }

.tooth-tl {
  margin-left: 5px;
  border-left: 10px solid #fff;

  -webkit-animation: tooth-tl 3s infinite linear normal none;
     -moz-animation: tooth-tl 3s infinite linear normal none;
  }

.tooth-tr {
  margin-left: -15px;
  border-right: 10px solid #fff;

  -webkit-animation: tooth-tr 3s infinite linear normal none;
     -moz-animation: tooth-tr 3s infinite linear normal none;
  }

.tooth-bl {
  margin-left: 5px;
  border-left: 10px solid #fff;

  -webkit-animation: tooth-bl 3s infinite linear normal none;
     -moz-animation: tooth-bl 3s infinite linear normal none;
  }

.tooth-br {
  margin-left: -15px;
  border-right: 10px solid #fff;

  -webkit-animation: tooth-br 3s infinite linear normal none;
     -moz-animation: tooth-br 3s infinite linear normal none;
  }

/* ---------------------------------- Mouth Else ---------------------------------- */
.tongue {
  position: absolute;
  left: 50%;
  margin-left: -40px;
  bottom: -8px;
  width: 80px;
  height: 30px;
  background: #f66;

  -webkit-border-radius: 80px/30px;
   -khtml-border-radius: 80px/30px;
     -moz-border-radius: 80px/30px;
       -o-border-radius: 80px/30px;
          border-radius: 80px/30px;

  -moz-transform: scale(0);

  -webkit-animation: tongue 3s infinite linear normal none;
     -moz-animation: tongue 3s infinite linear normal none;
  }

.throat {
  position: absolute;
  left: 50%;
  margin-left: -25px;
  bottom: -70px;
  width: 50px;
  height: 70px;
  background: #300;

  -webkit-border-radius: 60px;
   -khtml-border-radius: 60px;
     -moz-border-radius: 60px;
       -o-border-radius: 60px;
          border-radius: 60px;

  -moz-transform: scale(0);

  -webkit-animation: throat 3s infinite linear normal none;
     -moz-animation: throat 3s infinite linear normal none;
  }

.uvula {
  position: absolute;
  left: 50%;
  margin-left: -5px;
  top: -20px;
  width: 10px;
  height: 50px;
  background: #900;

  -webkit-border-radius: 10px/50px;
   -khtml-border-radius: 10px/50px;
     -moz-border-radius: 10px/50px;
       -o-border-radius: 10px/50px;
          border-radius: 10px/50px;

  -webkit-transform-origin: 5px 0px;
     -moz-transform-origin: 5px 0px;

  -moz-transform: scale(1);

  -webkit-animation: uvula 0.1s 2s infinite linear normal none;
     -moz-animation: uvula 0.1s 2s infinite linear normal none; 
  }

/* ----------------------------------   ---------------------------------- */

@-moz-keyframes left-ear {
  0% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
 40% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
 42% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
 44% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
 46% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
 48% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
 50% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
 80% {left: 315px; top: 90px; -moz-transform: rotate(150deg);}
 82% {left: 310px; top: 80px; -moz-transform: rotate(120deg);}
 84% {left: 306px; top: 70px; -moz-transform: rotate(90deg);}
 86% {left: 304px; top: 60px; -moz-transform: rotate(60deg);}
 88% {left: 302px; top: 50px; -moz-transform: rotate(30deg);}
100% {left: 300px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-ear {
  0% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
 40% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
 42% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
 44% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
 46% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
 48% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
 50% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
 80% {left: 55px; top: 90px; -moz-transform: rotate(-150deg);}
 82% {left: 60px; top: 80px; -moz-transform: rotate(-120deg);}
 84% {left: 64px; top: 70px; -moz-transform: rotate(-90deg);}
 86% {left: 66px; top: 60px; -moz-transform: rotate(-60deg);}
 88% {left: 68px; top: 50px; -moz-transform: rotate(-30deg);}
100% {left: 70px; top: 40px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-whiskers {
  0% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
 40% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
 42% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
 44% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
 46% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
 48% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
 50% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
 80% {left: 265px; top: 50px; -moz-transform: rotate(-50deg);}
 82% {left: 280px; top: 60px; -moz-transform: rotate(-40deg);}
 84% {left: 300px; top: 80px; -moz-transform: rotate(-30deg);}
 86% {left: 310px; top: 100px; -moz-transform: rotate(-20deg);}
 88% {left: 320px; top: 120px; -moz-transform: rotate(-10deg);}
100% {left: 330px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes right-whiskers {
  0% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
 40% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
 42% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
 44% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
 46% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
 48% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
 50% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
 80% {left: 90px; top: 50px; -moz-transform: rotate(50deg);}
 82% {left: 75px; top: 60px; -moz-transform: rotate(40deg);}
 84% {left: 55px; top: 80px; -moz-transform: rotate(30deg);}
 86% {left: 45px; top: 100px; -moz-transform: rotate(20deg);}
 88% {left: 35px; top: 120px; -moz-transform: rotate(10deg);}
100% {left: 25px; top: 140px; -moz-transform: rotate(0deg);}
}

@-moz-keyframes left-eye {
  0% {height: 48px; top: 95px; border-radius: 48px;}
 40% {height: 48px; top: 95px; border-radius: 48px;}
 50% {height: 0px; top: 90px; border-radius: 40px/5px;}
 80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes right-eye {
  0% {height: 48px; top: 95px; border-radius: 48px;}
 40% {height: 48px; top: 95px; border-radius: 48px;}
 50% {height: 0px; top: 90px; border-radius: 40px/5px;}
 80% {height: 0px; top: 90px; border-radius: 40px/5px;}
100% {height: 48px;}
}

@-moz-keyframes left-pupil {
  0% {top: 15px;}
 40% {top: 15px;}
 50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes right-pupil {
  0% {top: 15px;}
 40% {top: 15px;}
 50% {top: -7px;}
100% {top: 15px;}
}

@-moz-keyframes mouth {
  0% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
 40% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
 55% {top: 45px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
 60% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
 85% {top: 45px; width: 190px; height: 190px; left: 97px; border-radius: 190px; opacity: 1; border: 8px solid #600;}
 99% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 1; border: 1px solid #600;}
100% {top: 245px; width: 16px; height: 5px; left: 191px; border-radius: 16px/5px; opacity: 0; border: 1px solid #600;}
}

@-moz-keyframes tooth-tl {
  0% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
 55% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
 60% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
 85% {margin-left: 45px; top: 2px; -moz-transform: scale(1);}
 99% {margin-left: 5px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-tr {
  0% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
 55% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
 60% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
 85% {margin-left: -55px; top: 2px; -moz-transform: scale(1);}
 99% {margin-left: -15px; top: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; top: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-bl {
  0% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
 55% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
 60% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
 85% {margin-left: 45px; bottom: 2px; -moz-transform: scale(1);}
 99% {margin-left: 5px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: 5px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes tooth-br {
  0% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
 55% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
 60% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
 85% {margin-left: -55px; bottom: 2px; -moz-transform: scale(1);}
 99% {margin-left: -15px; bottom: 0px; -moz-transform: scale(0);}
100% {margin-left: -15px; bottom: 2px; -moz-transform: scale(0);}
}

@-moz-keyframes throat {
  0% {bottom: -70px; -moz-transform: scale(0);}
 40% {bottom: -70px; -moz-transform: scale(0);}
 55% {bottom: -50px; -moz-transform: scale(0.1);}
 60% {bottom: 0px; -moz-transform: scale(1);}
 85% {bottom: 0px; -moz-transform: scale(1);}
 99% {bottom: -30px; -moz-transform: scale(0.1);}
100% {bottom: -70px; -moz-transform: scale(0);}
}

@-moz-keyframes tongue {
  0% {-moz-transform: scale(0);}
 40% {-moz-transform: scale(0);}
 55% {-moz-transform: scale(0.1);}
 60% {-moz-transform: scale(1);}
 85% {-moz-transform: scale(1);}
 99% {-moz-transform: scale(0.1);}
100% {-moz-transform: scale(0);}
}

@-moz-keyframes uvula {
  0% {-moz-transform: rotate(0deg);}
 25% {-moz-transform: rotate(5deg);}
 50% {-moz-transform: rotate(0deg);}
 75% {-moz-transform: rotate(-5deg);}
100% {-moz-transform: rotate(0deg);}
}


/* Else Google */ 
@-webkit-keyframes left-ear { 
  0% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 40% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 42% {left:302px; top:50px; -webkit-transform:rotate(30deg);} 
 44% {left:304px; top:60px; -webkit-transform:rotate(60deg);} 
 46% {left:306px; top:70px; -webkit-transform:rotate(90deg);} 
 48% {left:310px; top:80px; -webkit-transform:rotate(120deg);} 
 50% {left:315px; top:90px; -webkit-transform:rotate(150deg);} 
 80% {left:315px; top:90px; -webkit-transform:rotate(150deg);} 
 82% {left:310px; top:80px; -webkit-transform:rotate(120deg);} 
 84% {left:306px; top:70px; -webkit-transform:rotate(90deg);} 
 86% {left:304px; top:60px; -webkit-transform:rotate(60deg);} 
 88% {left:302px; top:50px; -webkit-transform:rotate(30deg);} 
100% {left:300px; top:40px; -webkit-transform:rotate(0deg);} 
 } 

@-webkit-keyframes right-ear { 
  0% {left:70px; top:40px; -webkit-transform:rotate(0deg);} 
 40% {left:70px; top:40px; -webkit-transform:rotate(0deg);} 
 42% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} 
 44% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} 
 46% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} 
 48% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} 
 50% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} 
 80% {left:55px; top:90px; -webkit-transform:rotate(-150deg);} 
 82% {left:60px; top:80px; -webkit-transform:rotate(-120deg);} 
 84% {left:64px; top:70px; -webkit-transform:rotate(-90deg);} 
 86% {left:66px; top:60px; -webkit-transform:rotate(-60deg);} 
 88% {left:68px; top:50px; -webkit-transform:rotate(-30deg);} 
100% {left:70px; top:40px; -webkit-transform:rotate(-0deg);} 
} 

@-webkit-keyframes left-whiskers { 
  0% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
 40% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
 42% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} 
 44% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} 
 46% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} 
 48% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} 
 50% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} 
 80% {left:265px; top:50px; -webkit-transform:rotate(-50deg);} 
 82% {left:280px; top:60px; -webkit-transform:rotate(-40deg);} 
 84% {left:300px; top:80px; -webkit-transform:rotate(-30deg);} 
 86% {left:310px; top:100px; -webkit-transform:rotate(-20deg);} 
 88% {left:320px; top:120px; -webkit-transform:rotate(-10deg);} 
100% {left:330px; top:140px; -webkit-transform:rotate(0deg);} 
} 

@-webkit-keyframes right-whiskers { 
  0% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
 40% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
 42% {left:35px; top:120px; -webkit-transform:rotate(10deg);} 
 44% {left:45px; top:100px; -webkit-transform:rotate(20deg);} 
 46% {left:55px; top:80px; -webkit-transform:rotate(30deg);} 
 48% {left:75px; top:60px; -webkit-transform:rotate(40deg);} 
 50% {left:90px; top:50px; -webkit-transform:rotate(50deg);} 
 80% {left:90px; top:50px; -webkit-transform:rotate(50deg);} 
 82% {left:75px; top:60px; -webkit-transform:rotate(40deg);} 
 84% {left:55px; top:80px; -webkit-transform:rotate(30deg);} 
 86% {left:45px; top:100px; -webkit-transform:rotate(20deg);} 
 88% {left:35px; top:120px; -webkit-transform:rotate(10deg);} 
100% {left:25px; top:140px; -webkit-transform:rotate(0deg);} 
} 

@-webkit-keyframes left-eye { 
  0% {height:48px; top:95px; border-radius:48px;} 
 40% {height:48px; top:95px; border-radius:48px;} 
 50% {height:0; top:90px; border-radius: 40px/5px;} 
 80% {height:0; top:90px; border-radius: 40px/5px;} 
100% {height:48px;} 
} 

@-webkit-keyframes right-eye { 
  0% {height:48px; top:95px; border-radius:48px;} 
 40% {height:48px; top:95px; border-radius:48px;} 
 50% {height:0; top:90px; border-radius: 40px/5px;} 
 80% {height:0; top:90px; border-radius: 40px/5px;} 
100% {height:48px;} 
}

@-webkit-keyframes left-pupil { 
  0% {top:15px;} 
 40% {top:15px;} 
 50% {top:-7px;} 
100% {top:15px;} 
} 

@-webkit-keyframes right-pupil { 
  0% {top:15px;} 
 40% {top:15px;} 
 50% {top:-7px;} 
100% {top:15px;} 
} 

@-webkit-keyframes mouth { 
  0% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} 
 40% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
 55% {top:45px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
 60% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} 
 85% {top:45px; width:190px; height:190px; left: 97px; border-radius: 190px/190px; opacity:1; border:8px solid #600;} 
 99% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:1; border:1px solid #600;} 
100% {top:245px; width:16px; height:5px; left: 191px; border-radius: 16px/5px; opacity:0; border:1px solid #600;} 
}

@-webkit-keyframes tooth-tl { 
  0% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
 55% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
 60% {margin-left:45px; top:2px; -webkit-transform: scale(1);} 
 85% {margin-left:45px; top:2px; -webkit-transform: scale(1);} 
 99% {margin-left:5px; top:0px; -webkit-transform: scale(0);} 
100% {margin-left:5px; top:2px; -webkit-transform: scale(0);} 
} 

@-webkit-keyframes tooth-tr { 
  0% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
 55% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
 60% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} 
 85% {margin-left:-55px; top:2px; -webkit-transform: scale(1);} 
 99% {margin-left:-15px; top:0px; -webkit-transform: scale(0);} 
100% {margin-left:-15px; top:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tooth-bl { 
  0% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
 55% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
 60% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} 
 85% {margin-left:45px; bottom:2px; -webkit-transform: scale(1);} 
 99% {margin-left:5px; bottom:0px; -webkit-transform: scale(0);} 
100% {margin-left:5px; bottom:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tooth-br { 
  0% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
 55% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
 60% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} 
 85% {margin-left:-55px; bottom:2px; -webkit-transform: scale(1);} 
 99% {margin-left:-15px; bottom:0px; -webkit-transform: scale(0);} 
100% {margin-left:-15px; bottom:2px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes throat { 
  0% {bottom:-70px; -webkit-transform: scale(0);} 
 40% {bottom:-70px; -webkit-transform: scale(0);} 
 55% {bottom:-50px; -webkit-transform: scale(0.1);} 
 60% {bottom:0; -webkit-transform: scale(1);} 
 85% {bottom:0; -webkit-transform: scale(1);} 
 99% {bottom:-30px; -webkit-transform: scale(0.1);} 
100% {bottom:-70px; -webkit-transform: scale(0);} 
}

@-webkit-keyframes tongue { 
  0% {-webkit-transform: scale(0);} 
 40% {-webkit-transform: scale(0);} 
 55% {-webkit-transform: scale(0.1);} 
 60% {-webkit-transform: scale(1);} 
 85% {-webkit-transform: scale(1);} 
 99% {-webkit-transform: scale(0.1);} 
100% {-webkit-transform: scale(0);} 
}

@-webkit-keyframes uvula { 
  0% {-webkit-transform:rotate(0deg);} 
 25% {-webkit-transform:rotate(5deg);} 
 50% {-webkit-transform:rotate(0deg);} 
 75% {-webkit-transform:rotate(-5deg);} 
100% {-webkit-transform:rotate(0deg);} 
}
    </style>

</head>

<body>
<div id="content">
    <div id="info">
  <h1>Поздравляю!</h1>
        <div class="cat">
           <div class="head"></div>
           <div class="body"></div>
           <div class="left-leg"></div>
           <div class="right-leg"></div>
           <div class="left-paw"></div>
           <div class="right-paw"></div>
           <div class="left-ear"></div>
           <div class="right-ear"></div>
       <div class="left-whiskers">
             <div class="w1"></div>
             <div class="w3"></div>
             <div class="w5"></div>
       </div>
       <div class="right-whiskers">
             <div class="w2"></div>
             <div class="w4"></div>
             <div class="w6"></div>
       </div>
       <div class="left-eye">
             <div class="left-pupil"></div>
       </div>
       <div class="right-eye">
             <div class="right-pupil"></div>
       </div>
       <div class="tail"></div>
       <div class="mouth">
            <div class="tooth-tl"></div>
            <div class="tooth-tr"></div>
            <div class="tooth-bl"></div>
            <div class="tooth-br"></div>
               <div class="throat">
                  <div class="uvula"></div>
               </div>
       <div class="tongue"></div>

            </div>
        </div>
    </div>
</div>
</body>
</html>

Исправлены все ошибки - 64 балла.
Но, допущена небольшая оплошность - поменяна кодировка, из-за чего тест отображается неправильно. -2 балла.
Получена исходная картинка - 50 баллов.
Использованы все возможности для улучшения - 100 баллов.
Но, свойство animation оставлено только с префиксами. Это не очень хорошо, поскольку в более новых версиях браузеров могут включить свойство без префиксов и выключить - с префиксами, придется искать и добавлять. Так что с CSS3 лучше всегда в конце добавлять исходное свойство. -10 баллов (половина, так как это не совсем ошибка, но и улучшение сомнительное).

Итого: 202 балла.

faiko

[html]<iframe src="http://sadhaka.moy.su/common/faiko.html" height="500" width="420"></iframe>[/html]

Исправлены все ошибки - 64 балла.
Но, допущена ошибка в теге <meta>

<meta content="text/html" charset="UTF-8" http-equiv="Content-Type">

атрибута charset не существует. -2 балла.
Исходная картинка не получена. Нет анимации язычка.
Использованы возможности для улучшения - свойство background. 10 баллов.

Итого: 72 балла.

Ghоst

[html]<iframe src="http://sadhaka.moy.su/common/ghost.html" height="500" width="410"></iframe>[/html]

Не исправлена ошибка в строке 382

//отступ единиц измерения от числа

и допущена ошибка в строке 523

//дробные единицы измерения пишутся через точку.

Еще мне интересно, что вот это за яваскрипт ))

Код:

script type="text/javascript">window["_GOOG_TRANS_EXT_VER"] = "1";</script>

Исправлены 63 ошибки, -2 балла - 61 балл
Исходная картинка не получена. Нет анимации язычка, беда с хвостом.
Использованы возможности для улучшения - расширение поддержки браузеров: animation, transform, keyframes; группировка свойств через создание класса; использование свойства background - 50 баллов.

Итого: 111 балла.

Eri

[html]<iframe src="http://sadhaka.moy.su/common/eri.html" height="500" width="410"></iframe>[/html]

Оставленные ошибки:

Не знакомо оказалось свойство animation - 2балла.
Испорчено свойство border-radius (написание через слеш - не ошибочно) - 2 балла.
Исправлены 61 ошибка (некоторые правда чересчур радикально, поэтому -4 балла), итого 57 баллов.
Исходная картинка не получена.
Не использованы возможности для улучшения.

Итого: 57 баллов.

И еще у нас был один участник вне конкурса, это Хатико. К сожалению, участник не оставил ничего кроме скрина, но за участие и внимание к конкурсу принято решение наградить 30ПБ.

Итак, наши лидеры Leonheart, Ghоst, faiko переходят в последний, финальный этап, а Eri можно выбрать себе поощрительный приз.

Поздравляем!!!

Кроме того, я как и обещала - раздаю подарки. Leonheart за выигрыш джекпота получает дополнительный приз.
Их три, ты можешь выбрать один из:
Приз для самого любознательного
Приз для запасливого админа
Приз для постоянного пользователя ForumDesign

Выбирай, что тебе по душе! =)

Тема открыта для свободного общения.

Финальный этап откроется в воскресенье (к сожалению, завтра плановое отключение света).

Отредактировано sadhaka (15.12.12 07:26)

Тема закрыта

Страница: 1 2 »

ForumD.ru - Дизайн, графика, скрипты, техническая поддержка для форумов и сайтов

Меню навигации

Пользовательские ссылки

Объявление

☀️ WAFFLE - Самый яркий форум!

❤️ Поддержи проект! Стань модератором!

💰 Мгновенные уведомления от Alex_63 для MyBB.ru

💌 Акция! Подписка, лайк, коммент, репост!

🌟 SPECIAL OFFER: We distribute designs for free

❤️ Support the project

Информация о пользователе

"Я - вебмастер!" Этап 2. Ликвидация жуков.

Сообщений 1 страница 10 из 17

Поделиться103.12.12 19:21

Поделиться205.12.12 07:18

Поделиться305.12.12 15:24

Поделиться409.12.12 15:21

Поделиться509.12.12 15:58

Поделиться609.12.12 19:12

Поделиться709.12.12 19:22

Поделиться810.12.12 07:14

Поделиться912.12.12 18:36

Поделиться1014.12.12 23:24