Содержание

Видео курс HTML и CSS. Работа с изображениями

Здравствуйте, уважаемые слушатели. Меня зовут Александр Петрик. Я сотрудник компании CyberBionicSystematics. И мы с вами продолжаем цикл лекций по языку HTML.

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

Язык HTML мы рассматриваем в контексте его тегов. Сейчас мы посмотрим на такой тег, как <img>. Данный тег предназначен для вставки изображений в разметку. Тег не имеет текстового содержимого и, соответственно, не имеет закрывающегося тега.

Посмотрим на следующие атрибуты тега. Атрибут Src. Это источник, откуда будет подгружаться наше изображение.

Следующий атрибут – это атрибут Alt. Он указывает альтернативный текст. Т.е. если наше изображение не будет отображаться, то будет отображаться данный альтернативный текст вместо него.

Атрибут Title. Задает всплывающую подсказку. При наведении курсора на наше изображение, будет появляться всплывающее окошко с подсказкой.

Следующие два атрибута – Width и height. Ими можно задать ширину и высоту изображения.

Следующий атрибут – Align – указывает положение изображения. В предыдущем уроке мы с помощью него успешно выравнивали текст.

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

Формат jpeg был специально создан для хранения изображений. Недостатком формата является низкое качество изображения. Если цветовые переходы очень резкие, то будут высокие потери качества.

Формат png характеризуется очень высокое качество. Из недостатков – большой размер.

Формат gif. Он способен хранить сжатые данные без потери качества.

Посмотрим на атрибуты подсказки — Alt и Title. Вот приведена строка с тегом img. После атрибута alt ставим =, кавычки, а в кавычках текст. Если картинка не будет отображаться, вместо нее в нашем случае будет отображен текст deleted. Атрибут title. Мы ему присваиваем значение self-portrait. Это значит, что когда мы наведем курсор на наше изображение, будет отображаться фраза self-portrait. Рекомендуется использовать всегда оба выше сказанные атрибуты. Это удобно для пользователей, а также для поисковых систем.

Посмотрим на примеры. Первый пример показывает использование img. Здесь использованы атрибуты src, alt title. Запустим и посмотрим, что выйдет. В окне мы видим слово deleted. Это потому, что я убрал 4 из названия рисунка и браузер не находит измененного названия в указанной папке источника изображения.

Следующий пример показывает нам различное использования атрибута src. В первой строке у нас используется изображение из папки, во второй – изображение из ресурса сети. Запустим. Видите, у нас тут еще появилась анимация. Это потому, что в третьей строке мы используем картинку в формате .gif.

Обратите внимание на 18 строку. В имени файла я опять убрал цифру 4. Т.е. теперь ничего подключаться не будет из локального источника.

Запустим. А теперь попробуем запустить другой браузер. Теперь у нас здесь появилась надпись. Давайте попробуем написать delete. Запустим и посмотрим. Да, у нас вывелась запись delete. Попробуем запустить этот код в браузере FireFox. Запустим, теперь у нас показывает delete без обрамляющего прямоугольника. Что показывает этот пример? Что один и тот же тег по-разному работает в разных браузерах.

Посмотрим на то, как можно изменить размер изображения. Для этого существуют два атрибута – width и hight.

Давайте посмотрим на примере, как можно использовать данные атрибуты. Задаем ширину, высоту и т.д. На 18й и 20й строках указываем другой размер.

Запустим. Размеры разные.

Посмотрим на атрибут align. Посмотрим, как с его помощью можно выравнивать изображения. Bottom – выравнивание по нижней границе, middle – по середине, top – по верхнему краю.

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

Посмотрим следующий пример. В 16й строке у нас атрибуту align присвоено значение left, а в 30й – right. Посмотрим, что у нас получилось. Как видим, наши рисунки выровнены по краям и обтекаются текстом.

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

Посмотрим теперь, как задать фон для нашей страницы. Для этого используется атрибут bgcolor. Следующий метод – это использование атрибута style и его свойства background-color.

Третий вариант – использование свойства background-image в атрибуте style. Здесь мы обязательно указываем url и в скобках имя нашего изображения.

Поговорим о свойстве background-repeat. У этого свойства есть 3 параметра: no-repeat – наше изображение будет вставлено один раз вверху страницы; repeat-x – рисунок будет повторен определенное количество раз до конца строки по оси х; repeat-y – по оси ординат.

Поговорим, как можно изменить размер изображения фона. Для этого используются свойства cover и contain. Обратим внимание по последнюю строку. Она демонстрирует, что можно указать конкретные показатели размера в пикселях.

В данном примере задаем синий цвет фона.

Смотрим дальше. Тут мы использует атрибут style и присваиваем bgcolor = “Blue”, background-color = “Yellow”. Запустим и видим, что background-color является приоритетной.

Перейдем к следующему примеру. Здесь мы хотим задать в качестве фона уже не цвет, а какую-то картинку.

Запустим и посмотрим, что выйдет. Сам по себе рисунок маленький. Т.е. по умолчанию произошло его дублирование.

Посмотрим на 4й пример. Мы можем использовать не только стили для фона, а и атрибут background. В данном случае мы используем его вместе с background-repeat, так как не хотим, чтобы наш фон повторялся.

