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

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

Продолжаем гнуть прямоугольный блок.

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

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

Создайте элемент:

Содержимое

Класс curved-vt-2 нужно описать в файле style.css:

.curved-vt-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-vt-2:before,
.curved-vt-2:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-vt-2:before {
    top:10px;
    bottom:10px;
    left:0;
    right:0;
    -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:10px / 100px;
         border-radius:10px / 100px;
}
 
.curved-vt-2 p {
    font-size:16px;
    font-weight:bold;
}        

Может быть нужно согнуть одну сторону?

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

Создайте блок:

Содержимое

И добавьте в файл style.css такой код:

.curved-vt-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-vt-1:before,
.curved-vt-1:after {
    content:"";
    position:absolute;
    z-index:-2;
}
 
.curved-vt-1:before {
    top:10px;
    bottom:10px;
    left:0;
    right:50%;
    -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:10px / 100px;
         border-radius:10px / 100px;
}
 
.curved-vt-1 p {
    font-size:16px;
    font-weight:bold;
}      
Автор tiaurus 2182 Articles
Являюсь создателем n-wp.ru — блога о WordPress для новичков. Мне интересно многое, поэтому еще я сделал 123-box.ru — блог о программах для Windows, и tiaurus.info — блог о красоте.

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

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

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


*