Позиционирование и z-index в CSS. Часть-2.

* 26-02-2014, 18:39 * A_Protasov * Комментариев: 0

Рейтинг:

Позиционирование и z-index в CSS. Часть-2.

Накладываем текст на изображение.

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

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

<div class="basic-layer2"></div>

Всё тоже только цифра сменилась. То же самое  с правилами блока, просто копируем их с первой части и меняем высоту на 100 px.

.basic-layer2{
                position: relative;
                width:750px;
                height:400px;
                background-color:gray;
                border:1px solid #000;
                margin:10px auto;
}

Теперь внутри блока «basic-layer2» создадим ещё два.  Один с изображением, а второй, для текста.

<div class="basic-layer2">
<div class="laer-img"><img src="images/html_kurs.jpg" /></div>
<div class="laer-text"></div>
</div>

В общем, в HTML, у нас всё готово, идём в CSS. Сразу создадим правила, слоя с изображением.

.laer-img{
                position: absolute;
                width:650px;
                height:300px;
                top:50px;
                left:50px;
}

Абсолютное позиционирование, ширина, высота и отступы. Вроде нечего особенного. Теперь давайте вернёмся к блоку с будущим текстом и напишем его условия отображения.

.laer-text{
                position: absolute;
                width:650px;
                height:150px;
                top:200px;
                left:50px;
                background-color:rgba(0, 0, 0, 0.5);
                color:white;
}

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

.laer-text p{
                margin:5px;
                text-align:justify;
                font-size:13px;
}

Теперь можем, чего не будь написать, и заглянуть в браузер.

Рисунок № 1.

 

 В принципе всё как мы и хотели, стоит обратить внимание, что мы не использовали параметр z-index. Это потому что у нас абсолютное позиционирование и блоки идут друг за другом, поменяв их местами, мы уже вряд ли увидим наш текст. Хотя в целях бесперебойной работы во всех браузерах будет не лишним назначить блоку «laer-text» z-index: 1.

Делаем блок прозрачным (opacity).

Теперь если мы хотим реализовать идею с появлением текста при наведении, то здесь я предлагаю более простой и солидный вариант, с применением свойства «opacity» (анг. непрозрачность). Почему я назвал его солидным? Вы поймёте чуточку позднее.

И так всё что сейчас нам необходимо для исчезновения нашего блока  «laer-text», это дописать в него вот такое правило:

opacity: 0;

То есть мы сделали его полностью прозрачным. Теперь с помощью псевдокласса hover, заставим его опять приобрести все тона, которые он имеет.

.laer-text:hover{
                opacity: 1;
}

Вот и всё сохраняйте и проверяйте, всё работает как швейцарские часы! Вот только нет солидности, а именно плавности появления. А это серьёзный аргумент, и подправить это дело нам поможет свойство «transition» (анг. переход). Эти правила можно дописать как в псевдокласс hover,  так и в «laer-text», хотя последнее будет более правильным.  Всё что нам необходимо, это добавить вот такую строку:

transition: opacity 900ms;

Имеющую следующее значение, переход (transition) между параметрами прозрачности (opacity) и скорость появления (900ms). Но следует учесть, что это правило необходимо задать для всех популярных браузеров.

-webkit-transition: opacity 900ms;
-moz-transition: opacity 900ms;
-o-transition: opacity 900ms;
transition: opacity 900ms;

Ну, вот как то так, мы и реализовали ещё одну идею, с наложением текста на изображение и плавным появлением при переходе.

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

Внимание!!! Уважаемые гости и пользователи! Скачать исходные материалы, всех трёх примеров «Позиционирование и z-index в CSS», вы можете в третьей части!




razdacha.jpg

Просмотров: 1 996
Последние новости блога
Позиционирование и z-index в CSS. Часть-1.
Рано или поздно большинство веб мастеров при изучении CSS, сталкиваются с такими свойствами как позиционирование блоков  и z-index, то есть отображение их поверх друг друга. На самом деле это
Простая вёрстка в HTML + CSS.  Урок №10.
Создаём файл CSS. Продолжаем тему прошлого урока, где мы немного попытались понять, что же такое CSS. Прежде всего, нам необходимо создать файл со стилями, и сохранить его рядом с нашим файлам HTML.
Простая вёрстка в HTML + CSS.  Урок №9.
Дорогие друзья, если вы заметили, то в заголовке, наших с вами уроков что то поменялось. Это не номер урока. С сегодняшнего дня к нам присоединяются, каскадные таблицы стилей, или проще говоря, CSS.
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Информация
Посетители, находящиеся в группе Гости, не могут оставлять комментарии к данной публикации.


Статистика

  • Рейтинг@Mail.ru