terorama

ну теоретически можно взять картинку загрузить в canvas, обработать цвет как там нужно, получить хеш новой картинки и обновить в теге img

Тогда уже куда проще через скрипт добавить обертку

 $('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/

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

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

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).

Не семантично как-то телефон и 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>

Да, и чуть не забыл... ) Элементы слева должны быть выровнены по ширине (по самому широкому элементу слева).

Аналогично элементы справа.

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

Лично я, как начинающий, испытываю больше траблов с тем, как расставить элементы, чем с оформлением.

(Имхо, оформление - это проще)

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

Для такой разметки

  <header>    <h1>Blog name</h1>    <h2>blog description</h2>        <h3>Tel: 7-777-77-77</h3>    <h4>Some text</h4>  </header>

Нужно расставить элементы так:

Ширина и высота заголовков не заданы. Ширина заголовков зависит от размера содержимого. Высота - от размера шрифта и высоты линии, про которые в свою очередь ничего не известно, кроме того, что они разные. 

Адаптивный блок
 

 

Задание:

 

Изобразить блок, ширина и высота которого составляет 50% от ширины окна браузера 

 

 

Решение

 

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

 

 

Трехмерная таблица

 

Задание:

 

Дана таблица

 <table>    <tr><td>A</td><td>B</td><td>C</td></tr>    <tr><td>D</td><td>E</td><td>F</td></tr>    <tr><td>G</td><td>H</td><td>I</td></tr>  </table>

Нужно оформить ее таким образом

 

 

Решение

 

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

 

Красная кнопка

 

Задание:

 

Нужно, используя CSS 3, нарисовать конструкцию, включающую кнопку и две створки.

В исходном состоянии створки повернуты на 45 градусов по часовой стрелке и закрывают кнопку.

 

По нажатию на конструкцию  реализуется анимация, состоящая из 2-х фаз:

 

1) Створки поворачиваются на 45 градусов против часовой стрелки (т.е. встают вертикально)

2) Створки раздвигаются соответственно влево и вправо, открывая кнопку.

 

При повторном нажатии створки возвращаются в исходное положение

 

(символ коня ♘ )

 

Решение

 

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

 

Адаптивный слайдер 

 

Задание:

Реализовать слайдер, переключающийся при изменении ширины окна браузера.

 

Например:

 

  1.  Слайдер включает 6 изображений.

 

  2.  При ширине окна браузера более 900px слайдер показывает 1-е изображение

 

  3.  Если ширина окна браузера меньше 900px слайдер переключается на следующее изображение при изменении ширины на 50px. 

(то-есть 900-850px - 2 изображение 850-800 - 3-е, 800-750 - 4-е, 750-700 - 5-е 700-650 - 6-е)

 

  4. При ширине окна меньше  650px - слайдер показывает последнее изображение

 

 

 

Решение

 

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

 

 

Высота колонок

 

Вариация классической задачи про колонки одинаковой высоты.

 

—————————————-

Базовая постановка задачи: 

Даны три колонки разного цвета.  Высота  колонок определяется контентом внутри.

Необходимо сделать все колонки по высоте равными самой высокой колонке.

 

Подробнее здесь: http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks

—————————————-

 

Задание

Реализовать следующую разметку:

1.  Верхняя часть состоит из 3-х колонок одинаковой ширины (равной 1/3 ширины экрана)

 

2.  В верхней части колонок расположены два блока (Lorem Ipsum) произвольной высоты, которые "толкают" содержимое колонок вниз.

 

3.  Первые 2 колонки содержат контент произвольной высоты.

Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

 

4.  Под первыми 2-мя колонками расположен футер (зеленый). Высота футера зависит от контента в нем.

 

5.  Правая колонка (голубая) должна быть равна по высоте сумме высот 1-й колонки и футера.

 

6.  Нижняя часть состоит из 2-х колонок одинаковой ширины (равной половине ширины экрана)

