Блог > Дизайн сайта > Полезное

Как сделать блок с закругленными углами только на CSS

Разместил / Просмотров: 18 931


И снова здравствуйте дорогие читатели блога. Сегодня мы попытаемся сделать красивые и простые блоки с закругленными углами только при помощи CSS. Говорю сразу, тут ничего сложного нет, всего лишь потребуется минимальное знание CSS и конечно же знать куда и где его прилепить :-)

Очень большой плюс этих блоков в том, что они сделанные только при помощи CSS без использования каких либо изображений, а это значит, что они не несут никакую нагрузку на сервер.

Ну а сейчас давайте всё таки посмотрим как они делаются.

Создание блока

Для начала нам нужно создать самый обычный блок, которому дадим переменную например Box, её мы будем позже использовать в теге <div>:

.Box {

width:700px; /* Ширина блока */
height: 200px; /* Высота блока */

}

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

Оформление блока

Теперь давайте сделаем красивый вид блоку, а именно добавим тень и закруглим углы:

.Box {

width:700px; /* Ширина блока */
height: 200px; /* Высота блока */
background-color: #ffffff; /* Фоновый цвет*/
border: 2px solid #D4D4D4; /* Ширина и цвет границ*/
border-radius: 10px; /* Радиус границ*/
box-shadow: 0 0 15px #A9A9A9; /* Размер и цвет тени блока*/

}

Как видите, здесь тоже можно изменить все параметры по своему вкусу, изменить фоновый цвет, радиус границ, тень и её цвет. Главное экспериментируйте.

Пример

Ну а сейчас давайте применим это всё на практике. Например:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>
<head profile="http://gmpg.org/xfn/11">

          <style>

          body {
        background:#f0f0f0;
        font-family: Tahoma, sans-serif;
        font-size:14px;
        line-height:135%;
        margin-left: 20%;
        margin-top: 10%;
       }

.Box {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 10px;
        box-shadow: 0 0 15px #A9A9A9;
        padding:20px 40px;
}

.Box1 {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 30px;
        box-shadow: 0 0 15px #A9A9A9;
        padding:20px 40px;
}

.Box2 {
	margin-bottom:15px;
        width:668px;
        height: 200px;
        background-color: #ffffff;
        position:relative;
        border: 2px solid #D4D4D4;
        border-radius: 50px;
        box-shadow: 0 0 15px #0099FF;
        padding:20px 40px;
}

</style>

        </head>

<body>

<div class="Box">Радиус углов 10px</div>
<div class="Box1">Радиус углов 30px</div>
<div class="Box2">Радиус углов 50px и с голубым цветов тени блока</div>

</body>
</html>

Теперь обязательно посмотрите, что у меня получилось в примере.

Пример

Вот и всё, надеюсь, что объяснил всё ясно и доступно. Если Вам что то будет не понятно, обязательно спрашивайте в комментариях. До скорых встреч, друзья.



Метки: