terorama

Тогда уже куда проще через скрипт добавить обертку $('img.red').wrap($('<div/>',{class:'overlay'}));http://jsbin.com/UgewunaM/4/edit

Да, кстати, это вариант, правда будет работать только в хроме. .red:hover { -webkit-filter:hue-rotate(-10deg);} http://jsbin.com/UgewunaM/3/edit Подробнее о фильтрах http://habrahabr.ru/post/144852/

А в чем проблема, если я правильно понимаю, это просто http://jsbin.com/UgewunaM/1/edit

Может стоит почитать что такое семантика? Ок, может стоит -)

В общем-то ничего не изменилось в плане семантики ) Может так? <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).

-) Ок, поправил разметку <header> <h1>Blog name</h1> <h2>blog description</h2> <div class="description"> <h3>Some semantic stuff</h3> <h4>Some text</h4> </div> </header> Да, и чуть не забыл... ) Элементы слева должны быть выровнены по ширине (по самому широкому элементу слева). Аналогично элементы справа.

Лично я, как начинающий, испытываю больше траблов с тем, как расставить элементы, чем с оформлением. (Имхо, оформление - это проще) Например, такая элементарная задача, которая тем не менее может вызвать затруднения у новичка. Для такой разметки <header> <h1>Blog name</h1> <h2>blog description</h2> <h3>Tel: 7-777-77-77</h3> <h4>Some text</h4> </header>Нужно расставить элементы так: Ширина и высота заголовков не заданы. Ширина заголовков зависит от размера содержимого. Высота - от размера шрифта и высоты линии, про которые в свою очередь ничего не известно, кроме того, что они разные.

Адаптивный блок Трехмерная таблица Красная кнопка Адаптивный слайдер Решение http://jsbin.com/uqONuMu/1/edit Высота колонок Разноцветная таблица Слайдер Выпадающее меню Меню работает без использования JavaScript. Подменю открываются по щелчку мышью по стрелке рядом с соответствующим пунктом. При повторном щелчке соответствующее подменю закрывается. Подменю открываются с анимацией: Подменю 2-го уровня разворачивается сверху, (то-есть начальная высота блока 0) Подменю 3-го уровня разворачивается слева (начальная ширина блока 0) Решение http://jsbin.com/aQUPULa/1/edit

Ок, Спасибо.

Выравнивание блоков в контейнере Выравнивание блоков с помощью абсолютного позиционирования Нужно, используя абсолютное позиционирование, разместить блоки по центру узлов сетки, делящей контейнер на 4 части по горизонтали и вертикали. Решение http://jsbin.com/iCikaPug/1/edit Рисунок из плавающих блоков Нужно, манипулируя шириной, высотой, отступами и свойством clear блоков, получить такое изображение Решение http://jsbin.com/eLAHUWe/1/edit Трубопровод Стрелка Заголовки Нужно оформить заголовки таким образом: Решение http://jsbin.com/ugOVanIL/2/edit Соударяющиеся шарики

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

Спираль Задание: Изобразить спираль Решение http://jsbin.com/OBEpABab/1/edit 3D- трансформации Задание: Дана разметка <div class="a"> <div class="red"> red </div> <div class="orange"> orange </div> <div class="yellow"> yellow </div> <div class="green"> green </div> </div> Используя 3D - трансформации оформить ее в виде такого изображения Решение http://jsbin.com/UZodIBEt/1/edit Креативный div Задание: Дан один элемент div <div></div> Нужно оформить его таким образом символ коня ♘ Решение http://jsbin.com/aRafOciH/1/edit Аккордеон Задание: Создать аккордеон с переключающимися вкладками без использования JavaScript Решение http://jsbin.com/eyAxIha/1/edit (Для переключения вкладок используются скрытые чекбоксы. Подробнее про чекбокс-хак здесь http://tympanus.net/codrops/2012/09/13/button-switches-with-checkboxes-and-css3-fanciness/ ) Вложенные блоки Задание: Даны 5 вложенных блоков с текстом <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> <div>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet<span></span> </div></div></div></div></div> Нужно оформить их таким образом Решение http://jsbin.com/agikesEc/1/edit Повернутый заголовок Задание: На основании следующей разметки <header> <h1>Blog name</h1> <h2>blog description</h2> <h3>Tel: 7-777-77-77</h3> <h4><span>Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet Lorem Ipsum Dolor Sit Amet</span></h4> </header> нужно изобразить такой заголовок Решение http://jsbin.com/UyaBejU/1/edit

Галстук Раскрашенное поле Крестики-нолики Перевернутая таблица Списки Нужно оформить их следующим образом: Решение: http://jsbin.com/epAxiwe/4/edit Снеговик Форма входа Нужно оформить ее таким образом Социальные иконки: http://htmlbook.ru/files/social_icons.png Решение: http://jsbin.com/UVUzugu/1/edit Выравнивание блоков Цветок Диагональный текст Нужно выстроить текст в блоках по диагонали Решение http://jsbin.com/IJiwoJoP/1/edit

Я просто, изучая CSS, сталкиваюсь с разными нюансами верстки, чтобы лучше разобраться - придумываю какой-нибудь пример, связанный с одним конкретным нюансом. Здесь задачи, придуманные по такому принципу. Да, Ок, сгруппирую. Не удается все запихнуть в один пост - пишет недопустимое число изображений И как удалить предыдущие сообщения?