2014
18
Сен

Круглые изображения



Круглые изображения

Любой сайт украшают оригинально оформленные изображения. Круглые изображения при создании страниц сайта смотрятся очень интересно и необычно. Способы реализации бывают различными. Можно использовать фотошоп, подготовив круглое изображение заранее и поместить на странице вашего сайта, а можно применить свойства CSS, что является более прогрессивным. Применяя CSS, вы один раз зададите необходимые свойства и будете использовать для нужного вам изображения.

Сегодня мы как раз и познакомимся, как сделать круглым изображения с помощью CSS. Выбираем любое изображение с равными сторонами. То есть ширина width равна высоте height.

Для примера взяли картинку размером 344×315, для показа на странице выбираем размер 200×200 и применяем значение для border-radius в процентном отношении.

img { width: 200px; height: 200px; border-radius: 50%; }

Круглые изображения



Используя значение в px, необходимо разделить картинку пополам и в border-radius ставите значение 100px. Эффект идентичен и картинка получится круглой. Для примера возьмем другое изображение размером 447х381 и, применив псевдокласс hover покажем картинку при минимальном скруглении углов.

img { width: 200px; /*высота*/ height: 200px;/*ширина*/ border:1px solid #ddd;/*рамка толщиной 1px ее вид и цвет*/ border-radius: 50%;/*радиус скругления уголков рамки*/ box-shadow: 0 2px 5px #aaa;/*тень к элементу*/ margin: 5% auto;/*величина отступа от каждого края элемента*/ transition: all 0.3s ease-in-out;/*эффект перехода между двумя состояниями элемента*/ -moz-transition: all 0.3s ease-in-out; -webkit-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; } img:hover { border-radius: 3px; }

Этот метод используется для записей, для выделения важного материала и прочее. Главное все делать в меру.