Задание для мини-конкурса Блоки

[Vlad]

Задание 1. Эскиз

Уголки фиксированного размера, ширина и высота уголков одинакова, задаётся в пикселах.

Задание 2. Блок с тенью

Содержит скругления в заголовке и внизу блока. Вокруг блока тёмно-зелёная рамка и тень.

Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

Задание 3. Блок с градиентом

Полупрозрачная градиентная рамка вокруг блока с градиентным фоном под заголовком и небольшим треугольником. Фон на странице приведён лишь для наглядности эффекта полупрозрачности. Вы можете указать свою картинку или использовать ту, что в примере по адресу http://htmlbook.ru/example/images/redline.png

Минимальная высота блока составляет 100px.

Скриншоты сделаны в Google Chrome 12.

Для всех заданий необходимо выполнить следующие условия.

• Валидная вёрстка на HTML5.
  
• Валидность CSS не важна.
  
• Таблицы и их имитация через стили не применяются.
  
• JavaScript для решения не требуется.
  
• Блоки делаются без внешних изображений.
  
• Корректное отображение в браузерах IE9, Opera 11.10+, Firefox 5, Safari 5.0.5, Chrome 12+.
  
• Допустимы незначительные отклонения от макета при отображении в разных браузерах.
  
• Блоки «резиновые», т.е. тянутся по ширине окна браузера.
  

Результаты выкладывать в специально созданной для этого теме

На решение трёх задач отводится три часа времени.

Дамы и господа, мальчики и девочки, желаю вам все удачи и побед!

[psywalker]

Vlad, Что за Задание 1. Эскиз ? Что это такое и как должно работать?

[Vlad]

Как на картинке. Блок тянется по ширине и, соответственно, по высоте, уголки фиксированного размера.

[ctpz]

цвета могут несовпадать?

[Vlad]

Если только не сильно, то могут. Но зелёный должен зелёным остаться.

[ctpz]

ну да, но оттенок менять можно же?

[Vlad]

У вас Фотошопа нет что-ли или другого редактора с пипеткой?

[sigma77]

Длина заголовка может меняться, соответственно, должна изменяться и ширина блока под ним, но при этом не превышать 250px.

Т.е. я правильно понимаю: меняем ширину заголовка - меняется ширина "содержимое блока", при этом ширина заголовка не может быть больше 250px? Содержимое блока должно тянуться на всю страницу?

[Vlad]

Заголовок и содержание отделены. При увеличении текста заголовка, должен меняться фон под ним, блок с содержанием остаётся прежним. Если по простому, то <h2 max-width:250px>

[Vlad]

В третьей задача обращаю ваше внимание, что рамка градиентная, сверху она светлее, внизу темнее. Цвета точно соблюдать не обязательно, а вот градиент надо.

[sigma77]

В третьей задача обращаю ваше внимание, что рамка градиентная, сверху она светлее, внизу темнее. Цвета точно соблюдать не обязательно, а вот градиент надо.

А серая или зеленая? А то что-то сколько пипеткой не смотрю, всё цвет одни и тот же.

[Int]

А у меня на работе нет ie 9, у нас только 8

и, блин, обед через полчаса, времени сразу на час меньше Ну нельзя было вечером что ли конкурс сделать?

Или будет второй тур, вечерний?

[Vlad]

А серая или зеленая? А то что-то сколько пипеткой не смотрю, всё цвет одни и тот же.

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

61ccb4

5ca595

А у меня на работе нет ie 9, у нас только 8

и, блин, обед через полчаса, времени сразу на час меньше Ну нельзя было вечером что ли конкурс сделать?

Или будет второй тур, вечерний?

Ну что же вы сейчас то жалуетесь в самый разгар так сказать. Вот кто-то сильно есть хотел, тот уже сделал всё.

[Int]

Я бы сделал, но у меня на работе есть и работа, причём, много, и я начал через полчаса только. Два задания хоть примите, ладно уж. Третье потом вне конкурса попробую сделать, для себя чисто

[exessqd1]

Картинка 2 задачи не отображается перезалей срочно!

[Vlad]

Хорошо, задания принимаются.

Картинка 2 задачи не отображается перезалей срочно!

http://htmlbook.ru/sites/default/files/images/practical/k1.png

http://htmlbook.ru/sites/default/files/images/practical/k2.png

http://htmlbook.ru/sites/default/files/images/practical/k3.png

[ExtreMMator]

Ссылку на бэкграунд к 3ей задаче можно поправить?

[Vlad]

Нет, лучше не править.

[Akaciya]

не успела(((

ну пусть вне конкурса для себя

2 задание

1 задание

Edited July 7, 2011 by Akaciya

[Vlad]

Лучше в эту тему выкладывать, там как раз обсуждение идёт решений.

http://forum.htmlbook.ru/index.php?showtopic=27855