Мини-конкурс «Задание по CSS»

[Vlad]

Необходимо составить задачу на практические знания CSS3 и привести её решение. Все присланные задачи публикуются в специальном разделе сайта htmlbook (http://htmlbook.ru/practical) с указанием автора и ссылки на его сайт. При написании задачи придерживайтесь следующих рекомендаций:

• задача должна решаться без дополнительных скриптов, только с помощью HTML и CSS;
• задача должна быть комплексной и задействовать разные приёмы и стилевые свойства;
• следует привести своё решение задачи, желательно с комментариями и пояснениями.
• задача не должна быть слишком сложной и требовать много времени на её решение. Таким образом, целые страницы или сложные формы для вёрстки не годятся.

Результат выставляем в специальной теме форума в виде текста и всех необходимых скриншотов.

Принять участие в конкурсе может любой желающий, зарегистрированный на форуме htmlbook.ru.

Приём работ завершается 28 ноября в 10:00 UTC (13 часов Киева, Минска; 14 Москвы; 16 Екатеринбурга; 17 Омска; 18 Красноярска; 19 Иркутска; 20 Якутска).

Все работы будут выставлены на общее голосование, победителем становится участник, набравший максимальное количество голосов к 10:00 UTC 5 декабря. Участники, занявшие первые три места получают книги по их выбору, плюс 30 к репутации и медальку победителя. Все участники, независимо от занятого места, получают плюс 10 к репутации и медальку лауреата.

[vinny]

картинки можно использовать?

[Vlad]

Можно.

[terorama]

Влад, я сгруппировал предыдущие сообщения с отдельными задачами в теме в 2 поста, не соображу как удалить предыдущие сообщения, это возможно?

[lexxcode]

Точно все собрал? Тогда я удалю старые

[terorama]

Точно все собрал? Тогда я удалю старые

 

Ок, Спасибо.

[Zverushka]

Возник вопрос про задачу с волной от антенны- в мозилле волна криво распространяется, как бы упираясь в потолок и дальше расширяясь вниз и вправо - как можно избежать этого эффекта? (в хроме нормально) http://jsfiddle.net/mrnobody/BXs8n/

Edited December 21, 2013 by Zverushka

[iKNG]

Возник вопрос про задачу с волной от антенны- в мозилле волна криво распространяется, как бы упираясь в потолок и дальше расширяясь вниз и вправо - как можно избежать этого эффекта? (в хроме нормально) http://jsfiddle.net/mrnobody/BXs8n/

26.0. Все нормально

[Zverushka]

В вин8 криво, исправила ошибку, задав позиционирование для анимации отдельно.

[Zverushka]

У Vezha первое задание с del b ok кнопками стоит неверная ссылка на готовое решение (там вместо нужного кода - веселая таблица)

Edited December 21, 2013 by Zverushka

[Zverushka]

Заинтересовала эта техника - но я так и не поняла, как же реализовано сохранение пропорций квадрата - ширина и выоста как-то особо реагирует на ротейт от родителя или как? Есть ли где-то подробное объяснение?

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

Edited December 22, 2013 by Zverushka

[SelenIT]

ширина и выоста как-то особо реагирует на ротейт от родителя или как?

Как я понял, реагирует только ширина. Но у ротейтнутого контейнера ширина ориентирована по вертикали и выглядит как высота

 

Остроумно, но "классическое" решение с паддингами как-то привычнее, кроссбраузернее и экономичнее (не требует обрезки лишнего фона)...

[Zverushka]

но "классическое" решение с паддингами как-то привычнее, кроссбраузернее и экономичнее (не требует обрезки лишнего фона)...

 

А можно ссылочку на решение?

[SelenIT]

Первоисточник, AFAIK, здесь: http://alistapart.com/article/creating-intrinsic-ratios-for-video/