Jump to content

terorama

User
  • Posts

    14
  • Joined

  • Last visited

Everything posted by terorama

  1. Тогда уже куда проще через скрипт добавить обертку $('img.red').wrap($('<div/>',{class:'overlay'}));http://jsbin.com/UgewunaM/4/edit
  2. Да, кстати, это вариант, правда будет работать только в хроме. .red:hover { -webkit-filter:hue-rotate(-10deg);} http://jsbin.com/UgewunaM/3/edit Подробнее о фильтрах http://habrahabr.ru/post/144852/
  3. А в чем проблема, если я правильно понимаю, это просто http://jsbin.com/UgewunaM/1/edit
  4. Может стоит почитать что такое семантика? Ок, может стоит -)
  5. В общем-то ничего не изменилось в плане семантики ) Может так? <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).
  6. -) Ок, поправил разметку <header> <h1>Blog name</h1> <h2>blog description</h2> <div class="description"> <h3>Some semantic stuff</h3> <h4>Some text</h4> </div> </header> Да, и чуть не забыл... ) Элементы слева должны быть выровнены по ширине (по самому широкому элементу слева). Аналогично элементы справа.
  7. Лично я, как начинающий, испытываю больше траблов с тем, как расставить элементы, чем с оформлением. (Имхо, оформление - это проще) Например, такая элементарная задача, которая тем не менее может вызвать затруднения у новичка. Для такой разметки <header> <h1>Blog name</h1> <h2>blog description</h2> <h3>Tel: 7-777-77-77</h3> <h4>Some text</h4> </header>Нужно расставить элементы так: Ширина и высота заголовков не заданы. Ширина заголовков зависит от размера содержимого. Высота - от размера шрифта и высоты линии, про которые в свою очередь ничего не известно, кроме того, что они разные.
  8. Адаптивный блок Трехмерная таблица Красная кнопка Адаптивный слайдер Решение http://jsbin.com/uqONuMu/1/edit Высота колонок Разноцветная таблица Слайдер Выпадающее меню Меню работает без использования JavaScript. Подменю открываются по щелчку мышью по стрелке рядом с соответствующим пунктом. При повторном щелчке соответствующее подменю закрывается. Подменю открываются с анимацией: Подменю 2-го уровня разворачивается сверху, (то-есть начальная высота блока 0) Подменю 3-го уровня разворачивается слева (начальная ширина блока 0) Решение http://jsbin.com/aQUPULa/1/edit
  9. Выравнивание блоков в контейнере Выравнивание блоков с помощью абсолютного позиционирования Нужно, используя абсолютное позиционирование, разместить блоки по центру узлов сетки, делящей контейнер на 4 части по горизонтали и вертикали. Решение http://jsbin.com/iCikaPug/1/edit Рисунок из плавающих блоков Нужно, манипулируя шириной, высотой, отступами и свойством clear блоков, получить такое изображение Решение http://jsbin.com/eLAHUWe/1/edit Трубопровод Стрелка Заголовки Нужно оформить заголовки таким образом: Решение http://jsbin.com/ugOVanIL/2/edit Соударяющиеся шарики
  10. Влад, я сгруппировал предыдущие сообщения с отдельными задачами в теме в 2 поста, не соображу как удалить предыдущие сообщения, это возможно?
  11. Спираль Задание: Изобразить спираль Решение 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
  12. Галстук Раскрашенное поле Крестики-нолики Перевернутая таблица Списки Нужно оформить их следующим образом: Решение: 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
  13. Я просто, изучая CSS, сталкиваюсь с разными нюансами верстки, чтобы лучше разобраться - придумываю какой-нибудь пример, связанный с одним конкретным нюансом. Здесь задачи, придуманные по такому принципу. Да, Ок, сгруппирую. Не удается все запихнуть в один пост - пишет недопустимое число изображений И как удалить предыдущие сообщения?
×
×
  • 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