Оформление изображений CSS

В этой статье я покажу простые примеры оформления изображений при помощи HTML+CSS, которые вы сможете использовать у себя на сайте.

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

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

Если вы не знаете, как вставить изображение в html страницу, то напоминаю, что есть такой специальный тег IMG, с помощью которого мы и будем заниматься вставкой изображения в html. В одной из своих статей я уже говорил о том, как вставить изображение в html. Статья будет вам полезна!

Создайте 2 файла: index.html и style.css. Положите их в одну папку. Изображение положите туда же куда положили 2 файла, в туже самую папку. Убедитесь, что вы создали файл index.html в кодировке UTF-8, иначе содержимое страницы будет отображаться некорректно! Создать такой файл можно с помощью любого редактора кода, но я вам рекомендую редактор «Notepad++», о нем я говорил в одной из прошлых статей, о том, как создать сайт через блокнот.

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

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

HTML код изображения:

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

HTML код изображения:

Я добавил к основным атрибутам изображения атрибут CLASS с именем стилевого класса IMAGES. Имя стилевого класса вы можете указывать свое. Это, что касается файла HTML документа. Теперь перейдем к файлу, где у нас будет храниться набор со стилями. Этот файл называется STYLE.CSS.

Прежде, чем что-либо писать в файле со стилями, давайте посмотрим, что же у нас получилось на данный момент: Просмотреть пример.

Изображение вставилось успешно. Теперь нам необходимо поработать над его оформлением посредством CSS – каскадных таблиц стилей. Для начала предлагаю сделать стильную рамку у изображения. Вот код, который необходимо вставить в файл style.css:

CSS код оформления изображения:

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

  • border — граница
  • 1px – граница будет равна 1 пиксель со всех сторон (верх, право, низ, лево)
    solid – граница будет сплошная (прямая)
  • #ccc – цвет границы будет серым

Просмотреть пример.

Границу видно довольно плохо, и нет ни чего оформительского в том, что мы сейчас проделали. Я предлагаю добавить отступ границы от изображения. Тогда у нас будет вырисовываться картина:

CSS код оформления изображения:

padding – внутренний отступ

  • 5px – отступ от изображения будет по 5 пикселей (сверху, справа, снизу, слева)

Просмотреть пример.

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

Скачать файлы урока

P.S. Ну что, понравилась статья? Дальше будет только интереснее! Поэтому смело подписывайтесь на мои обновления блога и будьте в курсе происходящего! Вас ждут интересные и полезные статьи, конкурсы, опросы и много чего интересного! Также можете порекомендовать мои уроки своим друзьям в социальных сетях, кликнув по иконкам социальных сетей, чуть ниже этого сообщения.

Понравилась статья? Поделитесь с друзьями!

0


This Post Has Been Viewed 20 Times

Автор статьи: , дата публикации

Читайте также на моем блоге:

  • Зачем нужен хостинг для сайта
  • Какой хостинг выбрать: платный или бесплатный?
  • Как выбрать хороший хостинг для сайта
  • Выбираем дешевый и качественный хостинг!
  • Конструктор сайтов Юкоз — обзор возможностей
  • Ucoz — создать сайт стало проще!
  • Перед тем как создать блог или сайт
  • Секреты размещения сайта в интернете! Разбираемся, что к чему!
  • Научиться создавать сайты очень просто! Бесплатно! Самому! Сейчас!
  • Программы необходимые каждому блогеру
Читатели оставили 2 комментария к этой статье:
  • Garri, 02.02.2012 в 11:54

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

  • Кирилл10.04.2016 в 02:10

    Неплохо , но для моих сил не подойдет.

Добавить комментарий к этой статье:

(обязательно)

(не будет опубликовано, обязательно)

Вебсайт (если есть)

  • Получайте оповещения о выходе новых статей на Ваш E-mail. Для этого, введите Ваш E-mail и нажмите Enter.

  • Рубрики

  • Присоединяйся ко мне!

    Группа
    Вконтакте

    Канал на
    You Tube

    Я на
    Twitter