Лучшая задача по CSS

[Vlad]

Поскольку на конкурс выставили достаточно много работ, выбираем не лучшую задачу, а автора лучшей задачи. Награждать то его надо, по любому. В конкурсе приняло участие 11 человек, предоставили 48 задач.

 

Авторы публикуются в той последовательности, что и сдавали работы, все задачи можно посмотреть в этой теме. Ниже ссылки на сообщения с задачами.

 

1. mrnobody

http://htmlforum.ru/index.php?showtopic=46658#entry311452

 

2. iKNG

http://htmlforum.ru/index.php?showtopic=46658#entry311458

 

3. Bassline

http://htmlforum.ru/index.php?showtopic=46658#entry311612

 

4. Vezha

http://htmlforum.ru/index.php?showtopic=46658#entry311618

 

5. terorama

http://htmlforum.ru/index.php?showtopic=46658#entry312029

http://htmlforum.ru/index.php?showtopic=46658#entry312033

http://htmlforum.ru/index.php?showtopic=46658#entry312040

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312378

 

6. gvardi

http://htmlforum.ru/index.php?showtopic=46658#entry312162

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312538

 

7. Kyokata

http://htmlforum.ru/index.php?showtopic=46658#entry312322

 

8. ALEEX SWN

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312450

 

9. alexriz

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312552

 

10. Softlink

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312555

 

11. sigma77

http://htmlforum.ru/index.php?showtopic=46658&page=2#entry312561

 

Голосование продлится до 5 декабря. Напоминаю, что участвовать в опросе могут те, у кого не меньше двух сообщение на форуме.

[vinny]

слабенько что-то. не практические какие-то у вас задачи, народ) я б ни одно не поместил на сайт, ибо все как в 90-ые ( я про дизайн). нужно ж следить за временем и придумывать невероятное что-то) а то кнопки, часы, что тут такого

Edited November 29, 2013 by vinny

[klierik]

слабенько что-то. не практические какие-то у вас задачи, народ) я б ни одно не поместил на сайт, ибо все как в 90-ые ( я про дизайн). нужно ж следить за временем и придумывать невероятное что-то) а то кнопки, часы, что тут такого

 

 

почему бы тебе не пойти на свой сайт и там создать современное супер-пупер задание?!

[lexxcode]

 

слабенько что-то. не практические какие-то у вас задачи, народ) я б ни одно не поместил на сайт, ибо все как в 90-ые ( я про дизайн). нужно ж следить за временем и придумывать невероятное что-то) а то кнопки, часы, что тут такого

 

 

почему бы тебе не пойти на свой сайт и там создать современное супер-пупер задание?!

 

 

почему бы не начинать друг друга куда-то посылать?!

[Zverushka]

Задания замечательные. Я так сходу не сумею даже. На досуге сяду, буду разбирать каждый пример.

[terorama]

слабенько что-то. не практические какие-то у вас задачи, народ) я б ни одно не поместил на сайт, ибо все как в 90-ые ( я про дизайн). нужно ж следить за временем и придумывать невероятное что-то) а то кнопки, часы, что тут такого

 

Лично я, как начинающий, испытываю больше траблов с тем, как расставить элементы, чем с оформлением.

(Имхо, оформление - это проще)

 

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

 

Для такой разметки

  <header>    <h1>Blog name</h1>    <h2>blog description</h2>        <h3>Tel: 7-777-77-77</h3>    <h4>Some text</h4>  </header>

Нужно расставить элементы так:

 

Ширина и высота заголовков не заданы. Ширина заголовков зависит от размера содержимого. Высота - от размера шрифта и высоты линии, про которые в свою очередь ничего не известно, кроме того, что они разные. 

Edited December 1, 2013 by terorama

[swandev]

 

слабенько что-то. не практические какие-то у вас задачи, народ) я б ни одно не поместил на сайт, ибо все как в 90-ые ( я про дизайн). нужно ж следить за временем и придумывать невероятное что-то) а то кнопки, часы, что тут такого

 

Лично я, как начинающий, испытываю больше траблов с тем, как расставить элементы, чем с оформлением.

(Имхо, оформление - это проще)

 

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

 

Для такой разметки

  <header>    <h1>Blog name</h1>    <h2>blog description</h2>        <h3>Tel: 7-777-77-77</h3>    <h4>Some text</h4>  </header>

Нужно расставить элементы так:

 

Ширина и высота заголовков не заданы. Ширина заголовков зависит от размера содержимого. Высота - от размера шрифта и высоты линии, про которые в свою очередь ничего не известно, кроме того, что они разные. 

 

Не семантично как-то телефон и some text заголовками делать...

[terorama]

Не семантично как-то телефон и some text заголовками делать...

 

