Эффект стопки бумаги.


Всем привет. Сегодня опять небольшой субботний пост. Эффект стопки бумаги при оформлении участка текста на CSS. Добавляйте его в копилку других похожих вариантов оформления текста. Кто заинтересован можно посмотреть ещё один здесь и в этом сообщении.


Код совсем маленький. И как обычно,  устанавливаем его непосредственно в редакторе сообщений в нужном месте, перейдя в режим HTML. Вот так примерно это будет выглядеть на странице.

Лес, точно терем расписной,
Лиловый, золотой, багряный,
Веселой, пестрою стеной
Стоит над светлою поляной.
Березы желтою резьбой
Блестят в лазури голубой,
Как вышки, елочки темнеют,
А между кленами синеют
То там, то здесь в листве сквозной
Просветы в небо, что оконца.

(И. Бунин)

Ну и сам код.
<style>.layered-paper {
    background : #E3E4E4 ;
    box-shadow:
        0 2px 2px rgba(0,0,0,0.15),
        0 10px 0 -5px #E3E4E4 ,
        0 10px 1px -4px rgba(0,0,0,0.15),
        0 20px 0 -10px # E3E4E4,
        0 20px 1px -9px rgba(0,0,0,0.15);
}</style>

<div class="layered-paper">
здесь ваш текст
</div>

Цветовые решения выделены синим цветом. Красным-ваш текст.

Всем хороших выходных. Спасибо, что читаете мои шпаргалки. До встречи.

здесь можно оформить подписку на новые шпаргалки

Введите Ваш email


8 комментариев:

  1. Виктория, добрый день! А размер стопки по ширине можно менять??

    ОтветитьУдалить
    Ответы
    1. Да, Лариса, можно. Нужно после строки 0 20px 1px -9px rgba(0,0,0,0.15);(последняя строка перед закрывающей скобкой) поставить значение
      width :250px;(или любое своё). А сам код стопки заключить в открывающийся и закрывающийся теги CENTER

      Удалить
    2. Спасибо, Виктория:))))

      Удалить
    3. Пожалуйста Лариса. Приятно, что Вам пригодилось.

      Удалить
    4. Виктория, я очень рада, что попала на Ваши шпаргалки. Спасибо Вам за Ваш труд:))))

      Удалить
    5. Лариса, очень приятно слышать. Как говорят, спасибо Вам за спасибо. И за то, что читаете мои шпаргалки.

      Удалить

Пользовательский поиск