Запустим пример и посмотрим.

Посмотрим дальше. Здесь мы используем свойство repeat-x.

Посмотрим следующий пример, где указываем свойство repeat-у.

Посмотрим еще пример. Он очень важный. В 14 строке тегу body мы присваиваем атрибут style. Здесь мы используем свойство contain. Запустим и посмотрим, что выйдет. Здесь мы видим, что браузер как-бы взял и растянул его по направлению сверху-вниз, а ширину он не трогал.

Теперь 14 строку мы закомментируем, а 13ю розкомментируем и посмотрим, как работает параметр cover.

Давайте посмотрим. Ctrl+F5. Вот, обратите внимание, наш рисунок полностью был помещен в окно браузера. Он растягивает наш рисунок во всех направлениях.

Посмотрим последний наш пример. Мы видим, что логотип был размещен в качестве фона, но с поправкой количества пикселей.

Посмотрим последнюю тему: создание карты изображения. Допустим, у вас есть задание, согласно которому пользователь, кликая по определенной области на карте, перейдет на официальный сайт данного региона. Посмотрим, как это можно сделать.

Рассмотрим основные шаги при создании карты изображения. Для начала нужно пометить изображение атрибутом usemap, далее создать тег <map> </map>. Следует также указать тег <area />. Если мы создаем карту Украины, то в данном теге мы прописываем области нашей страны. Shape задает границы области. Особенности задания координат области посмотрим на примере. Alt и title имеют одни и те же функции, только alt используется в более старых браузерах.

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

Посмотрим теперь на примерах использование карт. Здесь мы используем такой тег, как map. В нем мы задаем два таких атрибута как name и id. В 26й строке мы создаем области. Первая область будет ссылаться на саму себя. Указываем координаты и альтернативный текст. На 27й строке мы используем такую фигуру, как прямоугольник. Запустим. Наводим мышкой, появляется всплывающая подсказка.

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

Глянем еще раз на наш код.

Давайте посмотрим на следующий пример. Здесь показано, как мы можем использовать другие фигуры для отображения карт. На 16 строке мы также никуда не будем переходить. На 17 строке все то же самое, но мы задаем область круглую, на 18й – многоугольник.

Посмотрим на дизайн нашей страницы. Поиграемся с радиусом и сторонами многоугольника.

Последний пример. Рассмотрим применение навыков создания карт на практике. Вот эта область – деревья, вот дорога и вот лужайка. Рассмотрим построчно, что у нас здесь есть. Здесь мы задаем цвет нашего фона. Здесь выравнивание нашего текста по центру. На 11 й строке указываем ширину рисунка и указываем, что рисунок будет картой изображения.

На 15й строке начинаем создавать области. Первая – прямоугольная. Следующая – тоже прямоугольная. Далее. У нас круглая область. Вот она. Следующая – многоугольник. Деревья – тоже многоугольник. Последняя область – газон. Так выделяются области. Каждой из областей мы можем задать какую-то ссылку. На этом урок закончен. Всего доброго. До свиданья.

CSS работа с изображениями

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

Использование тега

img

Тег img — стандартный способ добавления изображений на сайт.

Тег снабжен атрибутами:

  • src — путь к изображению
  • alt — текстовое описание изображения, показывается, когда сайт по каким-либо причинам не отображает контент.

Для масштабирования используются стандартные css свойства: width и height.

Пример:


.example_image {
  width: 300px;
  height: 200px;
}

<img src="/media/blog/example_image_1.jpg" alt="Изображение в теге img">

Использование фонового изображения

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

div, span, a. Далее в дело вступают css свойства background и background-size. Background указывает путь к изображению и задает базовые правила его вывода, а background-size описывает способ отображения фона. Выше показанный пример можно отобразить подобным способом (красная рамка для выделения контейнера).

Пример:


.example_image_1 {
  width: 300px;
  height: 200px;
  background: url(/media/blog/example_image_1.jpg) center no-repeat;
}

 

Свойство center выравнивает фон по горизонтали и по вертикали, а no-repeat запрещает повторение изображения.

Но зачастую изображение отличается по размеру и пропорциям от контейнера, а его необходимо растянуть по всей его площади. Для этого используют background-size с параметром cover.

Пример:

 

Со свойством background-size: cover:


.
 
 example_image_2 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: cover;
}

 

Если необходимо чтобы изображение занимало максимальную площадь контейнера, но при это не обрезалось используется background-size с параметром contain.

Пример:

 

Со свойством background-size: contain:


.example_image_3 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_3.jpg) center no-repeat; 
  background-size: contain;
}

 

Также с помощью background-size можно задавать конкретный размер изображения.

Пример:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4. svg) center no-repeat; 
  background-size: 131px 112px; 
}

 

Еще можно добавить фоновый цвет контейнеру.

Пример:


.example_image_4 { 
  width: 300px; 
  height: 200px; 
  background: url(/media/blog/example_image_4.svg) center no-repeat ##1f1f1f; 
  background-size: 131px 112px; 
}

 

