Страница 1 из 1

Закругление форм и изображений через CSS

Добавлено: 20 апр 2012, 18:31
nar200
Как известно, сейчас закругление на сайтах имеет очень высокую популярность в сети Интернет.
Не будем же создавать сайт с одними квадратами, нужно разнообразие :wink:
Так вот, самый простой пример закругления: создаём div класс и применяем к нему CSS:
Код: Выделить всё
<div class="round">Закруглённый квадрат с помощью CSS</div>
<style type="text/css">
.round {
      background-color: grey; /* Цвет квадрата, в данном случае серый */
      width: 100px; /* Ширина квадрата */
      height: 100px; /* Высота квадрата */ 
      border: 3px solid #000; /* Обводка квадрата */
      /* Делаем закругление, можно изменить 10px на своё число */
      -webkit-border-radius: 10px; /* Закругление в браузерах Google Chrome и Safari */
      -moz-border-radius: 10px; /* Закругление в Mozilla Firefox */
      border-radius: 10px; /* Закругление в Opera */
      text-align: center; /* Выравнивание текста по центру */
      color: #fff; /* Цвет текста */
      opacity: 0.5; /* Степень прозрачности */
}
/* Создадим эффект изменения цвета и прозрачности при наводке мыши на квадрат */
.round:hover {
      background-color: #c0c0c0; /* Изменяем цвет квадрата */
      color: #fff; /* Цвет текста прежний */
      border: 3px solid #000; /* Обводка тоже не меняется */
      opacity: 1; /* Устанавливаем прозрачность по умолчанию */
}
</style>

Получаем вот такой закруглённый квадрат:
20-04-2012 20-16-13.png
20-04-2012 20-16-13.png (2.97 Кб) Просмотров: 1968

____________________________________________________________________________________

Теперь научимся делать изображения закруглёнными.
Например, изображение называется 0.jpg
Применяем к нему class:
Код: Выделить всё
<img class="img-round" src="0.jpg" />

Теперь применим к этому классу CSS:
Код: Выделить всё
<style type="text/css">
.img-round {
      -webkit-border-radius: 10px; /* Закругление в браузерах Google Chrome и Safari */
      -moz-border-radius: 10px; /* Закругление в Mozilla Firefox */
      border-radius: 10px; /* Закругление в Opera */
}
</style>

Получим:

Вот и всё, вы научились закруглять квадраты и изображения с помощью одного лишь CSS :drink:

Автор инструкции nar200®