Трюки css, которые сделают из вас ниндзя верстки / хабр

Содержание:

Эффекты фильтров применяют к содержимому графические операции, такие как размытие, освещение, преобразование цвета и искажения. Современные браузеры реализуют три типа фильтров:

CSS фильтры: набор простых свойств CSS, например сепия() а также контраст () который можно применить к любому содержимому HTML.
SVG фильтры: комбинации графических эффектов, которые можно применить к содержимому SVG (и содержимому HTML через перекрестную ссылку фильтра CSS).
DX фильтры являются патентованными эффектами фильтров Microsoft. Фильтры DX были объявлены устаревшими в Internet Explorer (IE) 9, а затем удалены в IE версии 10 (хотя их все еще можно повторно активировать с помощью групповой политики). Фильтры Microsoft DX когда-либо поддерживались только в Internet Explorer.

В этом уроке мы начнем с простой тени, затем настроим теневые эффекты для текста, пройдемся по построению текстуры и, наконец, воссоздадим Gotham, который больше не поддерживается фильтром Instagram. Я надеюсь, что к концу руководства вы будете хорошо разбираться в основах работы с фильтрами и будете иметь некоторые полезные примеры кода.

Стилизация соедержимого с помощью CSS свойства all

Некоторое время назад я работала над иконкой, на которую ссылалась через , и хотела, чтобы один из элементов внутри наследовал все стили (, , , и даже ) от . В общем я хотела управлять всеми этими атрибуатми из CSS, при этом оставляя атрибуты представления в разметке как запасной вариант.

Оказавшись в такой же ситуации, вы вероятно напишете в CSS:

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

Используя свойство , мы можем переписать код следующим образом:

Это отлично работает во всех браузерах, которые поддерживают данное свойство (посмотрите упомянутую заметку), однако есть важное замечание: это объявление установит буквально все свойства в значение inherit, даже те, которые вам не хочется. Поэтому применять all — это лишь чрезвычайная мера, особенно полезная, если вы хотите «заложить основу» элемента и можете управлять свойствами через CSS

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

Обратите внимание, что это затронет атрибуты, которые могут быть установлены через CSS, не SVG атрибуты. Т.о

если атрибут может быть установлен через CSS, он будет искать значение родителя, а иначе — не будет.

Мы в состоянии заставить атрибуты представления наследоваться от стилей элемента . Но что если наша иконка содержит несколько элементов, и мы не хотим, чтобы все элементы наследовали свойства от ? Что делать, если мы хотим применить разные цвета для разных элементов внутри ? Установка одного стиля к больше не поможет, нужно что-то еще, чтобы помочь нам задать нужные цвета нужным элементам…

Комплексные SVG-фильтры. Применяем несколько эффектов последовательно.

Еще одним неотъемлемым достоинством SVG-фильтров является возможность сочетания нескольких типов фильтров. Т.е. результат, полученный после применения одного фильтра, может являться источником изображения для другого фильтра и т.д.

Чтобы было понятнее, давайте добавим еще один тип фильтрации для “разблюренной” девушки. Например, сделаем изображение черно-белым.

Графически эту схему фильтрации можно представить как:

Как Вы видите, для каждого типа фильтров можно указать атрибуты и . Если они не указаны, фильтры будут применяться последовательно в порядке их записи.

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

Фильтры, CSS и JavaScript

Было бы очень удобно иметь возможность создавать и изменять настройки фильтров с помощью CSS. К сожалению, относительно немного параметров фильтра — это свойства, которые можно указать с помощью CSS; большинство из них — атрибуты SVG. Основные свойства фильтра SVG: фильтры интерполяции цвета, заливной цвет, непрозрачность а также цвет освещения. Почти все остальное — атрибут.

Создание и анимация фильтров, конечно же, могут быть выполнены с помощью JavaScript (если вы используете необработанные методы DOM, не забудьте использовать синтаксис * NS, если вы используете пространство имен SVG XML). Альтернативой является использование декларативной анимации с SMIL. Хотя IE не поддерживает SMIL, существует удобная библиотека под названием fakeSMIL, которая полифицирует наиболее распространенные объявления SMIL для IE.

