Закругление углов изображения без ФШ

Пятница, 13 Марта 2015 г. 21:51 + в цитатник

Цитата сообщения Юлия_Гурбер

Прочитать целиком В свой цитатник или сообщество!

Закругление углов изображения без ФШ

Закруглять будем с помощью HTML кода + свойство CSS border-radius.

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />

Так выглядит код картинки — HTML овал (для прямоугольных изображений):

< img src="https://img-fotki.yandex.ru/get/16129/163781271.f8/0_
f121c_96424eec_L.jpg" style="border-radius: width: 430px; height: 280px;
border: 3px solid red; border-radius: 100%;"/>

Рассмотрим обозначения. Для наглядности они выделены разными цветами.

Красный (алый) — адрес изображения.
Зелёный — ширина (width) и высота (height) изображения.
Голубой — толщина обводки вокруг изображения.
Синий — стиль обводки вокруг изображения.
Оранжевый — цвет обводки вокруг изображения.
Сиреневый — радиус закругления углов.

Все коды, представленные далее, идентичны.
В них меняются те же значения, которые я расписала в коде — HTML овал.

HTML обычное скругление углов

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 20px;" />

HTML полукруг

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px dashed red; border-radius: 100% 100% 0% 0%;" />

HTML круг

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px solid red; border-radius: 100%;" />

HTML цилиндр

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 4px dotted red; border-radius: 100%/20%;" />

HTML капля (скругленные три края)

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px inset red; border-radius: 0% 100% 100%;" />

HTML яйцо (для изображений, где высота больше ширины)

<img src="АДРЕС ИЗОБРАЖЕНИЯ" style="border-radius: width: ШИРИНА ИЗОБРАЖЕНИЯpx; height: ВЫСОТА ИЗОБРАЖЕНИЯpx; border: 3px inset red; border-radius: 80% / 100% 100% 60% 60%; " />

В работе использованы иллюстрации художника Льва Бартенева.

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

Подготовила Юлия Гурбер

Серия сообщений "-работа с картинкой":
Часть 1 - Что нужно сделать,чтобы фото открывались в новом окне
Часть 2 - Как сделать бегущий текст
Часть 3 - Как сделать бегущую строку и бегущее изображение в дневнике
Часть 4 - Закругление углов изображения без ФШ
Часть 5 - Для новичков на Лиру. Вам это пригодится )))
Часть 6 - Поиск по картинке
...
Часть 8 - Убираем кликабельность картинок
Часть 9 - Яндекс-Коллекции или Pinterest по-русски
Часть 10 - Удаление и замена фона фото онлайн

Серия сообщений "-шаблоны рамочек":
Часть 1 - Делаем оригинальные рамочки без фонов. Урок!
Часть 2 - Рамки с объемным фоном без фотошопа!
Часть 3 - Как сделать тени в рамочке и на картинках
Часть 4 - Закругление углов изображения без ФШ

Рубрики:

МОИ ПОМОЩНИКИ/-мои шпаргалки
ШПАРГАЛКИ