11 ноября 2012 года в11.11.2012 13:02 1 0 10 83

Я однажды уже делала пост по оформлению, но в нём я рассматривала и тексты и всё что угодно. Тут я хочу детально разобрать разнообразные красивые оформления для изображений :)

Рамки

➊.➊. Простая одинарная рамка

<p style="color: #; font-family: ''; font-size:; line-height:; text-align:center;"><img style="border: 1px solid # ЦВЕТ РАМКИ; padding: 2px" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="300" /></p>

➊.➋. Простая двойная рамка

<p style="text-align: center;font-family:;font-size:; line-height:; border-style: double; color:# ЦВЕТ РАМКИ; "><img width="300" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" /></p>

➊.➌. Двойная цветная рамка

<p style="text-align: center;font-family:; border-width:thick; border-style:groove; padding:4px; border-color:# ЦВЕТ РАМКИ; font-size:8.0pt"><img src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="480" /></p>

➊.➍. Рамка с тенью

<p style="text-align: center; text-align:;font-family:; font-size:; line-height: "><img height="204" style="box-shadow: 2px 2px 7px # ЦВЕТ ТЕНИ; border: 1px solid #cccccc; padding: 2px" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" width="480" /></p>

➊.➎. Закругленная рамка

<p style="text-align: center; font-family:; color:#; font-size:; line-height: "><b><img src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" style="border-radius: 10px; border-style: groove; border-width: 2px; border-color: # ЦВЕТ РАМКИ; padding: 3px; background-color: # ЦВЕТ ФОНА МЕЖДУ РАМКОЙ И КАРТИНКОЙ" height="204" width="480" /></b></p>

Форма изображений

➋.➊. Закругленные края

<p style="font-family: ''; color:; text-align:center;line-height:;font-size:"><img height="204" width="480" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" style="border-radius: ПИКСЕЛИ (ВЕРХНИЙ ЛЕВЫЙ УГОЛ) px ВЕРХНИЙ ПРАВЫЙ px НИЖНИЙ ПРАВЫЙ px НИЖНИЙ ЛЕВЫЙ px;" /></p>

➋.➋. Закругленные края с тенью

<p style="font-family: ''; color:; text-align:center;line-height:;font-size:"><img height="204" width="480" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" style="border-radius: ПИКСЕЛИ (ВЕРХНИЙ ЛЕВЫЙ УГОЛ) px ВЕРХНИЙ ПРАВЫЙ px НИЖНИЙ ПРАВЫЙ px НИЖНИЙ ЛЕВЫЙ px;" /></p> box-shadow: 0 2px 10px # ЦВЕТ ТЕНИ;

➋.➌. Обычное изображение с тенью

<p style="line-height:;text-align: center; font-family:;font-size:;color:"><img width="480" height="204" style="border-radius: 0px 0px 0px 0px;box-shadow: 0 1px 7px # ЦВЕТ ТЕНИ" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" /></p>

Расположение картинки

➌.➊. Обтекаемость текстом (справа)

<p style="text-align: center; font-family: ''; color:#; font-size:; line-height:;"><img width="200" align="right" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" /></p>

➌.➋. Обтекаемость текстом (слева)

<p style="text-align: center; font-family: ''; color:#; font-size:; line-height:;"><img width="200" align="left" src= "ССЫЛКА НА ИЗОБРАЖЕНИЕ" /></p>

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

Надеюсь, вам пригодится этот небольшой "путеводитель" по оформлению картинок. Желаю вам и вашим постам быть неотразимыми; D

Комментарии

Зарегистрируйтесь или войдите, чтобы добавить комментарий

Новые заметки пользователя

SASHA619 — mr. frodo

37

Кликните по порталу и посмотрите, куда он Вас привед...

34

ждите субботы (1 марта) …

36

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

37

Я полагаю, все уже слышали о том, что мой, и некоторые другие блоги, были удалены. Так вот, я взвесила все "за" и "против" и пришла к выв...

35

папа: налей коту воды я: ХАТХИ ПРОТРУБИЛ ВОДЯНОЕ ПЕРЕМИРИЕ В ДЖУНГЛИ ПРИШЛА ЗАСУХА МОЯ РЫСЬ ХОЧЕТ ПИТЬ АХАХАААХАХЗХААЗАХАХАХЗХА *сего...

36

по поводу переселения на тамблер: для меня это невозможно. я имею ввиду, у меня есть тамблер, я его обожаю, но он абсолютно отличается о...