Несколько примеров работы с CSS: горизонтальные изгибы

Несколько примеров работы с CSS: горизонтальные изгибы | n-wp.ru

Особенно эффектно выглядят блоки, которые как бы изогнуты в горизонтальной перспективы. Сделаем такие?

Создайте блок с оформлением.

Содержимое

Для класса curved-hz-2 в файле style.css добавьте оформление:

.curved-hz-2 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.curved-hz-2:before,
.curved-hz-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-hz-2:before {
    top:0px;
    bottom:0px;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:100px / 10px;
         border-radius:100px / 10px;
}
 
.curved-hz-2 p {
    font-size:16px;
    font-weight:bold;
} 

А теперь попробуем сделать блок с одним изгибом.

Несколько примеров работы с CSS: горизонтальные изгибы

Для блока

Содержимое

добавьте оформление в файл style.css

.curved-hz-1 {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    -webkit-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
       -moz-box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
            box-shadow:0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
}
 
.curved-hz-1:before,
.curved-hz-1:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-hz-1:before {
    top:50%;
    bottom:0px;
    left:10px;
    right:10px;
    -webkit-box-shadow:0 0 15px rgba(0,0,0,0.6);
       -moz-box-shadow:0 0 15px rgba(0,0,0,0.6);
            box-shadow:0 0 15px rgba(0,0,0,0.6);
    -moz-border-radius:100px / 10px;
         border-radius:100px / 10px;
}
 
.curved-hz-1 p {
    font-size:16px;
    font-weight:bold;
}        

Неплохо смотрится.

Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

Оставьте первый комментарий

Оставить комментарий

Ваш электронный адрес не будет опубликован.


*