CSS

.grayscale { 
 -webkit-filter: grayscale(100%);
 -moz-filter: grayscale(100%);
 -ms-filter: grayscale(100%);
 -o-filter: grayscale(100%);
 filter: grayscale(100%);
 filter: url(grayscale.svg#greyscale); /* Firefox 4+ */
 filter: gray; /* IE 6-9 */
}

В этой строчке мы подключаем файл для обесцвечивания объекта в браузере Firefox.

filter: url(grayscale.svg#greyscale);

Создаём файл grayscale.svg и добавляем в него следующий код:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
<filter id="greyscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0.3333 0.3333 0.3333 0 0
 0 0 0 1 0"/>
</filter>
</svg>

Убираем чёрно-белый цвет и делаем объект обратно цветным при наведении на него курсора мышки:

CSS

.grayscale:hover { 
 -webkit-filter: grayscale(0%);
 -moz-filter: grayscale(0%);
 -ms-filter: grayscale(0%);
 -o-filter: grayscale(0%);
 filter: none;
}

Пример использования кода CSS

Так же во вложении Вы найдёте исходник и пример работы данного метода.

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

Блоки как табличные элементы

Представить блоки в виде табличных элементов позволяет CSS-свойство display, среди доступных значений которого есть интересующие нас:

• table – представляет элемент как таблицу;
• table-header-group – представляет элемент как заголовок таблицы;
• table-footer-group – представляет элемент как «подвал» таблицы;
• table-row-group – представляет элемент как запись таблицы (отображается между элементами со значениями table-header-group и table- footer-group свойства display).

Работу такого способа иллюстрирует код HTML:

<style>
 #container { display: table; }
 #elem-3 { display: table-header-group; }
 #elem-2 { display: table-row-group; }
 #elem-1 { display: table-footer-group; }
</style>
<div id="container">
 <div id="elem-1">1 element</div>
 <div id="elem-2">2 element</div>
 <div id="elem-3">3 element</div>
</div>

Еще можно прибегнуть к использованию значения table-caption свойства display в связке со свойством CSS caption-side (в значении top или bottom). В таком случае элемент будет представлен в виде подписи к таблице.

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

1. Использование значения table-caption свойства display в 11-й версии Opera приводит к проблеме «кликабельности» ссылок, расположенных в элементе с таким свойством; ссылки также не реагируют на наведение указателя мыши. Проблема описана в баг-трекере DSK-338752 на сайте Opera и, кажется, решена в 12 версии.
2. Что касается браузера Internet Explorer – значение table CSS-свойства display начало поддерживаться в нем только с 8-й версии. К тому же, в 8-й версии IE временами обнаруживается такая ошибка: при первой попытке рендеринга страницы не отображается произвольное количество ячеек псевдо-таблицы. Значит для решения нашей задачи в «проблемных» версиях IE придется обратиться за помощью к JavaScript – поработать с положением блоков в DOM-дереве в скрипте:

if (document.all && !document.addEventListener) {
 var el3 = document.getElementById('elem-3');
 var el2 = document.getElementById('elem-2');
 var el1 = document.getElementById('elem-1');
var parent_el = el1.parentNode;
 parent.insertBefore(el1, parent.firstChild);
 parent.insertBefore(el2, parent.firstChild);
 parent.insertBefore(el3, parent.firstChild);
}

Абсолютное позиционирование блоков

Этот метод основывается на самой парадигме абсолютного позиционирования: элемент изымается из потока (Normal Flow) и жестко позиционируется относительно родительского элемента.
Фрагмент HTML-кода:

<style>
 #container { height: 20px; border: 1px solid blue; }
 #elem-1 { position: absolute; top: 150px; }
 #elem-2 { position: absolute; top: 50px; }
 #elem-3 { position: absolute; top: 0px; }
</style>
<div id="container">
 <div id="elem-1">1 element</div>
 <div id="elem-2">2 element</div>
 <div id="elem-3">3 element</div>
</div>

При этом его положение уже не влияет на положение других элементов на странице, и может случиться, что выбранный пользователем размер шрифта «поломает» верстку (блоки расположатся один поверх другого за счет увеличения высоты какого-либо из них).
Рассмотрев оба способа перестановки блоков на HTML-странице посредством CSS-свойств, можно сделать вывод о предпочтительности применения первого из них, как более оптимального.

Нарисовать геометрические фигуры с помощью элемента HTML.

Круг

#circle {
 width: 100px;
 height: 100px;
 background: red;
 -moz-border-radius: 50px;
 -webkit-border-radius: 50px;
 border-radius: 50px;
}

Овал

#oval {
 width: 200px;
 height: 100px;
 background: red;
 -moz-border-radius: 100px / 50px;
 -webkit-border-radius: 100px / 50px;
 border-radius: 100px / 50px;
}

Прямоугольник

#rectangle {
 width: 200px;
 height: 100px;
 background: red;
}

Квадрат

#square {
 width: 100px;
 height: 100px;
 background: red;
}

Треугольник налево

#triangle-left {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 100px solid red;
 border-bottom: 50px solid transparent;
}

Треугольник направо

#triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid red;
 border-bottom: 50px solid transparent;
}

Треугольник вниз

#triangle-down {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
}

Треугольник вверх

#triangle-up {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
}

Треугольник налево

#triangle-left {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-right: 100px solid red;
 border-bottom: 50px solid transparent;
}

Треугольник направо

#triangle-right {
 width: 0;
 height: 0;
 border-top: 50px solid transparent;
 border-left: 100px solid red;
 border-bottom: 50px solid transparent;
}

Треугольник в левом нижнем углу

#triangle-bottomleft {
 width: 0;
 height: 0;
 border-bottom: 100px solid red; 
 border-right: 100px solid transparent; 
}