Искусство обработки изображений в CSS | Ян Чжоу | TechToFreedom

Искусство обработки изображений в CSS | Ян Чжоу | ТехТоСвобода | Medium

Mastodon

Сделайте ваш сайт снова впечатляющим Unsplash

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

Когда дело доходит до обработки изображений, вы можете подумать, что это работа бэкэнд-разработчиков, и они будут использовать OpenCV или другие модули и алгоритмы компьютерного зрения для обработки изображений. Это справедливо для некоторых профессиональных задач. Но иногда нам не нужно все усложнять. В некоторых случаях только CSS достаточно мощен, чтобы предоставить пользователям некоторые визуальные конфеты.

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

Существует специальное значение свойства CSS position — «липкое». Обычно он используется для того, чтобы панель навигации веб-сайта всегда оставалась в верхней части веб-сайта. Но он также может создавать эффект наложения при прокрутке нескольких изображений:

Эффекты наложения изображений

Как показано выше, все, что нам нужно сделать, это установить «липкую» позицию для каждого div , после чего эффект наложения сработает.

Это одно из основных требований обработки изображений. Теоретически мы можем заставить одно изображение принимать любую форму, какую захотим. Например, теперь у нас есть прямоугольное изображение с именем «dog.jpeg», как показано ниже:

Исходное изображение

По сути, мы можем добавить свойство border-radius , чтобы превратить его в эллипс:

 img{border-radius:50%}

Автор Ян Чжоу ers

·Редактор для

Full-Stack Engineer 🥷| Top Writer🏆

Еще от Ян Чжоу и TechToFreedom

Ян Чжоу

в

9 невероятных трюков с Python, которые сделают ваш код более элегантным

Pythonic — это синоним элегантного

·5 мин чтения·13 ноября 2022 г. 05

Делайте больше, используя меньше кода

· Чтение за 11 минут·30 марта

Ян Чжоу

в

8 уровней использования подсказок типов в Python

9000 3

Чтобы сделать ваши программы более читабельными и простыми в отладке

·6 мин чтения·7 декабря 2022 г.

Yang Zhou

in

10 замечательных советов по ООП Python, которые значительно оптимизируют ваш код читать·18 декабря 2022 г.

59 Git — это мощный инструмент, который приятно использовать, когда вы знаете, как его использовать.

·4 минуты чтения·15 ноября 2022 г.

Яри Румер

в

Как я избавился от прокрастинации (с помощью нейронауки)

90 059 Держите эту часть мозга в оптимальном состоянии, если хотите перестать прокрастинировать.

·6 минут чтения·22 июня

Списки

General Coding Knowledge

20 историй·99 сохранений

Никогда не поздно и не рано начинать что-то

13 историй·37 сохранений с

Кодирование и разработка

11 историй·61 сохранение

Истории, которые помогут вам расти как разработчику программного обеспечения

19 историй·189 сохранений

Дневники кодирования

из

9000 2

Почему опытные программисты не проходят собеседования по написанию кода

Один мой друг недавно присоединился к компании FAANG в качестве технического менеджера и оказался в положении рекрутера для…

·5 мин чтения·2 ноября 2022 г.

Лав Шарма

в

Схема проектирования системы: Полное руководство

Разработка надежной, масштабируемой и эффективной системы может быть непростой задачей. Тем не менее, понимание ключевых концепций и компонентов может сделать…

·9 мин чтения·20 апреля

Thomas Smith

in

Новая визуальная функция Google Bard меняет правила игры

Чат-боты могут официально увидеть мир

·Чтение через 6 мин·Jul 13

inVerita

in

Django или Laravel: что выбрать в 2023 году

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

· 11 минут чтения · 8 февраля

См. дополнительные рекомендации

Изображений

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

Адаптивные изображения

Используйте классы .max-w-full и .h-auto , чтобы создать изображение отзывчивое.

            
      <изображение
        src="https://tecdn.b-cdn.net/img/new/slides/041.jpg"
       
        alt="..." />

Привет 👋 мы хотим сделать Tailwind Elements общественный проект. Это с открытым исходным кодом и бесплатно , и мы хотели бы, чтобы так и оставалось. Если вам это нравится, помогите проекту развиваться, поделившись им со своими коллегами. Каждая акция на счету , спасибо!

Поделиться через Dev.to Поделиться через Twitter Поделиться через Facebook Поделиться через Pinterest Поделиться через Reddit Поделиться через StumbleUpon Поделиться через Вконтакте Поделиться через Weibo Поделиться через HackerNews Поделиться через Gmail Поделиться по электронной почте

Миниатюры

Используйте класс .

border , чтобы придать изображению закругленную границу в 1 пиксель. появление.

            
      <изображение
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.jpg"
       
        alt="..." />

Тени

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

            
      <изображение
        src="https://tecdn.b-cdn.net/img/new/standard/city/042.jpg"
       
        альт="" />

Тень при наведении

Используйте класс .transition-shadow

для элемента, чтобы применить тень эффект наведения.

            
      <изображение
        src="https://tecdn.b-cdn.net/img/new/standard/city/041.webp"
       
        альт="" />

Формы

Изменить форму изображения.

No related posts.