Необходимо сделать высоту колонок одинаковой (по высоте колонки с наибольшим количеством контента)

 

Решение 

 

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

 

Разноцветная таблица 

 

Задание:

 

Нарисовать таблицу

 

 

Решение

 

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

 

Слайдер

 

Задание:

 

Реализовать без использования JavaScript слайдер с последовательным переключением изображений.

 

Слайдер может включать неограниченное количество слайдов.

Для навигации используется два управляющих элемента в виде стрелок по бокам.

 

По нажатию на стрелку вправо слайдер переключается на следующее изображение

По нажатию на стрелку влево слайдер возвращается на первое изображение.

 

Решение

 

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

 

Выпадающее меню

 

Задание:

 

Изобразить выпадающее меню.

 

Разметка 

 <ul class="root">    <li><a href="#">Home</a></li>    <li>      <input type="checkbox" name="z" />      <a href="#">Products</a>            <ul>        <li>          <input type="checkbox" name="z" />                    <a href="#">T-Shirts</a>                     <ul>             <li><a href="#">Type 1</a></li>             <li><a href="#">Type 2</a></li>             <li><a href="#">Type 3</a></li>             <li><a href="#">Type 4</a></li>           </ul>        </li>        <li><a href="#">Shirts</a></li>        <li><a href="#">Accessories</a></li>               </ul>     </li>    <li><a href="#">Stores</a></li>    <li><a href="#">Discounts</a></li>    <li><a href="#">Contacts us</a></li>  </ul> 

 

Меню работает без использования JavaScript.

 

Подменю открываются по щелчку мышью по стрелке рядом с соответствующим пунктом.

При повторном щелчке соответствующее подменю закрывается.

 

Подменю  открываются с анимацией:

Подменю 2-го уровня разворачивается сверху, (то-есть начальная высота блока 0)

Подменю 3-го уровня разворачивается слева  (начальная ширина блока 0)

 

 

Решение

 

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

 

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

Ок, Спасибо.

Выравнивание блоков в контейнере

Задание:

Контейнер размером 300px X 300px содержит 9 блоков произвольной высоты и ширины.

Высота и ширина внутренних блоков не превышает 100px.

Необходимо расположить блоки в 3 ряда и выровнять следующим образом.

1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го

2) По горизонтали - justify - то-есть левый и правый элементы упираются в края контейнера,

промежутки между элементами одинаковые

(Для решения можно использовать любую вспомогательную разметку)

 

 

Решение

 

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

 

 

2 Вариант задачи.

 

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

 

Блоки нужно выровнять по сетке:

 

1) По вертикали - по средней линии, соответственно 50px для 1-го ряда, 150px для 2-го и 250 для 3-го

2) По горизонтали - по средней линии соответственно 50px для 1-й колонки, 150px для 2-й и 250 для 3-й

 

(аналогично для решения можно использовать дополнительную разметку)

 

 

Решение

 

http://jsbin.com/eBAjIZABI/2/edit

Выравнивание блоков с помощью абсолютного позиционирования

 

Задание: 

 

В квадратный контейнер произвольного размера помещены 9 блоков произвольной ширины и высоты.

 

Разметка  (каждый блок содержит внутри один вспомогательный контейнер)

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>Absolute positioning</title>    <style type="text/css">        .red {      background:red;      width:40px;      height:50px;    }    .orange {      width:50px;      height:30px;      background:orange;    }        .yellow {      width:70px;      height:50px;      background:yellow;    }        .lime {      width:70px;      height:30px;      background:lime;    }        .green {      width:50px;      height:70px;      background:green;    }        .cyan {      width:60px;      height:60px;      background:cyan;    }        .blue {      background:blue;      width:40px;      height:70px;    }        .magenta {      width:60px;      height:70px;      background:magenta;    }        .pink {      width:70px;      height:50px;      background:pink;    }  </style></head><body>  <div class="container">    <div class="wrapper red">    <div>    </div></div>      <div class="wrapper orange">    <div>    </div></div>         <div class="wrapper yellow">    <div>    </div></div>         <div class="wrapper lime">    <div>    </div></div>              <div class="wrapper green">    <div>    </div>  </div>    <div class="wrapper cyan">    <div>    </div>  </div>     <div class="wrapper blue">    <div>    </div>  </div> <div class="wrapper magenta">    <div>    </div>  </div> <div class="wrapper pink">    <div>    </div>  </div></div></body></html> 

 