Треугольник в правом нижнем углу

#triangle-bottomright {
 width: 0;
 height: 0;
 border-bottom: 100px solid red; 
 border-left: 100px solid transparent;
}

Треугольник в левом верхнем углу

#triangle-topleft {
 width: 0;
 height: 0;
 border-top: 100px solid red; 
 border-right: 100px solid transparent; 
}

Треугольник в правом верхнем углу

#triangle-topright {
 width: 0;
 height: 0;
 border-top: 100px solid red; 
 border-left: 100px solid transparent;
}

Трапеция

#trapezoid {
 border-bottom: 100px solid red;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 height: 0;
 width: 100px;
}

Параллелограмм

#parallelogram {
 width: 150px;
 height: 100px;
 -webkit-transform: skew(20deg);
 -moz-transform: skew(20deg);
 -o-transform: skew(20deg);
 background: red;
}

Шестиконечная звезда

#star-six {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 100px solid red;
 position: relative;
}
#star-six:after {
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 100px solid red;
 position: absolute;
 content: "";
 top: 30px;
 left: -50px;
}

Пятиконечная звезда

#star-five {
 margin: 50px 0;
 position: relative;
 display: block;
 color: red;
 width: 0px;
 height: 0px;
 border-right: 100px solid transparent;
 border-bottom: 70px solid red;
 border-left: 100px solid transparent;
 -moz-transform: rotate(35deg);
 -webkit-transform: rotate(35deg);
 -ms-transform: rotate(35deg);
 -o-transform: rotate(35deg);
}
#star-five:before {
 border-bottom: 80px solid red;
 border-left: 30px solid transparent;
 border-right: 30px solid transparent;
 position: absolute;
 height: 0;
 width: 0;
 top: -45px;
 left: -65px;
 display: block;
 content: '';
 -webkit-transform: rotate(-35deg);
 -moz-transform: rotate(-35deg);
 -ms-transform: rotate(-35deg);
 -o-transform: rotate(-35deg);
}
#star-five:after {
position: absolute;
display: block;
color: red;
top: 3px;
left: -105px;
width: 0px;
height: 0px;
border-right: 100px solid transparent;
border-bottom: 70px solid red;
border-left: 100px solid transparent;
-webkit-transform: rotate(-70deg);
-moz-transform: rotate(-70deg);
-ms-transform: rotate(-70deg);
-o-transform: rotate(-70deg);
content: '';
}

Пятиугольник

#pentagon {
 position: relative;
 width: 54px;
 border-width: 50px 18px 0;
 border-style: solid;
 border-color: red transparent;
}
#pentagon:before {
 content: "";
 position: absolute;
 height: 0;
 width: 0;
 top: -85px;
 left: -18px;
 border-width: 0 45px 35px;
 border-style: solid;
 border-color: transparent transparent red;
}

Шестиугольник

#hexagon {
 width: 100px;
 height: 55px;
 background: red;
 position: relative;
}
#hexagon:before {
 content: "";
 position: absolute;
 top: -25px; 
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-bottom: 25px solid red;
}
#hexagon:after {
 content: "";
 position: absolute;
 bottom: -25px; 
 left: 0;
 width: 0;
 height: 0;
 border-left: 50px solid transparent;
 border-right: 50px solid transparent;
 border-top: 25px solid red;
}

Восьмиугольник

#octagon {
 width: 100px;
 height: 100px;
 background: red;
 position: relative;
}
#octagon:before {
 content: "";
 position: absolute;
 top: 0;
 left: 0; 
 border-bottom: 29px solid red;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}
#octagon:after {
 content: "";
 position: absolute;
 bottom: 0;
 left: 0; 
 border-top: 29px solid red;
 border-left: 29px solid #eee;
 border-right: 29px solid #eee;
 width: 42px;
 height: 0;
}

Сердечко

#heart {
 position: relative;
 width: 100px;
 height: 90px;
}
#heart:before,
#heart:after {
 position: absolute;
 content: "";
 left: 50px;
 top: 0;
 width: 50px;
 height: 80px;
 background: red;
 -moz-border-radius: 50px 50px 0 0;
 border-radius: 50px 50px 0 0;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
 -webkit-transform-origin: 0 100%;
 -moz-transform-origin: 0 100%;
 -ms-transform-origin: 0 100%;
 -o-transform-origin: 0 100%;
 transform-origin: 0 100%;
}
#heart:after {
 left: 0;
 -webkit-transform: rotate(45deg);
 -moz-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 -o-transform: rotate(45deg);
 transform: rotate(45deg);
 -webkit-transform-origin: 100% 100%;
 -moz-transform-origin: 100% 100%;
 -ms-transform-origin: 100% 100%;
 -o-transform-origin: 100% 100%;
 transform-origin :100% 100%;
}

Знак бесконечности

#infinity {
 position: relative;
 width: 212px;
 height: 100px;
}
#infinity:before,
#infinity:after {
 content: "";
 position: absolute;
 top: 0;
 left: 0;
 width: 60px;
 height: 60px; 
 border: 20px solid red;
 -moz-border-radius: 50px 50px 0 50px;
 border-radius: 50px 50px 0 50px;
 -webkit-transform: rotate(-45deg);
 -moz-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 -o-transform: rotate(-45deg);
 transform: rotate(-45deg);
}
#infinity:after {
 left: auto;
 right: 0;
 -moz-border-radius: 50px 50px 50px 0;
 border-radius: 50px 50px 50px 0;
 -webkit-transform:rotate(45deg);
 -moz-transform:rotate(45deg);
 -ms-transform:rotate(45deg);
 -o-transform:rotate(45deg);
 transform:rotate(45deg);
}