Обсуждение работ

[Int]

Я вот css3 вообще не ззнаю, так что за третье задание даже не стал браться. Тем более, там прозрачность, а внутри прозрачного блока нельзя сделать что-то непрозрачное. Значит этот блок надо позиционировать извне. А при этом трудно сделать всё растягивающимся под текст. Я не стал даже пытаться.

[SelenIT]

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

Так кроссбраузерность не требовалась, а целевые браузеры все как один поддерживают rgba()...

[exessqd1]

Оценю несколько работ, по-моему скромному мнению:

alexriz

1. Круто, section убрать или оставить один и будет на 5. good-for-browsers-style

mishka

1. Решил много не думать, просто расставил 4 абсолюта по 4 углам.

2. content-frame head-frame здесь как-бы нафиг не нужны. .headline {display:inline-block} молодец

Int

1,2 Тру, хардкор, олдскул - видна старая школа, а именно заточенность на кроссбраузерность.

ilhan

1. В принципе тоже сильно думать не стал сделал как mishka

2. Гуд

3. .ininner_box ))))

leoni4

3. По виду кривенько, да и по коду не очень.

ctpz

1. http://www.w3.org/TR/CSS2/box.html учить наизусть

2. width:100% - 15px; =))

Tenor

1. mishka-style все по 4 углам

2. Чистенько

VladP

1. hardcore-mishka-style

2,3 перестань везде использовать id

Shotgun

1. #right, #left можно было бы и обойтись

psywalker

1. полухардкор-mishka-style , i.bl {} зачем пишешь тег перед классом,

sigma77

1. Почти rash-style, не догадался только в одном элементе ставить сразу две полоски, а разделил полоски на четыре элемента, 5 с минусом. Замечу что в боевой обстановке писать :before,:after дочерний слектор(>) категорически нельзя. да и селекторов типа h1,p,i и тд быть не должно

2. Немного грязно

3. на 4

Yubari

1. good-for-browsers-style Ништяк я бы 5 поставил, но тут поствят 5-, "какбы" по конкурсу нужно ориентироватся на самые новые версии браузеров и компактность а не на кроссбраузерность.

2,3 хорошо

ExtreMMator

1. oldschool-hardcore-mishka-style

2. Вроде бы и чистенько а по коду и не непоймешь все одной стркой...

stars

1. true-hardcore-oldschool-аццкий-mishka-style

SelenIT

1. good-for-browsers-style 5- компенсировал элемент контента padding'ом, я бы не стал, контент он все таки контент)

2,3 хорошо

zSpx

1. new-metal-hardcore-mishka-style

wkon

1. oldschool-mishka-style

2. грязно

3. несделал

zSpx

1,2 hardcore-mishka-style

rash

1,2,3 Чистенько, постирано, причесано. Но как гласит народная мудрость "идеальная верстка не содержит conditional comments, хаков, вендорных префиксов,

не ломается в актуальных браузерах и не существует."

Edited July 7, 2011 by exessqd1

[SelenIT]

компенсировал элемент контента padding'ом, я бы не стал, контент он все таки контент)

Я там еще хуже налажал — забыл фон покрасить

[Softlink]

компенсировал элемент контента padding'ом, я бы не стал, контент он все таки контент)

Я там еще хуже налажал — забыл фон покрасить

так, а он и не покрасится

[mishka]

Ты чего это со мной сравниваешь половину работ?

Это не мой стиль, это у них свой стиль, но так как знания примерно одинаковы, вот и код одинаков.

Из работ:

После того как увидел работы от rash, другие просто померкли, даже при таком же решении, код просто не читаем.

Насчет того что у rash код который не будет работать в реальных проектах: неужели ты думаешь что этот человек не понимает разницы между тестом, где нужно сделать то что заданно, ни больше ни меньше, и между реальным проектом?

rash лидер без сомнения.

Со мной сравнивать и не надо, так как мои работы теряются в хвосте. И не кросс, и не все там сделано с пониманием дела, так как в css3 только тени да радиусы знаю.

Ну и как большинство принимавших участие я тоже работаю, поэтому постарался вложиться в час.

Но конечно спасибо за оценку, так как оценка человека нового на форуме будет более объективна и беспристрастна.

[Vlad]

Подвёл результаты конкурса.

http://htmlbook.ru/konkurs.html

