Я однажды уже делала пост по оформлению, но в нём я рассматривала и тексты и всё что угодно. Тут я хочу детально разобрать разнообразные красивые оформления для изображений :)
➊ Рамки
➊.➊. Простая одинарная рамка
<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