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

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

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

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

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

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

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

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

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

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

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

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

tiaurus

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

7 комментариев

  • Очень. Круто. Только вот люди, которые не могут, не желают или забыли обновить браузер, не смогут любоваться всей красотой 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
            Проверь остальные ;)

/* ]]> */