-)    Ок, поправил разметку

 

  <header>        <h1>Blog name</h1>    <h2>blog description</h2>       <div class="description">        <h3>Some semantic stuff</h3>       <h4>Some text</h4>    </div>  </header>

  

Да, и чуть не забыл... ) Элементы слева должны быть выровнены по ширине (по самому широкому элементу слева).

Аналогично элементы справа.

Edited December 1, 2013 by terorama

[lexxcode]

-)    Ок, поправил разметку

Вообщем-то  ничего не изменилось в плане семантики )

[terorama]

 

-)    Ок, поправил разметку

В общем-то  ничего не изменилось в плане семантики )

 

 

Может так?

  <header>        <h1><span>Blog name</span></h1>    <h2><span>blog description</span></h2>     <div class="clear"></div>        <h3><span>Something that definitely should be in the h3 header</span></h3>    <h4><span>Same as before</span></h4>     <div class="clear"></div>     </header>

В общем не важно: моя идея была в том, что начинающим могут быть интересны задачи связанные с позиционированием и выравниванием элементов, (например актуальная задача: нужно выровнять элементы фотогалереи с изображениями произвольного размера etc).

 

Edited December 1, 2013 by terorama

[lexxcode]

Может так?

 

Может стоит почитать что такое семантика?

[terorama]

 

Может так?

 

Может стоит почитать что такое семантика?

 

 

Ок, может стоит -)

[Игорь Ермаков]

Вот вам задача ребят, ответьте хотя бы о принципиальной возможности решения. В общем изображение через <img> произвольного размера, нужно написать класс, который имитировал бы эффект color overlay, при добавлении, изображение должно продолжать вести себя как изображение. 

[terorama]

Вот вам задача ребят, ответьте хотя бы о принципиальной возможности решения. В общем изображение через <img> произвольного размера, нужно написать класс, который имитировал бы эффект color overlay, при добавлении, изображение должно продолжать вести себя как изображение. 

 

А в чем проблема, если я правильно понимаю, это просто

http://jsbin.com/UgewunaM/1/edit

[Игорь Ермаков]

А без обёрточного блока? 

[Zverushka]

Только фильтры применять, мало кем поддерживается и сложно это. Да и тег не закрывающийся - псевдоблок не вставишь.

Разве через скрипт оберткой оборачивать, чтобы хтмл был чище, но зачем.

[terorama]

Только фильтры применять, мало кем поддерживается и сложно это. Да и тег не закрывающийся - псевдоблок не вставишь.

Разве через скрипт оберткой оборачивать, чтобы хтмл был чище, но зачем.

 

Да, кстати, это вариант, правда будет работать только в хроме.

.red:hover {   -webkit-filter:hue-rotate(-10deg);} 

http://jsbin.com/UgewunaM/3/edit

 

Подробнее о фильтрах http://habrahabr.ru/post/144852/

[iKNG]

Я просто уделял внимание этому пункту:

 

задача не должна быть слишком сложной и требовать много времени на её решение. Таким образом, целые страницы или сложные формы для вёрстки не годятся.

Ребят, какие анимации? Какие сложные 3D объекты? Почему нельзя просто взять и сделать просто кнопку? Не важно, насколько она современная и модная. Она просто хорошая и этого достаточно. В задаче должно быть просто задействовано как можно больше разных стилевых свойств. Это же для практики умения использовать стилевые свойства после обучения CSS, а не практика умения идти в ногу с модой сайтовых дизайнов. Большинство как на подбор - анимация. Ну что вы на ней зациклились? Других стилевых свойств нету?

P.S. Я один за себя не голосовал, да?) Шучу

[lexxcode]

P.S. Я один за себя не голосовал, да?) Шучу

Я тоже за себя не голосовал)

[iKNG]

 

P.S. Я один за себя не голосовал, да?) Шучу

Я тоже за себя не голосовал)

 

Ну за Вас-то все и так голосуют. У Вас одна из лучших работа. А вот:

[lexxcode]

ну скажем, это не запрещено правилами голосования, так что...  

[swandev]

(http://prntscr.com/2867le

[Игорь Ермаков]

Только фильтры применять, мало кем поддерживается и сложно это. Да и тег не закрывающийся - псевдоблок не вставишь. Разве через скрипт оберткой оборачивать, чтобы хтмл был чище, но зачем.

А если есть информация, что изображение строго .jpg, может можно скриптом как-то обработать изображение? Вроде не сложно должно быть, только хз как в js-е это всё делать, если бы задача для сервера была бы то простая программка на питоне и норм. 

Edited December 2, 2013 by Игорь Ермаков

[lexxcode]

ну теоретически можно взять картинку загрузить в canvas, обработать цвет как там нужно, получить хеш новой картинки и обновить в теге img

[Vlad]

Рекомендую авторам работ проголосовать за себя. Правилами это разрешено, а ваши моральные ограничения никому не сдались.