Sign in to follow this  
Vlad

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

  

15 members have voted

  1. 1. Лучший автор задачи по CSS

    • mrnobody
      2
    • iKNG
      2
    • Bassline
      2
    • Vezha
      1
    • terorama
      3
    • gvardi
      1
    • Kyokata
      2
    • ALEEX SWN
      4
    • alexriz
      5
    • Softlink
      6
    • sigma77
      6


Recommended Posts

Поскольку на конкурс выставили достаточно много работ, выбираем не лучшую задачу, а автора лучшей задачи. Награждать то его надо, по любому. В конкурсе приняло участие 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 декабря. Напоминаю, что участвовать в опросе могут те, у кого не меньше двух сообщение на форуме.

Share this post


Link to post
Share on other sites

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

Edited by vinny

Share this post


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

 

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

Share this post


Link to post
Share on other sites

 

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

 

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

 

 

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

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

 

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

 

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

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

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

 

BaZU-9GCMAEGoaY.png

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

Edited by terorama

Share this post


Link to post
Share on other sites

 

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

 

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

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

 

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

 

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

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

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

 

BaZU-9GCMAEGoaY.png

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

 

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

Share this post


Link to post
Share on other sites

Не семантично как-то телефон и 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>

  

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

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

BaZklSvCEAAO3XG.png

Edited by terorama

Share this post


Link to post
Share on other sites
-)    Ок, поправил разметку

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

Share this post


Link to post
Share on other sites

 

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

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

 

 

Может так?

  <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).

 

BaZ__ReCcAEIVhN.png

Edited by terorama

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

 

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

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

Share this post


Link to post
Share on other sites

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

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

Share this post


Link to post
Share on other sites

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

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

 

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

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

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

 

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

Share this post


Link to post
Share on other sites

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

 

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

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

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

Share this post


Link to post
Share on other sites

 

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

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

 

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

d1c94cff56bce4cea87adf605eb3c714.png

Share this post


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

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

Edited by Игорь Ермаков

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites
Guest
This topic is now closed to further replies.
Sign in to follow this  

  • Member Statistics

    46,441
    Total Members
    3,128
    Most Online
    Talomir
    Newest Member
    Talomir
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.