Простой и гибкий hover с использованием opacity
Простой и гибкий hover с использованием opacity
Мы постоянно ищем решения, которые экономят время и содержат дополнительную гибкость. CSS3 изобилует такими решениями: эта технология дает возможность написать несколько строчек и получить то, на что раньше уходило больше времени и сил.
В нашем арсенале есть еще одно свойство для улучшения вида элементов в состоянии :hover: opacity. Как упоминалось в первой главе, opacity – это свойство CSS3, которым можно явно указать, насколько непрозрачным будет тот или иной элемент. В сочетании с вышеупомянутым RGBA opacity предлагает еще один способ добавить прозрачность в дизайны, которые мы создаем для веба.
Один из способов применять opacity, который нравится мне, – создавать простое и гибкое состояние: hover для графических ссылок, пользуясь изменением прозрачности для создания нескольких состояний из одного изображения. Прибавим к этому CSS-переход и получим прекрасное, яркое, легко поддерживаемое взаимодействие для графических ссылок на странице.
Посмотрим, как свойство opacity применяется в примере с Луной.
Более 800 000 книг и аудиокниг! 📚
Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением
ПОЛУЧИТЬ ПОДАРОКДанный текст является ознакомительным фрагментом.
Читайте также
opacity
opacity Определяет непрозрачность элемента. Значение 1 соответствует полной непрозрачности; значение 0 соответствует полной прозрачности. Поддерживается в Safari 1.2+, Chrome 1+, Firefox 1.5+, Opera 9+ и IE9 Beta. Пример:.foo { opacity: 0.5; /*.foo will be 50% transparent */
3. Hover по-новому
3. Hover по-новому На протяжении последних двух глав мы разбирались в том, какие свойства CSS3 можно использовать сейчас. Мы также говорили о том, в каких частях интерфейса резонно применять эти свойства.Повторим самое важное, что мы уже успели узнать.1. Существуют основные
Оформление состояний hover и focus
Оформление состояний hover и focus Добавим изменение цвета текста и фона для состояния :hover каждой ссылки. Мы вновь применим RGBA, чтобы задать тексту полупрозрачный белый фон.#nav li a { padding: 5px 15px; font-weight: bold; color: #ccc; color: rgba(255, 255, 255, 0.7); text-shadow: 0 1px 1px rgba(0, 0, 0, 0.5);}#nav li a: hover,#nav li a: focus { color: #fff;
opacity: хак для IE
opacity: хак для IE К счастью, opacity поддерживается в Internet Explorer 9 Beta, но мы также можем сымитировать тот же результат в ранних версиях IE, воспользовавшись проприетарным свойством filter от Microsoft.Обычно я бы не стал предлагать использовать свойство filter, потому что (в отличие
Вперед, к новому hover
Вперед, к новому hover Ранее я упоминал, что такой подход повлиял на то, как я думаю о подготовке графики для сайтов. Мы можем пользоваться свойством opacity, чтобы управлять тем, как графика выглядит в обычном состоянии, смешивая ее с фоном – и затем применять другие
Масштабирование в hover
Масштабирование в hover Теперь – преобразования. Добавим преобразование scale, чтобы фотография увеличивалась, когда на нее наводят курсор. Помним о том, что исходные изображения больше, чем 200 пикселей в ширину, – значит, фотографии можно увеличивать без потери
Повторное использование анимации для кнопки в состоянии hover
Повторное использование анимации для кнопки в состоянии hover Одна из приятных особенностей ключевых кадров состоит в том, что их можно повторно использовать внутри нескольких блоков кода в стилевом листе. Например, применить ту же анимацию «pulse» к кнопке в состояниях hover
Создаём простой пул
Создаём простой пул Освоив ранее основные понятия, мы научились понимать ZFS. Для обратной же задачи — чтобы ZFS понимала нас — нужно ознакомиться с её командами. Главные из них — две: zpool для создания и управления пулами, и zfs для создания и управления наборами данных.
Эффекты Motion (Движение) и Opacity (Непрозрачность)
Эффекты Motion (Движение) и Opacity (Непрозрачность) Эффекты Motion (Движение) и Opacity (Непрозрачность) являются постоянными, то есть примененными к любому клипу на видеодорожках по умолчанию. В этом легко убедиться, выделив любой клип и взглянув на вкладку Effect Controls (Управление
Opacity (Непрозрачность)
Opacity (Непрозрачность) Со свойством Opacity (Непрозрачность) вы уже ознакомились в главе, посвященной титрам. Это свойство определяет степень непрозрачности объекта и часто применяется при наложении видео. Клип Clip07.avi, который вы добавили на дорожку Video 3 (Видео 3), является
18.5.1. Простой цикл for
18.5.1. Простой цикл for Этот цикл просто выводит на экран список, который состоит из " 1 2 3 4 5". Чтобы получить доступ к каждой переменной, в качестве параметра имя_переменной указывается "loop".$ pg for_i#!/bin/sh# for_ifor loop in 1 2 3 4 5doecho $LOOP doneПриведенный выше сценарий выводит следующие данные:$
18.6.1. Простой цикл until
18.6.1. Простой цикл until Этот сценарий непрерывно ищет пользователя "root" и выполняет команду who. Результат выполнения команды grep содержится в переменной IS_ROOT.Если пользователь "root" обнаружен, цикл завершает обработку. Затем пользователю simon направляется электронное
18.7.1. Простой цикл while
18.7.1. Простой цикл while Ниже приводится основная форма цикла while. Условие тестирования состоит в том, что если "COUNTER is less than 5", условие останется истинным. Переменная counter имеет начальное значение нуль, и ее значение увеличивается на постоянную величину при выполнении цикла.$ pg
Opacity (Непрозрачность)
Opacity (Непрозрачность) Если мы будем далее продвигаться по панели параметров (см. рис. 9.1) данного инструмента, то следующий параметр – Opacity (Непрозрачность).Что такое прозрачность, интуитивно понятно каждому. Объект является прозрачным, если видно изображение,