Введите ваш адрес почты


sdcvoy.ru
Понравился сайт? Поделись с друзьями!
Главная » Css3 » Ispolzuem-attr-dlya-oformleniya-izobrazhenij

Используем attr() для оформления изображений

использование attr()Раньше я почти бездумно смотрел примеры сделанные на CSS3 и даже не думал, как это делается. И вот совсем недавно меня посетила одна мысль, а почему бы самому не попробовать сделать что-то полезное. Например, оформить изображение. Как говорится, пока сам не попробуешь ничего у тебя не получится. А захотелось сделать вот, что:

Для вытаскивания title я использовал функцию attr(). Вы наверное не поверите, но я ни разу её не использовал:

a:after{
    display:none; 
    content: attr(title);    
}

Здесь я использовал свойство content, которое обычно применяется для вывода какого-либо текста или символа в сочетании с различными псевдоэлементами. В данном случае это элемент :after. А строчку display:none; я добавил, чтобы наш элемент был не виден. Код HTML имеет следующий вид:

<ul>
   <li>
     <a title="Ошибка 404" href="#">
        <img title="Ошибка 404" src="/wp-content/uploads/404.png" alt="" />
     </a>
    </li>
</ul>

Я не стал мудрить и решил использовать маркированный список. Далее нужно было оформить наш атрибут title:

li:hover a:after{
 margin:0 1em 0 0;
    padding:0.5em;
    width:80%;
    position:relative;
    bottom:2.4em;
    font-size:1.2em;
   background-image: -o-linear-gradient(left, #E3D6D9 0%, #0C574D 100%);
background-image: -moz-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
background-image: -webkit-linear-gradient(left, #999999 0%, #ffffff 100%);
background-image: -ms-linear-gradient(bottom, #E3D6D9 0%, #0C574D 100%);
background-image: linear-gradient(left, #000000 0%, #ffffff 100%);
    display:block;   
    color:#ffffff; 
}

Строчка кода li:hover a:after означает, что при выделении строки списка наш псевдоэлемент приобретёт свойства, которые мы прописали выше. Осталось добавить анимации и в принципе всё будет готово:

@keyframes anime {
0% {opacity:0;transform:translate(-100%);}
100% {opacity:1;transform: translate(0);}
} 

Подключаем анимацию:

li:hover a:after{
animation:anime 0.6s 1;
}

В анимации я использовал свойство трансформации — transform и прозрачности элемента — opacity. Ничего сложного в этом нет. В итоге вот, что у меня получилось.
Надеюсь, Вам, дорогие мои читатели понравился урок. Если у кого-то есть свои замечания, вопросы пишите. Это обычный пример, можно по-экспериментировать и получить другие примеры. Хотя думаю в сети их так навалом. Не забываем делиться полученной информацией с друзьями.



наверх