Нужно, используя абсолютное позиционирование, разместить блоки по центру узлов сетки, делящей контейнер на 4 части по горизонтали и вертикали.

 

 

Решение

 

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

 

Рисунок из плавающих блоков

Задание:

Дан контейнер с набором блоков со статическим позиционированием и float:left

 

Разметка

 

<!DOCTYPE html><html><head><meta charset=utf-8 /><title>floats</title>    <style type="text/css">    .container>div {        float:left!important;   position:static!important;}  </style></head><body>  <div class="container">        <div class="a"></div>    <div class="b"></div>    <div class="c"></div>    <div class="d"></div>    <div class="e"></div>    <div class="f"></div>    <div class="g"></div>    <div class="h"></div>    <div class="i"></div>    <div class="j"></div>    <div class="k"></div>    <div class="l"></div>    <div class="m"></div>    <div class="n"></div>    <div class="o"></div>    <div class="p"></div>    </div></body></html>

 

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

 

Решение

 

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

 

Трубопровод

 

Задание

 

Используя спрайт с изображением элементов трубопровода

http://comps.canstockphoto.com/can-stock-photo_csp2136532.jpg ,

нужно получить такое изображение:

 

 

Решение

 

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

 

Стрелка

 

Задание:

 

Изобразить стрелку из блоков

 

 

Решение

 

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

 

Заголовки

 

Задание

 

Дана следующая разметка для заголовков от h1 до h6:

 

 <h1>Header 1        <span>Lorem Ipsum</span>    <span>Lorem Ipsum Dolor Sit Amet </span>     <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet </span>    <span>Lorem Ipsum</span>     </h1>    <h2>Header 2</h2>    <h3>Header 3     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>     <span>Lorem Ipsum</span>  </h3>      <h4>Header 4      <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>      </h4>      <h5>Header 5       <span>Lorem Ipsum</span>      <span>Lorem Ipsum Dolor Sit Amet</span>    <div class="clear"></div>    <span>Lorem Ipsum Dolor Sit Amet</span>        <span>Lorem Ipsum</span>    </h5>    <h6><span>Header 6</span>    <span>Lorem Ipsum Dolor Sit Amet</span>   </h6>   

 

Нужно оформить заголовки таким образом:

 

 

Решение

 

http://jsbin.com/ugOVanIL/2/edit

 

 

Соударяющиеся шарики

 

Задание:

 

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

Справа от шариков расположена стена.

 

Реализовать анимацию:

 

  1)  1 шарик двигается вправо, ударяет 2-й и останавливается.

  2)  После соударения 2-й шарик начинает двигаться вправо до соударения с 3-м, после чего останавливается

  3)  3-й и 4-й аналогично.

 

  4)  4-й шарик движется вправо до соударения со стеной, после чего возвращается, ударяя 3-й шарик справа, и останавливается.

 

  5)  3-й шарик после соударения движется влево до соударения со 2-м и останавливается.

  6)  2-й и первый аналогично.

 

  (после того, как 1-й шарик возвращается влево, все шарики стоят в исходной позиции и анимация заканчивается)

 

 

Решение

 

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

 

 

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

Галстук

Задание:

Дана следующая html - разметка

 <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>      <div class="a">  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  <div></div>  </div>

На основании нее нужно создать такую фигуру:

 

Решение:

 

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

