Jump to content
  • Sign Up
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,842
    Total Members
    1,451
    Most Online
    Suppilulima
    Newest Member
    Suppilulima
    Joined
  • Recently Browsing   0 members

    No registered users viewing this page.

  • Спрашивают сейчас

  • Пишут сейчас

    • Мучаюсь, не могу не как попасть на иконки вацапа и вайбера, используя карту изображений. Не как не пойму как эти координаты высчитать.   В итоге сделал три картинки и задал инлайн блок и всем картинкам ссылки.
    • Облако в помощь: как облачные технологии помогают известным компаниям Ценным опытом нужно делиться, особенно – опытом успешного использования облачных сервисов. Начнем с опыта компаний, чьи товары и услуги на слуху по всему миру. Поговорим о тех, кто внедрил облачные технологии (или планирует это сделать) и выгодно использует свое облачное преимущество над конкурентами.   Немного истории   Люди грезили облаками всегда. И если в буквальном смысле их покорение далось человечеству еще в 18 веке (спасибо братьям Монгольфье), то в интересующем нас значении все произошло много позже.   Ждать пришлось более двух столетий. Да, «облачные» идеи провозглашались еще в 50-х годах 20 века, задолго до появления интернета, но впервые по-настоящему материализовались лишь в 1999 году. Тогда компания Salesforce начала давать пользователям доступ к своим вычислительным ресурсам через веб-сайт. Новинка разлеталась как горячие пирожки, поэтому скоро похожими решениями обзавелись гиганты – Amazon, Google, IBM и Microsoft.   Облако на колесах   Компьютерам, как известно, уже давно не сидится в офисах – добрались они и до автопромышленности, причем много лет назад. А где компьютеры, там и до облака рукой подать. Одними из первых это смекнули в компании Volvo и приступили к созданию умного автомобиля нового поколения. А работать он будет вот как: автомобиль во время движения фиксирует все потенциальные опасности (скользкий участок трассы, яма, авария, обломок дерева и т.д.) и передает их в облачную базу данных, откуда эта информация транслируется на все автомобили, которые приближаются к опасному отрезку пути. Если Volvo успеет внедрить эту технологию раньше всех, то наверняка покорит сердца еще большего количества автолюбителей, в частности тех, кому безопасность на дороге превыше всего.       Финансы В банковском деле вопрос безопасности тоже стоит далеко не на последнем месте. Это, а еще желание опередить конкурентов в плане производительности привело в облака мировых гигантов банковского дела: BBVA, Goldman Sachs, Capital One и других. За признанными авторитетами подтягиваются организации поменьше – облачные технологии становятся трендом среди банкиров.   В Украине процесс виртуализации хоть и отстает немного, но на месте не стоит. Не так давно экс-топы ПриватБанка анонсировали запуск осенью 2017 года первого в стране мобильного банка без физических отделений. Сами разработчики обещают, что приложение будет даже круче, чем Приват24. Ждем.   Умный дом…   Технологии умного дома стремительно обретают популярность по всему миру. Активнее всего их внедряют в США, Китае и Германии. Суть следующая – в доме подключаются датчики и устройства, которые связывают между собой все электроприборы и позволяют управлять ими с помощью одного пульта или даже смартфона. Чтобы хранить и обрабатывать весь массив информации, пользователю, по логике, нужен мощный компьютер, что сказывается на стоимости такого решения. Выход нашелся довольно быстро – обрабатывать информацию в вычислительном облаке, что позволило снизить затраты на умный дом, подняв тем самым его популярность.   Если полноценный умный дом не по карману, то можно выбрать его «упрощенные», бюджетные версии. В частности, компания Xiaomi со своим Smart Home Kit предложила автоматизировать основные процессы в доме по доступной цене, чем значительно повысила свой авторитет на рынке.   …да и город не дурак   Если построить рядом много умных домов, получится умный город? Ну, почти. :) Умный город – это еще и интеллектуальные системы общественного транспорта, виртуальные очереди в поликлинику и городские службы, централизованная система проката велосипедов и автомобилей и много других по-настоящему классных и нужных решений. Среди европейских городов такие системы частично реализованы в Париже, Мадриде, Барселоне, Лондоне.   Не отстает Китай. Так, власти административного района Макао (или, как его еще называют, «Китайский Лас-Вегас») заключили соглашение на внедрение облачных технологий с компанией Alibaba. Уже через 4 года Макао превратится в умный город с развитой ИТ-инфраструктурой.   На этом, пожалуй, пока сделаем паузу. Впишите и свое имя в список великих, прихватив с собой облако на удачу. Не знаете, с чего начать? Обращайтесь к нам за грамотной консультацией, мы рады вам 24х7.    
    • По указанному адресу убрал, проблема осталась
  • Popular Contributors

×
×
  • Create New...