Объявление
Уважаемые читатели, друзья, подписчики. В связи с участившимся и, порядком надоевшим спамом в комментариях от всяких анонимах(будь они не ладны), я вынуждена включить модерацию комментариев на некоторое время. Очень надеюсь на ваше понимание.

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


Всем привет. Сегодня опять небольшой субботний пост. Эффект стопки бумаги при оформлении участка текста на 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. Лариса, очень приятно слышать. Как говорят, спасибо Вам за спасибо. И за то, что читаете мои шпаргалки.

      Удалить

ВСЕГДА РАДА УСЛЫШАТЬ ВАШЕ МНЕНИЕ!
Ели у вас возникла необходимость опубликовать код в комментарии, то воспользуйтесь encoder HTML