Добавить всплывающие подписи к фотографиям с помощью CSS3
предосторожность
Эта статья была опубликована более чем год назад, там, возможно, были события.
Пожалуйста, примите это во внимание.
В сегодняшнем уроке мы видим, как набор изображений нашего сайта, так что появляется при наведении курсора на заголовок в нижней части фотографии с замиранием в силе / исчезать.
Этот метод использует некоторые из функций, реализованных в CSS3, последняя версия. К сожалению, не все браузеры по-прежнему соответствовали этой спецификации, знаю, что в зависимости от браузера может не работать. Большинство новых браузеров, которые поддерживают CSS3 являются Fire Fox 4, Сафари 5, Mobile Safari е опера 10. к сожалению, Проводник их не поддерживает (по-видимому, даже следующая версия: IE9), но мы не будем забывать пользователей IE.
Одна из новых функций, реализованных в третьей версии CSS, которые начинают привлекать мое внимание, являются переходы. В CSS переходы позволяют “оживлять” некоторые элементы, не написав ни одной строки JavaScript. Может случиться так, что браузер не поддерживает переходы, результат будет в равной степени достигнуто нет анимации, но мгновенно переходя от одного состояния к другому сохраняя удобство и простоту использования.
Для того, чтобы получить представление о том, что мы должны понять, мы отмечаем демонстрационная страница.
Я заявляю сразу, что в этом уроке мы будем использовать некоторые из новые теги HTML5 приехать “figure” е “figcaption“. Если мы все готовы.
1. Я наценка basilari
Давайте начнем с основным кодом:
<!DOCTYPE HTML>
<HTML языки ="Это">
<глава>
<заглавие>Титры на снимках с помощью CSS3 | демонстрация | TheJoe.it</заглавие>
<META HTTP-экв ="Тип содержимого" содержание ="текст / html;кодировка = UTF-8" />
</глава>
<тело>
</тело>
</HTML>
Эта часть известна всем. Мы создаем “head” е “body“, Мы объявляем язык б и кодирование символы.
2. статья
На этом этапе мы добавим статью, которая будет содержать образность.
<статья> <h1>Lorem Ipsum</h1> <h2>Lorem Ipsum морковь.</h2> <h3>релейный Владимир боги</h3> <h4>предисловие</h4> <п>Lorem Ipsum морковь, Миннеаполис разработчик магистрант. финансирование детей, augue Vitae hendrerit rhoncus, эрос томатный горшок, fermentum Ipsum Lacus сидеть Амет диам жизни,. Mauris переменного тока luctus Eget Элит condimentum среды, а масса лука в. Там нет необходимости Sed. Завтра свободно бакалавриат инновационного финансирования. Bad Suspendisse ultrices augue переменного тока Орси vulputate vehicula. В заключении акции в настоящее время опасение экономического спада закончило морковь. Не своими силами, поэтому,, Но разработчики ненавидят. В различных крупных помидора, или методы работы соусом. Каждая из пропаганды ненависти не начать любой рецепт рецепт. рефинансирование. класс, ПРЕМИЯ разработчиков ultricies стрелки, Лев арахисовое баскетбол Sapien, и разве что Одио nibh accumsan Eget Дознание. Траур дуй сотрудник, Маттис Vitae, лациния Vitae в. Но, я не пью, дабы, как venenatis Curabitur WISI ridiculus Элит. Nulla. Меценат мягкая, Playstation или члены Performance, Область льва кроме магистрант, ЕС sollicitudin Tellus Метус живое существо. </п> <нижний колонтитул>Взятые из <A HREF ="HTTP://www.lipsum.com/">Генератор Ipsum Lorem</а>.</нижний колонтитул> </статья>
Я использовал пару HTML5 тег в этой части кода: “article” в содержат статьи, е “footer” для Текст в нижней части страницы. Это добавляет точную структуру нашей статьи, и делает его семантически более понятным, Кроме того, для работы с графикой.
3. Добавляем фотографии
Теперь мы можем добавить наши фотографии. вставка между заголовком и текстом.
<фигура стиль ="ширина: 500ПВ; высота: 375ПВ; поплавок: оставил; Маржа правый: 20ПВ;">
<IMG SRC ="IMG / cielo.jpg" альт ="небо" />
<figcaption>
<h3>Небо.</h3>
<п>Вид с нуля.</п>
</figcaption>
</фигура>
Для изображений, которые мы использовали другие два элемента HTML5: “figure” е “figcaption“. Это позволяет связать изображение с элементами заголовка ограждающих “img” е “figcaption” один из родителей: “figure“.
4. несколько’ стиль
Теперь мы готовы добавить немного CSS.
/* Поля и цветы */
тело {
поле: 30ПВ;
семейство шрифтов: "Грузия", засечка;
высота линии: 1.8в;
цвет: #333;
}
/* Пункт Размеры */
статья {
ширина: 800ПВ;
набивка: 50ПВ;
поле: 0 авто;
дисплей: блок;
размер шрифта: 1.2в;
}
статья h2 {
высота линии: 1.5в;
}
/* колонтитул для стиля */
нижний колонтитул {
стиль шрифта: курсивный;
размер шрифта: .9в;
}
5. Стиль для изображений
Пусть элемент стиля “figure“, который уже содержит “figcaption” е “img“.
/* для изображений стиля */
фигура {
позиция: родственник;
дисплей: блок;
граница: 1точек твердого тела #333;
поле: 5ПВ 0 10ПВ 0;
}
6. для заголовков Style
Здесь начинается самое интересное. Надпись должна быть над изображением для чтения, мама в нижней части того же, и должны иметь не непрозрачный фон, но прозрачный, так что вы можете продолжать видеть на картинке ниже. Он также должен быть изначально скрыт, так что он может показать только ступить на изображение. Вот как:
/* Подписи для стиля, прячась по умолчанию */
figcaption {
позиция: абсолютный;
оставил: 0;
низ: 0;
ширина: 100%;
размер шрифта: .7в;
цвет: #FFF;
фоновый цвет: RGBA(0,0,0,.7);
помутнение: 0;
-WebKit-переход: Непрозрачность .5s легкость в выкатывания;
-Мос-переход: Непрозрачность .5s легкость в выкатывания;
-о-переход: Непрозрачность .5s легкость в выкатывания;
переход: Непрозрачность .5s легкость в выкатывания;
}
Мы видим, что CSS ближе:
- Поместите подпись
Давайте позиции абсолютным способом элементаfigure. - Установить ширину, размер шрифта цвет
ширина 100% Это гарантирует, что фон заголовка имеет ту же ширину родительского элемента. Мы также даем размер заголовка и цвет другой текст. - Установите полупрозрачный фон и скрыть заголовок
Мы используем формат цветаrgba()указать черный фон с непрозрачностью 70%. Затем мы устанавливаем общую непрозрачность подписи к нулю, и скрыть заголовок. - Настройка эффекта перехода
Вот сердце этого учебника, эффект “переход”:transition: opacity .5s ease-in-outОн сообщает браузеру анимировать свойстваopacityэтого элемента в полсекунды.
Теперь мы устанавливаем “переход“, для, чтобы сделать вид, мы должны добавить класс Псевдо “:hover” элемент “figure“.
/* Показать подпись на парении */
фигура:парения figcaption {
помутнение: 1;
}
Мы в конечном итоге дает ему все немного’ стиль содержание подпись.
/* Добавить отступы и маржу подпись */
figcaption * {
набивка: 0 10ПВ;
поле: 0;
}
figcaption *:Первый ребенок {
обивка-топ: 5ПВ;
}
figcaption *:последний ребенок {
обивка-дно: 5ПВ;
}
/* Мы установили специальный шрифт для заголовков и титров */
figcaption, h1, h2, h3, h4 {
семейство шрифтов: "Lucida Sans Unicode", "Lucida Grande", без засечек;
}
7. Поддержка Internet Explorer
Мы почти закончили. Тем не менее, как упоминалось выше, IE не поддерживает “переходы”. И что еще хуже, IE8 и более ранних версий даже не поддержка “opacity” или цветная “RGBA()”.
Хотя существует не так много, чтобы сделать с “переходы” (если вы не полагаться на JavaScript), мы все еще можем использовать некоторые инструкции конкретные CSS для IE, по крайней мере, сделать титры появляются при наведении курсора мыши.
figcaption {
фильтр: альфа(Непрозрачность = 0);
}
фигура:парения figcaption {
фильтр: ProgID:DXImageTransform.Microsoft.gradient(startColorstr = # aa000000, endColorstr = # aa000000);
}
Мы не сделали с IE. IE8 и более ранних версий не распознают элементы HTML5 приехать “article“, “figure” е “figcaption“. Это не может быть проблемой, если только IE Это не позволяет применять стили к элементам, неизвестных ему.
К счастью, решение просто. Е’ достаточно, чтобы создать необходимые элементы, используя немного’ JavaScript, метод “document.createElement()“. Мы ставим этот код между условные комментарии так что только IE8 и более ранние версии могут просматривать.
<!--
Добавлена поддержка HTML5 элементов IE <знак равно 8
-->
<!--[если IE LT 9]>
<Тип сценария ="текст / JavaScript">
document.createElement('статья');
document.createElement(«Цифра»);
document.createElement('Figcaption');
</скрипт>
<![ENDIF]-->
Теперь заголовки также работают в IE8 и снизить, Они не будут иметь эффекта выцветанию в электронном затихании, но, по крайней мере, она может быть прочитана.
1 Комментарий
юдоль · 13 январь 2011 в 11:10 AM
carina la foto! 🙂