Апелляции, претензии и замечания принимаются до 7:00 UTC. После этого времени подвожу окончательный результат (в случае пересмотра результатов по итогам апелляций), вывешиваю итоги на сайте и вручаю медальки.

[Softlink]

Забавно получается. Новички забежали на форум буквально вчера и объегорили почти всех наших экспертов. rash за всех сразу отквитал своими решениями

rash - молодец. Думаю, будет его победа и по делу.

alexriz - компетентен в вопросе на столько, что даже не брал время на раздумье, сел и за раз напечатал все. 1:13 действительно впечатляет.

[Vlad]

Это была одной из задач мини-конкурса, привлечь новичков на форум. Хорошо, что приняли участие новые люди.

[Golgi]

мда.. с картинкой в 3 блоке я конкретно прокололся

и то, что ie9 поддерживает уголки даже подумать не мог

З.Ы, Rash - красавчик, поздравляю!

Edited July 8, 2011 by Golgi

[sigma77]

(нет градиента в Opera).

Вот же ж блин

Ведь был же, но видимо забыла сохранить изменения...

rash,

Поздравляю!

[Int]

Так кроссбраузерность не требовалась, а целевые браузеры все как один поддерживают rgba()...

Я про него только на этом конкурсе и узнал-то.

Int

1,2 Тру, хардкор, олдскул - видна старая школа, а именно заточенность на кроссбраузерность.

Намекнул на то, что дедушка фишку не рубит? Я больше php-программист, чем верстальщик, поэтому не очень силён в CSS. А решать первое задание двумя блоками просто как-то в голову не пришло.

[psywalker]

(неправильная тень слева в заголовке, нет рамки вокруг блока).

Блин, вот я лошара, рамку даже и не заметил на картинке А насчёт тени согласен, косяк.

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

rash, ты лучший

[Int]

Влад, ты в комментарии не учёл, что ctpz налажал в первой и третьей задаче

http://jsfiddle.net/Zzkt2/2/

http://jsfiddle.net/7YYLh/10/

А ведь в блоке может быть текста больше, чем одна строка. Да и у других скорее всего не проверял? Я все результаты не просматривал, поэтому не могу так сразу сказать, есть ли у кого-то такая же ошибка

8 место

