Как сделать затухание css

Плавность и анимация в CSS

Здравствуйте, уважаемые читатели. Сегодня пост будет посвящен тем, кто изучает сайтостроение. На сегодняшний день язык оформления интернет-страниц (CSS) шагнул достаточно далеко. Что поделать, будущее уже наступило. И с его помощью теперь можно не только располагать элементы на странице и менять их цвет, но и применять в ним более интересные эффекты, что придает оформлению страницы совершенно другой вид. Некоторые из них мы сейчас рассмотрим.

• Плавное изменение цвета
• Плавное затухание
• Плавное увеличение — уменьшение
• Плавное перемещение
• Плавный поворот

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

Плавное изменение цвета

Для примера создадим HTML документ и поместим в него блок div

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

#block1{ width:150px; /* Ширина */ height:150px; /* Высота */ background:#234543; /* Цвет */ margin:100px auto; /* Отступы */ border-radius:8px; /* Радиус углов */ -o-border-radius:8px; /* для Оперы */ -webkit-border-radius:8px; /* Хром и Сафари */ -moz-border-radius:8px; /* Мозилла */ -webkit-transition: background-color 1s linear; -o-transition: background-color 1s linear; -moz-transition: background-color 1s linear; transition: background-color 1s linear; } #block1:hover{background:#00CC66;} /* Цвет блока при наведении */

Плавное изменение цвета происходит за счет применения свойства transition, что в переводе означает переход или превращение. И это превращение происходит за 1 секунду, как указано в значении. Linear можно поменять на ease и переход будет чуть быстрее. Смотрим пример.

Плавное затухание

CSS код пишем примерно тот же самый, только свойство указываем — all, то есть ко всему, что последует после псевдокласса hover, будет применена плавность. В нашем случае это затухание. Блок изменит прозрачность при наведении на 50%.

-webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover{opacity:0.4;}

-webkit-transition: all 1s ease; -o-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease; #block1:hover

Плавное увеличение

Здесь все то же самое. Только в примере я установил значение linear вместо ease. Устанавливаем в псевдоклассе hover ширину и высоту, отличную от оригинального размера.

Плавное перемещение

Здесь значения будем прописывать в псевдоклассе, используя свойство transform.

#block1:hover{ -webkit-transform: translate(50px,0); -moz-transform: translate(50px,0); -o-transform: translate(50px,0); transform: translate(50px,0); }

Написанное означает, что при наведении курсора на объект происходит его смещение по оси Х влево на 50 пикселей. Примерно так же происходит плавный переход к якорю-ссылке.

Плавный поворот

#block1:hover{ -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); }

Это означает, что объект будет повернут на 180° по часовой стрелке

Вернемся к теме о браузерах. Opera, Mozilla, Chrome прекрасно поддерживают все эти новшества, но Internet Explorer как обычно живет своей жизнью и никуда не спешит. У него и так все хорошо. 🙂 То есть все, о чем я писал выше, он просто не понимает. Вот такие дела. Скачайте исходники и изучите код более подробно.

Источник

Затухание текста на CSS3

Привет всем. Сегодняшний пост будет коротким, но, думается мне, полезным.
Часто приходится слышать о том, как сделать «затухание» текста к низу, верху и т.д.
Есть варианты на js, есть варианты с картинкой и просто css-градиентом наложенными поверх текста.
Сегодня в голову пришел несколько другой подход к решению этой проблемы.
Его реализация проста как три копейки

Нам понадобится два блока — контейнер и блок с текстом.

Теперь суть.
Вкладываем блок с текстом в контейнер, которому задаем внутреннюю тень. Саму тень смещаем туда, где нам необходимо «затухание». Однако, внутренняя тень будет распределяться по всему контуру блока, и чтобы этого избежать, задаем ей отрицательное растяжение. За счет того, что у нас большое рассеивание и огромный сдвиг — затухание тень окажется только там, где она и нужна.
Текстовому блоку необходимо задать отрицательный z-index, чтобы тень контейнера была поверх него.
Вот и все дела.

Из плюсов:
1)текст полностью выделяемый
2)текстовый блок не выпадает из потока и в див-обертку можно добавлять любой контент(но затухания у него уже не будет)
3)затухание не зависит от размера блока и останется всегда там, где мы его добавили.

Из минусов:
1)из-за отрицательного z-index пришлось добавить значок курсора для текста(для явности)
2)в опере(11.52) несколько иначе отрабатывается растяжение, в результате чего тень становится очень интенсивной.
3)не работает в ИЕ до 8 включительно

Соответственно цвета, интенсивность и размеры можно выставить в параметрах тени.

upd товарищ VitaZheltyakov предлагает накладывать еще одну тень для более плавного слияния с основным фоном.

Источник

Затухание текста средствами CSS

