Не будем же создавать сайт с одними квадратами, нужно разнообразие
Так вот, самый простой пример закругления: создаём 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 (2.97 Кб) Просмотров: 2360
____________________________________________________________________________________
Теперь научимся делать изображения закруглёнными.
Например, изображение называется 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
Автор инструкции nar200®