Как закруглить углы у картинки в html | Уроки HTML, CSS
Картинки, которые вы выкладываете в интернет, можно хорошо оформлять, например можно, закруглить у них углы, чтобы сделать более подходящими для вашего дизайна.
Вообще можно применять очень много эффектов к вашей картинке: например, их затемнять при наведении мышкой или наоборот делать более светлыми, а можно сделать чтобы они отбрасывали тень или вели себя как кнопка на которую ты нажимаешь – т.е. при наведении мышки на эту картинку, она например вдавливается.
На самом деле очень много разных эффектов можно применять. Здесь, в этом видео, мы рассмотрим как закруглить углы у картинок.
Сделать это можно следующим образом:
1) Через указание стиля тегу img:
[img src=““ alt=““ height=“400px“ style=“border-radius: 30px;“]
2) Через назначение класса тегу img:
[img src=““ alt=““ height=“400px“ class=“my_round“]
Тогда, сам класс должен быть указан в [head][/head] тегах:
[style]
.my_round {border-radius: 30px;}
[/style]
Вот полный пример страницы сайта:
[!DOCTYPE html]
[html lang=“en“]
[head]
[meta charset=“UTF-8“]
[title]картинка с закругленными углами[/title]
[style]
.my_round {border-radius: 30px;}
[/style]
[/head]
[body]
[img src=““ alt=““ height=“400px“ style=“border-radius: 30px;“]
[img src=““ alt=““ height=“400px“ class=“my_round“]
[/body]
[/html]
*** Внимание: Угловые скобки в описании нельзя разместить - поэтому вместо них использованы квадратные [ ] !!! ***
#html #картинка #закругление #углы #дизайн #design
Подписывайтесь на наш канал в YouTube:
Вступайте в нашу группу ВК:
Задавайте вопросы – постараюсь ответить 😊
Удачи в таких классных начинаниях!
1 view
141
40
2 months ago 00:10:55 1
СОЛЯНКА С ГРИБАМИ НА ЗИМУ В АВТОКЛАВЕ “ДОМАШНИЙ СТАНДАРТ“
2 months ago 00:11:31 1
Купила в семейном магазине самую дешёвую футболку и сразу же превратила её в стильную блузку
2 months ago 00:35:20 1
За гранью реальности: Путешествие души через зеркала Козырева - Зеркальная сеть России
2 months ago 00:20:29 1
Лучший смартфон до 15000 рублей. Tecno Pova 3. Полный обзор. Текно пова 3. Тест батареи. Тест камеры
2 months ago 00:04:52 1
Новый Мировой Порядок в чем его суть.
2 months ago 03:03:30 1
Современные техники и практики банного искусства. Круглый стол. 🌟29 июня 2024. МСК.
3 months ago 00:05:26 1
Голоса птиц Как поёт Пеночка весничка Phylloscopus trochilus