Картинки CSS/HTML

Простые подсказки по CSS по изображениям, из которых можно узнать, как сделать картинку ссылкой, скруглить углы и добавить фильтры. А так же как сделать изображение адаптивным, задать ширину и многое другое.

Картинка ссылка CSS/HTML

Как сделать картинку ссылкой? На самом деле все очень просто. В тег <a> вставляем саму картинку <img>, атрибут src у картинки — это путь к картинке, атрибут href у ссылки — адрес сайта или веб-страницы, куда будет вести ссылка. Посмотреть наглядно можно на примере:


<a href="https://stylecss.ru/"><img src="img/cat.png" alt=""></a>

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

Черно-белая картинка CSS

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

Пример

HTML


<img src="image.jpg" alt="" class="grey-image"/>

CSS


.grey-image {
    filter: grayscale(1); /* Черно-белый фильтр для изображения */
    transition: 1s; /* Время изменения цвета изображения */
}
.grey-image:hover {
    filter: grayscale(0); /* Цветное изображение при наведении */
}

Свойство filter в браузере Internet Explorer не работает.

Круглое изображение CSS

Чтобы сделать круглое изображение с помощью CSS можно использовать свойство border-radius со значением 50%, можно поставить значение меньше, если на сайте такая задумка и просто сделать мягкие углы у изображения. Вы так же можете добавить к картинке рамку и тень, это придаст объем и картинка будет смотреться еще интереснее.

Пример

HTML


<img src="image.jpg" alt="" class="circle"/>

CSS


.circle {
    border-radius: 50%;  /* Скругление углов изображения */
    border: 5px solid #fff; /* Цвет и ширину рамки */
    box-shadow: 2px 1px 5px #999999; /* Цвет и размер тени */
}

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

Обтекание картинки текстом CSS /HTML

Обтекание картинки текстом CSS помогает удобно разместить материал на страницах сайта. Для этого используется свойство float и margin. Значение left выравнивает изображение по левому краю, right — по правому и соотвественно текст красиво обтекает вокруг свободных сторон картинки.

Пример

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan. Suspendisse potenti. Donec imperdiet consequat orci, id imperdiet elit faucibus quis.

HTML


<p><img src="image1.jpg" alt="" class="left-img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan.</p>
<p><img src="image2.jpg" alt="" class="right-img">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eleifend cursus leo, at fringilla dui mollis non. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus tortor massa, consectetur quis commodo quis, ullamcorper sed augue. Mauris eu efficitur turpis. Aliquam erat volutpat. Nullam commodo dui eu sagittis condimentum. Donec magna lorem, placerat aliquam ipsum a, egestas ornare urna. Donec dapibus luctus aliquet. Cras at est et arcu aliquam pharetra ac eu magna. Fusce vel eros sed massa tincidunt iaculis at nec lacus. Duis malesuada, magna vitae sollicitudin euismod, orci sem mollis risus, at suscipit tellus lorem ut nibh. In hac habitasse platea dictumst. Nunc laoreet nisi vitae lorem efficitur venenatis. Pellentesque consectetur lorem et vestibulum accumsan.</p>

CSS


.left-img {
    float:left; /* Выравниваем по левому краю */
    margin: 10px 10px 10px 0; /* Настраиваем отступы вокруг картинки */
}
.right-img  {
    float: right; /* Выравниваем по правому краю  */ 
    margin: 10px 0 10px 10px; /* Настраиваем отступы вокруг картинки */
}