Вы можете добавить эффекты фильтра к фигурам, которые вы рисуете, с помощью популярных библиотек. В d3.js определение фильтра выглядит примерно так:

var filter = svg.append («defs»)

.append («фильтр»)

.attr («идентификатор», «размытие»)

.append («feGaussianBlur»)

.attr («stdDeviation», 5);

Это добавит defs> элемент и определение фильтра размытия для вашей визуализации d3. Для полного использования см. Полный пример Майка Бостока на bl.ocks.org/ mbostock / 1342359. Вы также можете определить и применить фильтр при создании графики с помощью Sencha Touch или Ext JS.

Лучшая практика с Ext.Draw — добавить новый svgFilter атрибут для ваших спрайтов рисования, который определяет фильтр, который будет использоваться для этих спрайтов. Затем вам нужно сгенерировать элементы DOM и вставить приложение фильтра во встроенную функцию Ext.draw для обработки заливки и обводки. По этой сути вы можете увидеть рабочий пример.

Функция фильтра

Примечание: Фильтры, использующие процентные значения (т.е. 75%), также принимают значение как
десятичное число (т.е. 0.75).

Фильтр	Описание	Воспроизвести
none	Значение по умолчанию. Указывает отсутствие эффектов	Воспроизвести »
blur(px)	Применяет эффект размытия к изображению. Большее значение создаст больше размытия.Если значение не указано, используется 0.	Воспроизвести »
brightness(%)	Регулирует яркость изображения.0% сделает изображение полностью черным.100% (1) является значением по умолчанию и представляет собой исходное изображение. Значение над 100% обеспечит более яркие результаты.	Воспроизвести »
contrast(%)	Регулирует контрастность изображения.0% сделает изображение полностью черным.100% (1) является значением по умолчанию и представляет собой исходное изображение. Значение над 100% обеспечит результаты с большим контрастом.	Воспроизвести »
drop-shadow(h-shadow v-shadow blur spread color)	Применяет эффект тени к изображению.Возможное значение:h-shadow — Требуемый. Задает значение пикселя для горизонтальной тени. Отрицательные значения помещают тень слева от изображения.v-shadow — Требуемый. Задает значение пикселя для вертикальной тени. Отрицательные значения помещают тень над изображением.blur — Необязательный. Это третье значение, и оно должно быть в пикселях. Добавляет эффект размытия к тени. Большее значение создаст большее размытие (тень становится больше и светлее). Отрицательные значения не допускаются. Если не указано значение, используется 0 (край тени острый).spread — Необязательный. Это четвертое значение, и оно должно быть в пикселях. Положительные значения заставят тень расширяться и увеличиваться, а отрицательные сжиматься. Если не указано, то это будет 0 (тень будет иметь тот же размер, что и элемент).Примечание: Chrome, Safari и Opera, и, возможно, другие браузеры, не поддерживают эту 4-ю длину; она не будет отображаться при добавлении.color — Необязательный. Добавляет цвет к тени. Если не указано, цвет зависит от браузера (часто черный).Пример создания красной тени, которая является 8px большой как по горизонтали, так и по вертикали, с эффектом размытия 10px:filter: drop-shadow(8px 8px 10px red);Совет: Этот фильтр похож на свойство box-shadow.	Воспроизвести »
grayscale(%)	Преобразует изображение в оттенки серого.0% (0) используется по умолчанию и представляет исходное изображение. 100% сделает изображение полностью серым (используется для черно-белых изображений).Примечание: Отрицательные значения не допускаются.	Воспроизвести »
hue-rotate(deg)	Применяет поворот оттенка к изображению. Значение определяет количество градусов вокруг цветового круга, в котором будут скорректированы образцы изображений. 0deg используется по умолчанию и представляет исходное изображение.Примечание: Максимальное значение 360deg.	Воспроизвести »
invert(%)	Инвертирует образцы в изображении.0% (0) имеет значение по умолчанию и представляет исходное изображение. 100% сделает изображение полностью перевернутым.Примечание: Отрицательные значения не допускаются.	Воспроизвести »
opacity(%)	Устанавливает уровень непрозрачности для изображения. Уровень непрозрачности описывает уровень прозрачности, где:0% полностью прозрачный.100% (1) имеет значение по умолчанию и представляет исходное изображение (без прозрачности).Примечание: Отрицательные значения не допускаются.Совет: Этот фильтр похож на свойство opacity.	Воспроизвести »
saturate(%)	Насыщает изображение.0% (0) сделает изображение полностью ненасыщенным.100% имеет значение по умолчанию и представляет исходное изображение.Значение более 100% обеспечивает сверхнасыщенные результаты.Примечание: Отрицательные значения не допускаются.	Воспроизвести »
sepia(%)	Преобразует изображение в сепию.0% (0) имеет значение по умолчанию и представляет исходное изображение.100% сделает изображение полностью сепия.Примечание: Отрицательные значения не допускаются.	Воспроизвести »
url()	Функция url() принимает расположение xml-файла, который задает фильтр SVG, и может включать привязку к определенному элементу фильтра. Пример:filter: url(svg-url#element-id)
initial	Устанавливает для этого свойства значение по умолчанию. Прочитайте о initial
inherit	Наследует это свойство от родительского элемента. Прочитайте о inherit

4: Создание библиотеки иконок

Импортировать нужную иконку в несколько файлов – не всегда простая задача. Допустим, если вы используете логотип Twitter в нескольких местах, вам едва ли захочется писать его несколько раз.

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

Давайте создадим файл fontawesome.js в папке src, а затем импортируем его в index.js. Вы сможете добавлять этот файл во все дочерние компоненты, в которых вы хотите использовать иконки. Вы даже можете сделать это прямо в своем файле index.js или App.js. Однако лучше собрать все иконки в отдельный файл, поскольку он может увеличиться со временем.

Итак, поместите в src/fontawesome.js следующее:

// import the library
import { library } from '@fortawesome/fontawesome-svg-core';

// import your icons
import { faMoneyBill } from '@fortawesome/pro-solid-svg-icons';
import { faCode, faHighlighter } from '@fortawesome/free-solid-svg-icons';

library.add(
  faMoneyBill,
  faCode,
  faHighlighter
  // more icons go here
);

Теперь этот файл нужно импортировать в index.js. откройте его и внесите строку:

import React from 'react';
import { render } from 'react-dom';

// import your fontawesome library
import './fontawesome';

render(<App />, document.getElementById('root'));

Импорт целого пакета иконок

Импортировать пакеты иконок целиком не рекомендуется, потому что при этом вы импортируете в свое приложение слишком много лишних иконок, из-за чего пакет увеличится в размере. Если вам действительно нужен весь пакет, вы, безусловно, можете импортировать его.

Предположим для примера, что вам нужны все иконки брендов из пакета @fortawesome/free-brands-svg-icons. Чтобы импортировать все иконки, нужно открыть файл fontawesome.js и использовать следующее:

import { library } from '@fortawesome/fontawesome-svg-core';
import { fab } from '@fortawesome/free-brands-svg-icons';

library.add(fab);

fab импортирует весь пакет с иконками брендов.

Индивидуальный импорт иконок

Рекомендуемый способ использования иконок из Font Awesome – импортировать их поштучно и только нужные, чтобы окончательные размеры вашего пакета были как можно меньше.

В файле fontawesome.js вы можете создать библиотеку из нескольких иконок, хранящихся в разных пакетах, например:

import { library } from '@fortawesome/fontawesome-svg-core';

import { faUserGraduate } from '@fortawesome/pro-light-svg-icons';
import { faImages } from '@fortawesome/pro-solid-svg-icons';
import {
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
} from '@fortawesome/free-brands-svg-icons';

library.add(
  faUserGraduate,
  faImages,
  faGithubAlt,
  faGoogle,
  faFacebook,
  faTwitter
);

Импорт одной иконки из нескольких пакетов

Если вам нужны все доступные типы иконки boxing-glove (то есть иконки из пакетов fal, far и fas), вы можете импортировать их все под другим именем и затем добавить в свой fontawesome.js.

import { library } from '@fortawesome/fontawesome-svg-core';
import { faBoxingGlove } from '@fortawesome/pro-light-svg-icons';
import {
  faBoxingGlove as faBoxingGloveRegular
} from '@fortawesome/pro-regular-svg-icons';
import {
  faBoxingGlove as faBoxingGloveSolid
} from '@fortawesome/pro-solid-svg-icons';

library.add(
    faBoxingGlove,
    faBoxingGloveRegular,
    faBoxingGloveSolid
);

Затем вы можете использовать их при помощи разных префиксов.

<FontAwesomeIcon icon={} />
<FontAwesomeIcon icon={} />
<FontAwesomeIcon icon={} />

Использование CSS-переменной currentColor для стилизации содержимого

Использовуя в сочетании с описанной техникой, можно указать два разных цвета на элементе вместо одного. Fabrice Weinberg описал этот способ в своем Codepen блоге около года назад.

Идея заключается в том, чтобы применить к оба свойства ( и ). Давайте сразу перейдем к примеру кода, чтобы увидеть как это работает.

Предположим, что мы хотим стилизовать простой логотип Codrops, используя два цвета — один для передней капельки, второй для задней — и сделаем несколько экземпляров.

Для начала сделаем разметку для этого примера: должен быть , содержащий определение нашей иконки и 3 экземпляра .

Если мы установим на элемент , этот цвет будет применяться к обоим , и получатся две одноцветные капельки — это не то, чего мы хотим.

Здесь мы будем использовать для разделения цветов. Вставляем в том месте, где хотим применить другой цвет. Это должно быть в определении нашей иконки, т.е. внутри элемента . Получаем следующий код:

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

Если мы будем использовать ключевое слово для того, чтобы атрибуты представления унаследовали свои значения от , тогда оба будут иметь одинаковые значения цвета, и мы не увидим никакого эффекта от использования . В нашем случае нужно удалить атрибут, который хотим устанавливать через CSS, и оставить только один path со значением .

Теперь, используя свойства и , мы можем стилизовать капельки:

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

Вот результат:

Эта двухцветная техника весьма полезна для простых двухцветных логотипов. В своей статье Fabrice делает три разных варианта логотипа Sass, изменяя цвет текста и цвет фона.

На сегодня — это единственная доступная переменная в CSS. Однако, если бы у нас было больше переменных, мы бы смогли передать больше значений в содержимое . Amelia Bellamy-Royds представляла эту концепцию в записи своего Codepen блога около года назад. Давайте посмотрим, как это работает.

Зачем фильтровать эффекты?

Если вы хотите добавить визуальные эффекты к изображениям, графике, тексту или видео, вы можете сделать это на этапе подготовки с помощью таких инструментов, как Photoshop или Illustrator, или во время выполнения, используя эффекты холста, SVG и / или CSS.

Эффекты времени выполнения можно анимировать, и вы можете предотвратить влияние на производительность загрузки больших изображений (например, для текстур шума). По сравнению с эффектами холста и CSS фильтры SVG особенно полезны для:

Добавляйте текстуры в графику SVG, не загружая большие изображения.
Встраивайте возможности редактирования изображений на стороне клиента в свое веб-приложение.
Добавляйте к тексту эффекты освещения, тиснения и искажения без преобразования текста в изображение, сохраняя доступность и возможность поиска.

Example 2

Now, the offset image can be blurred (with <feGaussianBlur>):

Here is the SVG code:

Example

Code explanation:

The stdDeviation attribute of the element defines the amount of the blur

Example 3

Now, make the shadow black:

Here is the SVG code:

Example

Code explanation:

The in attribute of the element is changed to «SourceAlpha»
which uses the Alpha channel for the blur instead of the entire RGBA pixel

Example 4

Now, treat the shadow as a color:

Here is the SVG code:

Example

Code explanation:

The filter is used to transform the colors in the offset image closer to black. The three values of ‘0.2’ in
the matrix all get multiplied by the red, green and blue channels. Reducing their values brings the colors closer to black (black is 0)

❮ Previous
Next ❯

Базовый фильтр: Drop Shadow

Для начала мы покажем полный код базового фильтра для встроенного фрагмента SVG. Фильтр SVG определяется в defs> раздел встроенного фрагмента или документа SVG и применяется к содержимому SVG путем добавления фильтр свойство к содержанию.

Фильтрующий элемент — это контейнер для «примитивов» фильтра. Примитив — это отдельная графическая операция, которая комбинируется с другими примитивами для создания окончательного эффекта. Фильтр падающей тени, представленный ниже, состоит из четырех шагов:

Извлеките SourceAlpha (копию исходного содержимого — SourceGraphic — с его каналами RGB, установленными на черный цвет).
Примените размытие по Гауссу со стандартным отклонением в четыре единицы.
Возьмите размытый текст и сместите его на 5 единиц в Икс а также y.
Возьмите ранее созданный размытый текст со смещением и наложите его на исходное содержимое (SourceGraphic), используя примитив композитинга, feComposite, а над оператор.

svg width = «600px» height = «200px» viewBox = «0 0 600 200»>

defs>

filter id = «drophadow»>

feGaussianBlur in = ”SourceAlpha” result = ”blurOut” stdDeviation = ”4” />

feOffset in = «blurOut» result = «dropBlur» dx = «5» dy = «5» />

feComposite operator = «over» in = «SourceGraphic» in2 = «dropBlur» result = «final» />

/ фильтр>

/ defs>

текстовый фильтр = «url (#dropshadow)» x = «20» y = «100» font-size = «80» width = «550» height = «600»>

Shadow This!

/ текст>

/ svg>

feComposite имеет другие мощные операторы помимо простого «над»композитинг, который мы показали. Взломайте CodePen для этого примера и измените»над»на следующие значения:

в обрезает размытие до области исходного текста, создавая эффект размытой заливки.
вне показывает исходный текст, но вычитает падающую тень, создавая драматический эффект гравировки.
xor объединяет оба входа, но затем вычитает любое перекрытие. Здесь это приводит к тому же эффекту, что и вне но добавляет тень.

Example 1

The <feOffset> element is used to create drop shadow effects. The idea
is to take an SVG graphic (image or element) and move it a little bit in the xy plane.

The first example offsets a rectangle (with <feOffset>), then blend the original on top of the offset image (with <feBlend>):

Here is the SVG code:

Example

Code explanation:

The id attribute of the <filter> element defines a unique name for the filter
The filter attribute of the <rect> element links the element to the «f1» filter

Настройка падающих теней

Фильтры обладают мощными возможностями настройки теней. Если вам не нравится размытие по Гауссу, вы можете использовать feConvolve примитив для создания размытия с рамкой, направленного размытия или других размытий, не относящихся к Гауссу (включая размытие поверхности в стиле Photoshop).

Если вы придерживаетесь размытия по Гауссу, вы можете настроить интенсивность и наклон тени с помощью feComponentTransfer. Ниже показан контурный эффект, созданный путем переназначения альфа-канала размытия.

идентификатор фильтра = ”reMappedAlpha”>

feGaussianBlur in = ”SourceAlpha” result = ”blurOut” stdDeviation = ”10” />

feComponentTransfer in = ”blurOut” result = ”dropBlur”>

feFuncA type = «таблица» tableValues = «0 .5 0 .5 0 .5 0 .5» />

/ feComponentTransfer>

feComposite operator = «over»

in = «SourceGraphic» in2 = «dropBlur» result = «final» />

/ фильтр>

Магия здесь от feFuncA примитив, который перераспределяет альфа-канал размытия (обычно плавное затухание) на четыре отдельных диапазона 50% альфа к 0% альфа. Это создает контур. Вы также можете переназначить альфа-канал, используя другие типы в feComponentTransfer. «Дискретный» переназначает диапазоны значений на определенные значения и может использоваться для создания эффектов ореола. «Гамма» применяет корректировку гаммы. «Линейный» применяет корректировку наклона и пересечения.

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

2: Выбор иконок

Прежде чем мы продолжим работу, важно разобраться, как структурированы библиотеки Font Awesome. Поскольку иконок в библиотеке очень много, команда решила разделить их на несколько пакетов

Чтобы изучить возможные варианты и выбрать необходимые иконки, рекомендуется посетить специальную страницу на сайте Font Awesome. В левой части этой страницы вы найдете различные фильтры – они очень важны, потому что именно они сообщают, из какого пакета импортировать ту или иную иконку.

В приведенном выше примере мы извлекли иконку из пакета @fortawesome/free-solid-svg-icons.

Как определить, какому пакету принадлежит иконка?

Чтобы определить, к какому пакету относится нужная вам иконка, просмотрите на фильтры слева. Также можно кликнуть на иконку и увидеть пакет, которому он принадлежит.

Когда вы узнаете название необходимого вам пакета, важно запомнить его трехбуквенное сокращение:

Solid Style – fas
Regular Style – far
Light Style – fal
Duotone Style – fad

Найти определенный тип можно в левой панели на странице иконок.

Как использовать иконки из определенных пакетов?

Если вы внимательно просмотрите страницу иконок на сайте Font Awesome, вы заметите, что одна и та же иконка обычно существует в нескольких версиях. Например, введите в поиск boxing-glove – в результате вы увидите три иконки.

Чтобы использовать конкретную иконку, вам необходимо настроить <FontAwesomeIcon>. Ниже мы приведем несколько типов одной и той же иконки из разных пакетов. К ним относятся трехбуквенные сокращения, о которых мы говорили ранее.

Примечание: Следующие примеры не будут работать, пока мы не создадим библиотеку иконок – мы сделаем это немного позже.

Вот пример для пакета solid:

<FontAwesomeIcon icon={} />

Этот пакет используется по умолчанию, если не указано другое:

<FontAwesomeIcon icon={faCode} />

Пакет light используется с помощью сокращения fal:

<FontAwesomeIcon icon={} />;

Свойство icon нужно было изменить со строки на массив.

Переопределение атрибутов представления через CSS

Атрибуты представления переопределяются другими объявленными стилями. Мы можем этим воспользоваться, чтобы внешние стили переопределяли свойства наследуемых значений элемента .

Используя ключевое слово inherit в CSS, можно сделать это довольно просто. Посмотрите на следующий пример, в котором имеется иконка мороженого, сделанная с помощью одной линии. Автор иконки Erin Agnolu из проекта Noun. Пусть мы хотим изменить цвет единственной линии для разных экземпляров.

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

Затем мы рендерим несколько экземпляров иконки с помощью .

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

В итоге получается следующее:

Обратите внимание на черные границы, т.о. можно видеть границы каждого SVG и удостовериться, что в первом случае (где мы лишь определили иконку) ничего не рандерится

Итак, SVG документ все равно будет отображаться на странице, даже если в нем нечего показывать. Чтобы этого избежать, скрываем первый SVG (). Если этот элемент не скрывать, по умолчанию он будет показываться на странице с размерами 300x150px, так что в итоге вы получите белую область на странице.

Теперь попробуем изменить цвет заливки для разных экземпляров:

Цвет все еще не изменился, т.к. он наследуется от элемента path (). Поэтому для наследуем цвет заливки:

И вуаля! Теперь цвет, указанный для каждого , применяется для . Посмотрите демо, поиграйтесь с цветами, создайте больше экземпляров:

Эта техника полезна, когда нужно применить внутри наследуемые от главного элемента стили. Но в большинстве случаев требуется не совсем то. Поэтому перейдем к другим примерам.

More Examples

Example

Add a blur effect to the shadow:

#example1 { box-shadow: 10px 10px 8px #888888;
}

Example

Define the spread radius of the shadow:

#example1 { box-shadow: 10px 10px 8px 10px #888888;
}

Example

Define multiple shadows:

#example1 { box-shadow: 5px 5px blue, 10px 10px
red, 15px 15px green;
}

Example

Add the inset keyword:

#example1 { box-shadow: 5px 10px inset;}

Example

Images thrown on the table. This example demonstrates how to create «polaroid» pictures and rotate the
pictures:

div.polaroid { width: 284px;
padding: 10px 10px 20px 10px; border: 1px solid
#BFBFBF; background-color: white; box-shadow: 10px 10px 5px #aaaaaa;}