Иногда бывает необходимость при верстке сайта вывести на экран только часть текста. Чтобы пользователю было понятно, что далее следует продолжение можно, например, поставить троеточие или ссылку «читать далее». Но есть весьма красивый способ сделать так, чтобы текст постепенно затухал.
Чтобы было понятно о чем идет речь сразу приведу пример.
Из всего материала, который мне удалось найти за день более всего мне подходил простой и понятный способ, описанный здесь. Но он имеет существенный минус: тень сложно позиционировать и боковые края приходится отделять, используя отступы.
Для тех, кто ищет простой способ сделать затемнение текста привожу свой простой пример.

Итак, нам понадобится только один блок, в котором будет текст, который нужно затемнить:

 
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
 
 

Теперь суть:
Используя псевдокласс before мы создаем маленький блок с градиентной заливкой. По умолчанию он располагается вверху блока с текстом. Используя position:relative отодвигаем этот блок вниз так, чтобы он закрывал одну (или несколько) последних строчек текста. Все.

Из преимуществ можно выделить:
— простота реализации (используем только css)
— выделяемый текст

Из минусов:
— Не работает в IE до 9 версии включительно (кто б сомневался)
— Подходит для блоков с фиксированной высотой

Источник

doctor Brain

Допустим, Вы хотя бы иногда работаете с видеоредакторами: Windows Movie Maker или Adobe Premiere Pro. В таком случае Вам хорошо известны эффекты постепенного исчезновения (fade out) или появления изображения (fade in). Можно с уверенность сказать, что эти эффекты популярны, потому что они позволяют создавать довольно приятные переходы, которые не раздражают пользователей.

Давайте поработаем над постепенным появлением и исчезновением блоков в HTML-документах.

Полагаю в этом месте Вы скажете: “Постойте. Все уже давно сделано. Одноименные функции: .fadeIn() и .fadeOut() давно существуют в библиотеке jQuery”

Но дайте закончить мысль: мы создадим эффекты постепенного появления и исчезновения блоков с помощью CSS.

Эффект появления блока (fadeIn)

Добавим в CSS-файл код, который позволит изменять состояние блока от прозрачного до полностью непрозрачного:

.fade-in < animation: fadeIn ease 10s; -webkit-animation: fadeIn ease 10s; -moz-animation: fadeIn ease 10s; -o-animation: fadeIn ease 10s; -ms-animation: fadeIn ease 10s; >@keyframes fadeIn < 0% 100% > @-moz-keyframes fadeIn < 0% 100% > @-webkit-keyframes fadeIn < 0% 100% > @-o-keyframes fadeIn < 0% 100% > @-ms-keyframes fadeIn < 0% 100% > 

Для класса .fade-in указано достаточно большое время выполнение — 10 секунд. Это значение носит демонстрационный харктер и должно быть скорректировано, в соответствии с поставленными Вами целями.

Как Вы заметили, в примере используются префиксы вендоров ( -webkit , -moz , -o , -ms ), которые позволяют нам быть уверенными, что данный эффект будет актуален и для старых версий браузеров различных производителей. По данным статистики, использование префиксов очень раздражает разработчиков. Но, в конце-концов, удобство пользователей для нас в приоритете.

Теперь скорректируем HTML-документ и присвоим класс .fade-in блоку, который выполнит функцию обертки — эффект появления будет работать для всех тегов, размещенных внутри этого блока:

Эффект исчезновения блока (fadeOut)

Чтобы сделать элемент прозрачным, добавим в CSS-файл следующий код:

.fade-out < animation: fadeOut ease 8s; -webkit-animation: fadeOut ease 8s; -moz-animation: fadeOut ease 8s; -o-animation: fadeOut ease 8s; -ms-animation: fadeOut ease 8s; >@keyframes fadeOut < 0% 100% > @-moz-keyframes fadeOut < 0% 100% > @-webkit-keyframes fadeOut < 0% 100% > @-o-keyframes fadeOut < 0% 100% > @-ms-keyframes fadeOut < 0% 100% > 

В данном случае непрозрачность блока меняется от 1 (100%) до 0 (0%), то есть элемент становится абсолютно прозрачным.

Изменения в HTML-документе соответствуют алгоритму, предложенному в первом примере:

Мы еще раз убедились, что можно создавать анимацию HTML-элементов только с помощью CSS без привлечения сторонних библиотек.

Новые публикации

JavaScript: сохраняем страницу в pdf

HTML: Полезные примеры

CSS: Ускоряем загрузку страницы

JavaScript: 5 странностей

JavaScript: конструктор сортировщиков

Категории

О нас

Frontend & Backend. Статьи, обзоры, заметки, код, уроки.

© 2021 dr.Brain .
мир глазами веб-разработчика

Источник