Добавим text-shadow
Добавим text-shadow
Как последнее добавление к оформлению ссылок, добавим небольшую тень (text-shadow). Вновь воспользуемся 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);
}
Рис. 3.12 показывает сравнение ссылок без свойства text-shadow (слева) и с ним (справа), как это выглядит в Safari. Эта деталь почти неразличима, и все же крошечная тень приподнимает текст над фоном ровно настолько, насколько нужно.
Рис. 3.12. Сравнение ссылок без свойства text-shadow (слева) и с ним (справа)
Помните, что свойство text-shadow работает в текущих версиях Safari, Chrome, Firefox и Opera. Браузеры, не поддерживающие text-shadow (читай: IE), спокойно проигнорируют это правило. Нет тени – нет проблем.
С готовым text-shadow мы можем переходить к оформлению состояния :hover. И здесь мы будем в большей мере опираться на CSS3.
Более 800 000 книг и аудиокниг! 📚
Получи 2 месяца Литрес Подписки в подарок и наслаждайся неограниченным чтением
ПОЛУЧИТЬ ПОДАРОКДанный текст является ознакомительным фрагментом.
Читайте также
text-shadow
text-shadow Свойство из CSS2 (выкинутое в версии 2.1, возвращенное в CSS3), которое добавляет тень к тексту; можно указывать направление, количество размытия и цвет тени. Поддерживается в Safari 1.1+, Chrome 2+, Firefox 3.1+ и Opera 9.5+. Пример:p { text-shadow: 1px 1px 2px #999;
box-shadow
box-shadow Добавляет тень к элементу. Синтаксис тот же, что у свойства text-shadow. Поддерживается в Safari 3+, Chrome 3+, Firefox 3.5+, Opera 10.5+ и IE9 Beta. Пример:.foo { box-shadow: 1px 1px 2px #999;
Добавим анимацию
Добавим анимацию Вспомним изученное во второй главе и добавим переход в состояния :hover и :focus у ссылок в меню. Такой эффект смягчит появление фона: он будет постепенно всплывать позади текста. Переход также сгладит смену цвета текста от полупрозрачного белого
Добавим переход
Добавим переход Наконец, наложим переход на свойство opacity, который сгладит изменение свойства и добавит немного приятной глазу анимации, дополняющей эффект.Добавим знакомые строки transition, на этот раз объявляя переход исключительно для свойства opacity. Сделаем его быстрым
Добавим стиль
Добавим стиль Добавим немного CSS, чтобы превратить этот вертикальный список в горизонтальную сетку; поставим обводку толщиной в один пиксель вокруг каждой картинки (также заметим, что фон страницы – легкий серый #eee).ul.gallery li { float: left; margin: 0 10px; padding: 10px; border: 1px solid #ddd; list-style:
Добавим поворот
Добавим поворот Допустим, нам нужно поворачивать фотографию, когда на нее наводят курсор, одновременно с этим масштабируя ее, как и ранее. Мы можем добавить преобразование rotate к правилу :hover:ul.gallery li a: hover img { -webkit-transform: scale(1.5) rotate(-10deg); -moz-transform: scale(1.5) rotate(-10deg); -o-transform: scale(1.5)
text-shadow
text-shadow Теперь добавим почти белую тень под текстом, которая создаст эффект того, что текст вдавлен в кнопку.#thing-alerts input[type="submit"] { padding: 8px 15px; font-family: Helvetica, Arial, sans-serif; font-weight: bold; line-height: 1; color: #444; border: none; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.85); background-image: – webkit-gradient(linear,0% 0%, 0% 100%, from(#fff), to(#bbb));
Элемент <xsl:text>
Элемент <xsl:text> Работа с пробелами всегда обсуждается при рассмотрении XSLT, и в данной главе я уделю этой теме некоторое время. Вставить единственный пробел несложно при помощи элемента <xsl:text>, который используется для вставки символьного текста непосредственно в
Глава 10 А теперь добавим к звуку изображение
Глава 10 А теперь добавим к звуку изображение …Перед ними стояло кое-как сделанное приспособление из проводов и дерева, включая старую коробку из-под чая и велосипедную фару. В центре помещался огромный вращающийся диск из проволоки и картона. Эта сцена разворачивалась в
А теперь добавим к звуку изображение
А теперь добавим к звуку изображение На Всемирной выставке 1939 г., проходившей в районе Нью-Йорка Квинс, Дэвид Сарнофф раскрыл свой план сделать RCA лидером американского телевидения. Для выставки компания воздвигла павильон площадью почти 850 квадратных метров,
Shadow
Shadow Официальная ссылкаShadow (4.0.3): ftp://ftp.pld.org.pl/software/shadow/Содержимое ShadowПоследняя проверка: версия 4.0.3.Программыchage, chfn, chpasswd, chsh, dpasswd, expiry, faillog, gpasswd, groupadd, groupdel, groupmod, groups, grpck, grpconv, grpunconv, lastlog, login, logoutd, mkpasswd, newgrp, newusers, passwd, pwck, pwconv, pwunconv, sg (ссылка на newgrp), useradd, userdel, usermod, vigr (ссылка на vipw)
Shadow count
Shadow count Число файлов Shadow, которые определены для данной базы данных. Как известно, файлы Shadow представляют собой зеркальные подобия основной базы данных. Ранее предназначенные для предохранения базы данных от неожиданной поломки жесткого диска, теперь они в основном
4.3.1. Well-Known Text (WKT)
4.3.1. Well-Known Text (WKT) Представление геометрии Well-Known Text (WKT) разработано, чтобы обмениваться данными геометрии в форме ASCII.Примеры WKT представлений объектов геометрии:Point:POINT(15 20)Обратите внимание, что отметка определена без отделения запятой.LineString с четырьмя пунктами:LINESTRING(0 0, 10
Элемент xsl:text
Элемент xsl:text Синтаксис данного элемента представлен ниже:<xsl:text disable-output-escaping="yes" | "no"> <!-- Содержимое: символьные данные --></xsl:text>Элемент xsl:text служит для того, чтобы создавать в выходящем документе текстовые узлы. При этом xsl:text имеет следующие
Категория Text
Категория Text Категория Text диалогового окна Preferences (рис. 23.5) служит для настройки текста и текстовых блоков. Здесь нам будет полезен только раскрывающийся список Font mapping default, задающий шрифт по умолчанию, используемый для подстановки отсутствующих шрифтов. Остальные же