5 CSS свойств для изображений, которые вам необходимо знать
Существую CSS-свойства, которые используют изображения для создания фона элементов, создания рамок и масок «слоев», а также вырезки частей изображения. Применяя их, вы сможете добавлять изображения к элементам страницы и контролировать их положение и поведение.
Однако, существуют другие свойства, которые используются не так часто и применяются непосредственно к изображениям (тегу <img />). Использование тега является наиболее предпочтительными способом размещения изображений на страницах.
Предназначение указанных css свойств, применяемых к изображениям различное: от создания тени до увеличения резкости. Они помогают нам лучше контролировать положение и внешний вид изображений, добавляемых с помощью тега .
Давайте рассмотрим каждый из них подробнее.
Фиксируем «подвал» внизу страницы с помощью Flexbox
В процессе верстки макетов, разработчик часто сталкивается со следующей проблемой: при недостаточном количестве контента, «подвал» отображается где-то по середине страницы.
Реализуем hover-эффект над картинкой с помощью CSS3
Один из посетителей нашего сайта решил повторить эффект, который реализован на одной из страниц нашего сайта. Он заключается в том, что при наведении курсора мыши на изображение, картинка трансформируется и в нижней части изображения появляется подпись.
В этом уроке будет показано как при помощи CSS можно добиться такого же hover эффекта. Кроме того, будет рассказано как можно настроить анимацию под себя.
Кратко о полизаполнении (Polyfill)
Полизаполнения (polyfills) – это решения на javaScript, имитирующие работу новых функций HTML5 в устаревших браузерах. В основном предназначаются для Internet Explorer старше 9-ой версий. Самым простым примером полизаполнения, который первым приходит в голову, является скрипт HTML5Shiv. Он обеспечивает возможность стилизации новых семантических HTML5 элементов ( <header>, <footer>, <article>
и других) в устаревших версиях IE.