Рамка изображения с закругленными краями

1 1 1 1 1 1 1 1 1 1 Рейтинг: 5.00 - 1 отзыв

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

Картинку выше, просто обработали в редакторе и обрезали края, сделав их белыми (русский тракторист даже писать устал, а представьте себе, обрабатывать таким образом 100 фотографий?)

В общем на сайте rtr24.ru я делаю это с помощью css. Вносим код в template.css шаблона сайта. И после, достаточно лишь написать класс к любому изображению и оно будет выглядеть так, как нужно.

Изображение с закругленными краями

Пример.

денежный трактор

Берем изображение обычное.

Добавляем код в template.css. Видим, что здесь можно задать и размеры изображения с закругленными краями и радиус самого закругления краев.

.img-round {
border: 1px solid black;
width: 300px;
height: 200px;
border-radius: 15px;
-moz-border-radius: 15px;
-khtml-border-radius: 15px;
-webkit-border-radius: 15px;
}

Теперь публикуем ту же самую картинку, только добавив класс .img-round

<a class="img-round" title="Заголовок" href="/ссылка">
    <img alt="Альтернативный текст" src="/ссылка_на_изображение">
</a>

Получаем вот такое изображение с закругленными краями.

 

 

C кодом css можно сделать, что угодно. Например классы меню в Joomla 3 или рамку с закругленными краями разного цвета.

 

.img-round-color:link, .img-round-color:visited {
border-radius: 15px 15px 15px 15px;
display: block;
height: 200px;
margin-bottom: 15px;
overflow: hidden;
width: 300px;
border-style: solid;
border-width: 5px 5px 5px 5px;
border-top-color: red;
border-bottom-color: blue;
border-right-color: green;
border-left-color: orange;
}

 

Теперь публикуем ту же картинку (она снова будет с закругленными краями), меняя только имя класса на img-round-color. Разумеется имена классам вы можете придумать любые другие.

 

<a class="img-round-color" title="Заголовок" href="/ссылка">
    <img alt="Альтернативный текст" src="/ссылка_на_изображение">
</a>

Альтернативный текст

Для проекта Big я использую такой код:

.all-pic {
display: block;
border-radius: 15px;
margin: 0 0 9px;
width: 300px;
height: 180px;
}

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

Рубрика: Joomla
Добавить комментарий

Комментарии   
homme louis vuitton
+1 # homme louis vuitton 12.09.2014 22:30
Давно хотелось сделать картинки с круглыми краями.
Ответить