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

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

Хотите создать блок с загнутыми углами?

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

Давайте попробуем.

Создайте блок, которому нужно загнуть нижние углы:

Содержимое блока

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

.curled {
    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;
    border:1px solid #efefef;
    -moz-border-radius:0 0 120px 120px / 0 0 6px 6px;
         border-radius:0 0 120px 120px / 0 0 6px 6px;
}
 
.curled:before,
.curled:after {
    content:"";
    position:absolute;
    z-index:-2;
    bottom:12px;
    left:10px;
    width:50%;
    height:55%;
    max-width:200px;
    -webkit-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
       -moz-box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
            box-shadow:0 8px 12px rgba(0, 0, 0, 0.5);
     -webkit-transform:skew(-8deg) rotate(-3deg);
        -moz-transform:skew(-8deg) rotate(-3deg);
         -ms-transform:skew(-8deg) rotate(-3deg);
          -o-transform:skew(-8deg) rotate(-3deg);
             transform:skew(-8deg) rotate(-3deg);
} 
 
.curled:after {
    right:10px;
    left:auto;
    -webkit-transform:skew(8deg) rotate(3deg);
       -moz-transform:skew(8deg) rotate(3deg);
        -ms-transform:skew(8deg) rotate(3deg);
         -o-transform:skew(8deg) rotate(3deg);
            transform:skew(8deg) rotate(3deg);
        }
.curled p {
    font-size:16px;
    font-weight:bold;
}        

Неплохо для сайта о поэзии. А теперь давайте создадим хит сезона – повернутый блок с тенью.

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

Создайте блок, который нужно повернуть:

Содержимое блока

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

.rotated {
    position:relative;
    width:40%;
    padding:1em;
    margin:2em 10px 4em;
    background:#fff;
    border-radius:4px;
    -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;
    -moz-border-radius:4px;
    -webkit-box-shadow:none;
       -moz-box-shadow:none;
            box-shadow:none;
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
 
.rotated > :first-child:before {
    content:"";
    position:absolute;
    z-index:-1;
    top:0px;
    bottom:0;
    left:0;
    right:0px;
    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;
}      
 
.rotated:before,
.rotated:after {
        content:"";
        position:absolute;
        z-index:-2;
        bottom:15px;
        left:10px;
        width:50%;
        height:20%;
        max-width:300px;
    -webkit-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
       -moz-box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
            box-shadow:0 15px 10px rgba(0, 0, 0, 0.7);
    -webkit-transform:rotate(-3deg);
       -moz-transform:rotate(-3deg);
        -ms-transform:rotate(-3deg);
         -o-transform:rotate(-3deg);
            transform:rotate(-3deg);
}
 
.rotated:after {
    right:10px;
    left:auto;
    -webkit-transform:rotate(3deg);
       -moz-transform:rotate(3deg);
        -ms-transform:rotate(3deg);
         -o-transform:rotate(3deg);
            transform:rotate(3deg);
}
 
.rotated p {
        font-size:16px;
        font-weight:bold;
}

Можете теперь хвастать модным дизайном.
Предыдущие эксперименты с тенью для прямоугольного блока:
Несколько примеров работы с CSS: горизонтальные изгибы
Несколько примеров работы с CSS: вертикальные изгибы
Несколько примеров работы с CSS: тень, создающая иллюзию приподнятого блока
Несколько примеров работы с CSS: тени в виде приподнятых углов
Другие эксперименты с CSS:
Несколько примеров работы с CSS: !important и запрет переноса длинных ссылок
Несколько примеров работы с CSS: запрет расширения и автозаполнения текстовых форм
Несколько примеров работы с CSS: устранение обводки полей в некоторых браузерах и выделение правил для Internet Explorer
Несколько примеров работы с CSS: прозрачность
Несколько примеров работы с CSS: 62,5% и принудительный сброс стилей

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

7 Комментарии

  1. Очень. Круто. Только вот люди, которые не могут, не желают или забыли обновить браузер, не смогут любоваться всей красотой CSS3 :(

    • Ну есть люди, которые забывают ключи, сходить за хлебом, и день свадьбы друга – я за них не в ответе :) Ну а те, кто самоограничивается, не желая обновлять браузер – они знают, на что идут. Рецепты работают в Internet Explorer 9, Firefox 4, Opera 11, Google Chrome 11.

        • Ну тогда и CSS3, как стандарта разметки, практически не существовало. Кстати, если посмотреть в примеры кода, то видно браузеры на движках Webkit и Mozilla до сих пор не утрясли свои стандарты, поэтому нужно использовать костыли в виде -webkit-box-shadow и -moz-box-shadow. Они все никак не решатся напрямую поддерживать box-shadow, а Internet Explorer 9 это уже умеет.

          • Год назад? Да ну. Его тогда даже Opera почти полностью поддерживала.
            Webkit и Mozilla в свежих версиях «утрясли стандарты». Просто хвосты остались — так же, как и у IE фильтры.
            Box-Shadow напрямую работает, гляди: http://min.us/mv5ELW
            Проверь остальные ;)

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

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


*