Красивый лист с изгибами для текста
 | |
| В недрах интернета нашел этот скрипт и мне очень понравился. Красивый лист с изгибами для текста. Его можно создавать для заголовка в модулях и на форуме. Будит отлично видно и красиво. Думаю заходя в раздел не кто не пройдет мимо его. Писать на нем можно все, то что вам хочется и больше пользователь прочло, так как он красив по своей структуре и заметен. Код: Код <div id="listeffect"> <strong>Лист для текста с эффектом отгибания</strong> <p>Разумеется что можно применить не только к тексту</p> </div> <style> #listeffect { position: relative; /* - Ширина листа - */ width: 90%; /* - Цвет фона - */ background: #ddd; /* - Округлость краёв - */ -o-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; /* - Внутренние отступы - */ padding: 2em 1.5em; /* - Цвет текста - */ color: rgba(0,0,0, .8); /* - Тени текста - */ -ms-text-shadow: 0 1px 0 #fff; -o-text-shadow: 0 1px 0 #fff; text-shadow: 0 1px 0 #fff; /* - Расстояние между строками - */ line-height: 1.5; /* - Внешние отступы = 20px с верху и с низу - */ margin: 20px auto; } /* - Изменить угол отгиба,менять угол значениями (-3deg) и (3deg) - */ #listeffect:before, #listeffect:after { z-index: -1; position: absolute; content: ""; bottom: 15px; left: 10px; width: 50%; top: 80%; max-width:300px; background: rgba(0, 0, 0, 0.7); -o-box-shadow: 0 15px 10px rgba(0,0,0, 0.7); -ms-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); -o-transform: rotate(-3deg); -ms-transform: rotate(-3deg); transform: rotate(-3deg); } #listeffect:after { -webkit-transform: rotate(3deg); -moz-transform: rotate(3deg); -o-transform: rotate(3deg); -ms-transform: rotate(3deg); transform: rotate(3deg); right: 10px; left: auto; } </style> | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 4 | |
|
| |