50 баллов за первую, 30 баллов за первую (неправильно позиционирована тень

В первой задаче нет тени, наверное речь о второй.

Зато в решении первой задачи всё тот же косяк

http://jsfiddle.net/nmpAd/2/

А ещё у 8-го места во втором задании блок растянут до низа экрана (bottom:8px). Условие о резиновости выполнено?

[Softlink]

Int, если честно, там у многих нескольких примеры откровенно нерабочие. Т.е. они не соответствуют условиям задачи. Наверное Влад не все проверял.

[Int]

Да я тоже удивился, как так быстро появились оценки такого количества человек.

[exessqd1]

Первая тройка. Апелляции, претензии и замечания.

rash

Задача 1.

Претензия 1.

-2 балла, вариант не доработан, при z-index:-1; нужна дополнительная обертка с z-index:0; либо твои полоски в родительском блоке с непрозрачным фоном видно не будет.

Задача 3.

Претензия 1.

.block-title::after {background: red;}

-0 баллов, но зачем все таки?

alexriz

Задача 2.

Претензия 1.

.mask {}

-1 балл, не смог решить проблему с border-radius, создал дополнительный элемент.

Претензия 2.

.tabcont {padding:0;}

-0 баллов, лишнее свойство.

Задача 3.

Претензия 1.

<div class="angle">?</div>

-1 балл, за не умение строить css фигуры.

leoni4

Задача 2.

Претензия 1.

div h3 {

display: block;

float:left;

}

-2, балла за непонимание принципов работы плавающих элементов.

Претензия 2.

div h3 {

white-space: nowrap;

margin: -42px 0 0 -21px;

height: 20px;

}

-3 балла, за немасштабируемость верстки. блок не тянется в зависимости от текста. (по заданию нужно было чтобы блок был максимального размера max-width: 250px; при увеличении текста блок растягивается по высоте.)

Претензия 3.

div {

position: relative;

}

-2 балла, за непонимание css box model - лишний код.

Задача 1.

Претензия 1.

-1 балла за табличную верстку на div'ах и псевдоэлементах.

Задача 3.

Претензия 1.

.classD div h3 {display:block;width:100%;}

.classD div {width:100%;}

-4 балла, за непонимание css box model - лишний код.

Претензия 2.

.classD div h3 {height: 25px;}

-3 балла, за немасштабируемость верстки. блок не тянется в зависимости от текста

К судьям.

-20 баллов, за отсутствие одной строчки кода? (градиента в ie)

Edited July 8, 2011 by exessqd1

[lexxcode]

Ничего себе я еще и второе место занял. Думал будет больше людей которые окажутся выше меня в рейтинге.

У меня вообще там, что первое в голову пришло, то и собрал.

rash, действительно заслужено занял первое место, мои поздравления.

[lexxcode]

Первая тройка. Апелляции, претензии и замечания.

...

alexriz

Задача 2.

Претензия 1.

.mask {}

-1 балл, не смог решить проблему с border-radius, создал дополнительный элемент.

Претензия 2.

.tabcont {padding:0;}

-0 баллов, лишнее свойство.

Задача 3.

Претензия 1.

<div class="angle">?</div>

-1 балл, за не умение строить css фигуры.

...

По первой претензии 2-ой задачи:

Проблемы с border-radius не было вообще, просто то что некоторые выполнили с помощью ::after и ::before, я выполнил за счет дополнительного блока. Внимательней посмотрите, он прикрывает тень от таба, которая немного наезжает на контентную часть. Т.к. с ::after и ::before можно было отыграться с помощью z-index в моем варианте не получается.

По второй претензии 2-ой задачи:

Не заметил, поспешил... Согласен В общем

По первой претензии 3-ей задачи:

Согласен далеко не лучший вариант, про ротацию квадратного блока не подумал. Но не значит, что я не умею, просто т.к. таким приемом в полевых условиях пользоваться часто не приходится, он не всплывает в голове сам собой.

Спасибо, за комментарий, буду делать выводы

Edited July 8, 2011 by alexriz

[rash]

Первая тройка. Апелляции, претензии и замечания.

rash

Задача 1.

Претензия 1.

-2 балла, вариант не доработан, при z-index:-1; нужна дополнительная обертка с z-index:0; либо твои полоски в родительском блоке с непрозрачным фоном видно не будет.

Замечание принято. Только дополнительная обертка все равно не нужна.

Задача 3.

Претензия 1.

.block-title::after {background: red;}

-0 баллов, но зачем все таки?

Да это было задано пока позиционировал. Потом бордерами уголок сделал, а это не оторвал. Там, кстати, еще кое-что оторвать можно во второй задаче ) Но это тоже уже потом заметил.

[Vlad]

exessqd1, ваши претензии понятны, но не принимаются. Разумеется, я не копал дотошно каждый код, проверяя его под разные условия, а оценивал достаточно прямолинейно. Градиента в одном из браузеров нет, тени в одном из браузеров нет - 30 баллов, в правилах конкурса этот момент оговорен. Также добавлял или снимал баллы за одни и те же недочёты (в основном по 10).

В любом случае первая тройка победителей остаётся неизменной.

[ilhan]

С оценкой результатов согласен. Но еще хотелось услышать более детальный разбор с примерами как бы лучше сделать в том или ином случае.

-10 баллов за проблему с тенью в Хроме (задача 2). - тень в хроме просто забыл добавить, простая невнимательность

Владу спасибо за интересынй конкурс.

[Vlad]

Медальки и репутация розданы. Поскольку участников было не так и много, несколько изменил процесс награждения. Первые 9 участников (места с 1 по 6) получают золотую медаль с текстом "Победитель мини-конкурса". Все остальные участники, кто выполнил в срок три задачи, получают серебряную медаль с текстом "Лауреат мини-конкурса". Первые три места выделены особо местами. Если есть пожелания, то текст можно изменить.

Тех, кто занял первые три места, прошу прислать мне на ящик vlad@htmlbook.ru ваши ники, ФИО, адреса и размеры для отправки маек. Типовые размеры - S (44-46), M (46-48), L (48-50), XL (50-52), XXL (52-54), XXXL (54)

[lexxcode]

А где смотреть медальки?? В профиль > награды?? Не могу найти, иль не туда смотрю

Edited July 8, 2011 by alexriz

[leoni4]

Это была одной из задач мини-конкурса, привлечь новичков на форум. Хорошо, что приняли участие новые люди.

Vlad, я сразу так и понял

Вообще сайтом/форумом пользуюсь, около полутора года.

С легкой руки моего знакомого, который сказал: "Хочешь изучать веб? Добавь этот сайт в закладки"

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