Jump to content

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


Vlad
 Share

  

15 members have voted

You do not have permission to vote in this poll, or see the poll results. Please sign in or register to vote in this poll.

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

Link to comment
Share on other sites

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

Edited by vinny
Link to comment
Share on other sites

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

 

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

Link to comment
Share on other sites

 

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

 

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

 

 

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

Link to comment
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
Link to comment
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 заголовками делать...

Link to comment
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
Link to comment
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
Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

 

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

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

Link to comment
Share on other sites

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

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

Link to comment
Share on other sites

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

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

 

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

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

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

 

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

Link to comment
Share on other sites

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

 

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

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

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

Link to comment
Share on other sites

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

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

Edited by Игорь Ермаков
Link to comment
Share on other sites

Guest
This topic is now closed to further replies.
 Share

  • Обсуждения

    • Сам сделал этот эффект? Ну или вообще сам писал этот код? 
    • Доброго времени суток. Есть сайт, онлайн магазин на WP, есть код- кнопка (на скрине) <div class="woocommerce-product-details__short-description"> <h5 class="wd-entities-title green sg-popup-id-12581">Нашли дешевле? Снизим цену!</h5> <?php echo $short_description; // WPCS: XSS ok. ?> </div> нужно как-то ограничить данный код от 2 категорий товаров на сайте, ранее работал с opencard там было все просто, а тут информации найти не могу, либо просто не так ищу. Прошу помощи либо статьей, либо направить в нужное русло поисков, может я просто формулирую неправильно данный вопрос. Заранее благодарю.
    • Я не вижу указаных Вами проблем заданном сайте   PS: устное предупреждение за мультипостинг. Используйте одну тему для одного вопроса.
    • Мой сайт - https://vasyldubno.github.io/project1/#directions На нем установлен скрипт MixItUp 3 для фильтрации постов. На ноутбуке все отлично работает. Но на смартфоне не работает, и в консоле выдает ошибку - [MixItUp] WARNING: An operation was requested but the MixItUp instance was busy. The operation was rejected because the queue is full or queuing is disabled.
    • Выложите работающий пример в песочницу. А так же настоятельно рекомендую ознакомится с темой 👇  
×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue. See more about our Guidelines and Privacy Policy