Раскрашенное поле

Задание:

создать такое поле

 

 

Решение:

 

http://jsbin.com/edOzuquc/6/edit

Крестики-нолики

Задание:

 

Дана разметка:

<div class="container">  <div class="a">    <div class="b">    </div>  </div>  <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>      <div class="a">     <div class="b">    </div>  </div>  </div>

нужно создать такую фигуру:

 

 

Решение:

 

http://jsbin.com/OsAcUd/2/edit

Перевернутая таблица

Задание:

 

Дана таблица

 <table>   <tr><th>A</th><th>B</th><th>C</th></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>   <tr><td>1</td><td>2</td><td>3</td></tr>    </table>

Нужно оформить ее следующим образом

 

Решение:

 

http://jsbin.com/oJAWEGa/2/edit

Списки

Задание:

Даны вложенные списки

<ul>    <li> 1     <ol><li>1.1</li>        <li>1.2</li>        <li>1.3</li>        <li>1.4</li>      </ol>    </li>        <li>2    <ol><li>2.1</li>        <li>2.2</li>        <li>2.3</li>        <li>2.4</li>      </ol>    </li>        <li>3      <ol><li>3.1</li>        <li>3.2</li>        <li>3.3</li>        <li>3.4</li>      </ol>    </li>        <li>4    <ol><li>4.1</li>        <li>4.2</li>        <li>4.3</li>        <li>4.4</li>      </ol>    </li>         </ul>

 

Нужно оформить их следующим образом:

 

 

Решение:

 

http://jsbin.com/epAxiwe/4/edit

Снеговик

Задание:

Даны три вложенных блока

<div><div><div></div></div></div>

Нужно изобразить с их помощью снеговика

 

 

Решение:

 

http://jsbin.com/utaxONO/4/edit

Форма входа

Задание:

Дана форма

<form action="" method="post">        <fieldset>            <label for="uname"> username</label>      <input type="text" name="username" id="uname" placeholder="username" required />      <label for="passw"> password</label>      <input type="password" name="password" id="passw" required />            <button>login</button>      <span class="twitter">login via twitter</span>      <span class="fb">login via facebook</span>    </fieldset>  </form>

 

Нужно оформить ее таким образом

 

Социальные иконки:  http://htmlbook.ru/files/social_icons.png

 

Решение:

 

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

Выравнивание блоков

Задание:

 

С помощью разметки

<div class="a">        <div></div>    <div></div>    <div></div>    <div></div>    <div></div>        <div></div>       <div></div>    <div></div>    <div></div>    <div></div>    </div>

нужно изобразить такую фигуру

 

 

Решение

 

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

Цветок

Задание:

 

С помощью 6 вложенных блоков

<div><div><div>      <div><div><div>      </div></div></div>  </div></div></div>

изобразить цветок

 

 

Решение

 

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

Диагональный текст

Задание:

 

Дана разметка

<div>      <span class="red">red fox chasing</span>     <span class="white">the white rabbit</span>      <span class="red">red mushrooms grow</span>     <span class="white">in the white snow</span>      <span class="red">red fox chasing</span>       <span class="white">the white rabbit</span>   <span class="red">red mushrooms grow</span>   <span class="white">in the white snow</span>   </div>

 

Нужно выстроить текст в блоках по диагонали

 

 

Решение

 

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

@terorama, мне кажется, что многие из твоих задач далеки то практики вёрстки. Выдумщик однако.

И кстати - куча постов как-то не очень смотрится, может сгрупируешь ?

Я просто, изучая CSS, сталкиваюсь с разными нюансами верстки,

чтобы лучше разобраться - придумываю какой-нибудь пример, связанный с одним конкретным нюансом.

Здесь задачи, придуманные по такому принципу. Да, Ок, сгруппирую.

Не удается все запихнуть в один пост - пишет недопустимое число изображений

И как удалить предыдущие сообщения?