Пример перехода градиента фона CSS при наведении · GitHub
Пример перехода градиента фона CSS при наведении
Этот файл содержит двунаправленный текст Unicode, который может быть интерпретирован или скомпилирован не так, как показано ниже. Для просмотра откройте файл в редакторе, который показывает скрытые символы Unicode.
Узнайте больше о двунаправленных символах Unicode
Выберите похожие цвета градиента для тонкого перехода.
Не забудьте вставить свойства CSS3 перед закрывающей скобкой тега body
Градиенты фона с CSS3
Вы можете создавать градиентную фоновую графику в Photoshop, но намного проще и легче использовать CSS3.
Никакой графики не требуется — достаточно нескольких строк кода на внешнем листе.
Свойства CSS3 еще не включены в диалоговое окно Dreamweaver «Определение правила CSS», но вы можете использовать бесплатный онлайн-генератор CSS3.
Предустановки предлагают несколько стилей градиента, которые можно применить к кнопкам, панелям навигации или областям содержимого. Чтобы создать градиент фона body , выберите «вертикальную» ориентацию и измените размер предварительного просмотра на 350 x 300.
http://www.colorzilla.com/gradient-editor/
Дважды щелкните маркер цвета под полосой градиента и введите шестнадцатеричный код цвета из темы Kuler. Если ваша предустановка имеет более одного цветового маркера, повторите.
Маркеры под полосой градиента определяют цвет, а маркеры над полосой градиента определяют непрозрачность.
Перетаскивайте цветные маркеры, чтобы контролировать, насколько далеко вниз по странице будет распространяться градиент. Когда будете готовы, дважды щелкните панель CSS, чтобы выбрать код CSS. Выберите Правка > Копировать.
Цветовые маркеры управляют переходом между оттенками.
Вернувшись в Dreamweaver, откройте внешнюю таблицу стилей. Вставьте курсор перед закрывающей скобкой стиля body и выберите «Правка» > «Вставить».
Вставьте код CSS3 во внешнюю таблицу стилей.
Добавьте следующие свойства после настроек градиента:
background-repeat: без повтора; background-attachment: исправлено;
Эти свойства будут создавать непрерывный градиент, когда пользователь прокручивает страницу вниз.
Свойства background-repeat и background-attachment необходимы для длинных областей содержимого, таких как тело страницы. Вам не понадобятся эти свойства в более коротких областях содержимого.
Изменить background-color свойство, соответствующее вашей цветовой схеме. Этот сплошной цвет фона будет служить запасным вариантом в старых браузерах.
Измените свойство background-color .
Нужен еще один стиль. Введите следующий стиль над стилем тела :
html, body { height: 100%; }
Селектор группы html, body устанавливает высоту элементов html и body на 100%, заставляя градиент расширяться до нижней части браузера.
карта: после {
card:hover:после {
