Эффект отогнутого листа с тенями | Скрипт для сайта - Скрипты для uCoz | Делай сайт
Приветствую Вас, Гость! Регистрация
Георгиевская ленточка
Воскресенье, 11.12.2016
Скрипты для uCoz » Эффекты для сайта uCoz » Эффект отогнутого листа с тенями | Скрипт для сайта

Аудиоплеер для сайта uCozАудиоплеер с плейлистом для сайта
Видеоплеер для сайта uCozВидеоплеер с плейлистом для сайта
Меню для сайта uCozВертикальное меню для сайта uCoz
Выпадающее меню для сайта uCozГоризонтальное меню для сайта uCoz
Круглое меню для сайта uCozВид материалов для сайта uCoz
Вид материалов Аудио для uCozВид материалов Видео для uCoz
Галерея для сайта uCozГенераторы для сайта uCoz
Контейнер для контентаКнопки для сайта uCoz
Слайдер для сайта uCozСчётчик для сайта uCoz
Часы для сайта uCozТекстовые эффекты
Таблица цветов для сайта uCozЭффекты для сайта uCoz
Эффекты курсораЭффекты увеличения
Мини чат для сайта uCozРадио для сайта uCoz
Скрипты для юКозИгры для сайта uCoz
Окна для сайта uCozИнформеры для сайта uCoz
Флеш и анимации для сайтаКалендарь для сайта uCoz
Мониторинг серверов для ucozСлайдшоу для сайта uCoz



Адаптивный сайт - aTmpl



Эффект отогнутого листа с тенями | Скрипт для сайта

Эффект отгиба листа для текста




Лист может содержать не только текст но и любые другие элементы.Можно изменить всю цветовую компановку и размеры воспользовавшись комментариями в програмном коде примера.В работе элемента применяются свойства CSS3 описание которых Вы сможете найти на этом сайте введя в поиск название свойства.Скопируйте пример програмного кода в редактор HTML находящийся ниже и посмотрите эффект в работе.Поэкспериментируйте со своими значениями прямо в редакторе.




Еффект листа с тенями

Програмный код для установки

<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>


Редактор HTML - OnLine для сайта

Вставьте код для установки в HTML редактор и проверьте.









Русские шрифты



Ссылка:
BB code:




  • ©
  • | Просмотров: 3486 | Добавил: IZOTOP | Рейтинг: 0.0/0
    | Теги: effect, CSS3, лист, сделать, uCoz, текст, Эфект

    Всего комментариев: 8
    0   Спам
    8 serna62   (12.05.2014 16:51)
    Аватар serna62 Спасибо за помощь, но в таком случае цвет фона сайта становится белым. Как можно добиться этого эффекта, но чтобы цвет фона не менялся на белый?

    0   Спам
    7 serna62   (15.04.2014 10:56)
    Аватар serna62 Здравствуйте. Тоже не получились загибы углов. Помогите. Адрес страницы.

    0   Спам
    6 Админ7175   (28.03.2014 20:18)
    Аватар Админ7175 Добрый день! Жаль что у меня эффект не получился. Сайт Может подскажите? Спасибо!
    P.S.
    Извините за беспокойство.
    Сделала по другому.

    0   Спам
    4 312   (15.02.2014 10:54)
    Аватар 312 Здравствуйте Михаил!
    У мене такая же проблема с листом отгибанием как у Нинэль.
    и мне сможете также помочь (скорей всего также проблема с шаблоном)
    мой сайт http://promnelikvidi.com/ (поддомен omex.at.ua)
    За раннее благодарен!

    0   Спам
    5 IZOTOP   (17.02.2014 12:03)
    Аватар IZOTOP Привет!
    Мне не удалось обнаружить эффекта на указанных страницах.

    0   Спам
    3 Andy   (17.09.2013 10:15)
    Аватар Andy нет один эффект на странице
    только в визуальном редакторе этот эффект присутствует
    и там я могу редактировать текст
    а на странице просто серая полоса в ней текст

    sad и такая же ситуация с таблицей Excel
    в визуальном редакторе она есть а на странице с материалом ее нет
    но это к сожалению другая тема sad

    0   Спам
    1 Andy   (16.09.2013 12:08)
    Аватар Andy Михаил! У меня аналогичная ситуация с скриптом как и у Анастасии
    помогите!

    0   Спам
    2 IZOTOP   (16.09.2013 12:45)
    Аватар IZOTOP Вы хотите разместить два эффекта рядом?


    Добавлять комментарии могут только зарегистрированные пользователи.
    [ Регистрация | Вход ]