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

Несколько примеров работы с CSS: загнутые углы и блок с поворотом | n-wp.ru Настройки
👍 Научим создавать сайты на WordPress бесплатно за 19 уроков. Подробнее →

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

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

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

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

<div class="curled">
        <p>Содержимое блока</p>
</div>

Для класса 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: загнутые углы и блок с поворотом

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

<div class="rotated">
        <p>Содержимое блока</p>
</div>

Для класса 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% и принудительный сброс стилей

Создай свой первый сайт на WordPress

tiaurus

Автор n-wp.ru — блога о WordPress для новичков.

Оцените автора
Добавить комментарий

  1. Grawl

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

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

      Ответить
      1. Grawl

        Когда IE8 не поддерживал CSS3, Ты был другого мнения :)
        сравнение просто прекрасно. запомню.

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

          Ответить
          1. Grawl

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

            Ответить
            1. CSS3 до сих пор является неутвержденным набором директив, разрабатываемой версией (http://www.w3.org/Style/CSS/current-work).

              Ответить
              1. Grawl

                Это Я знаю. Но, не смотря на статус разработки, её все уже в полный рост используют. Потому что надоело сидеть без нормальных инструментов.

                Ответить