Как сделать паспарту - «Изображения» » Самоучитель CSS
Меню
Наши новости
Учебник CSS

Невозможно отучить людей изучать самые ненужные предметы.

Введение в CSS
Преимущества стилей
Добавления стилей
Типы носителей
Базовый синтаксис
Значения стилевых свойств
Селекторы тегов
Классы
CSS3

Надо знать обо всем понемножку, но все о немногом.

Идентификаторы
Контекстные селекторы
Соседние селекторы
Дочерние селекторы
Селекторы атрибутов
Универсальный селектор
Псевдоклассы
Псевдоэлементы

Кто умеет, тот делает. Кто не умеет, тот учит. Кто не умеет учить - становится деканом. (Т. Мартин)

Группирование
Наследование
Каскадирование
Валидация
Идентификаторы и классы
Написание эффективного кода

Самоучитель CSS

Вёрстка
Изображения
Текст
Цвет
Линии и рамки
Углы
Списки
Ссылки
Дизайны сайтов
Формы
Таблицы
CSS3
HTML5

Новости

Блог для вебмастеров
Новости мира Интернет
Сайтостроение
Ремонт и советы
Все новости

Справочник CSS

Справочник от А до Я
HTML, CSS, JavaScript

Афоризмы

Афоризмы о учёбе
Статьи об афоризмах
Все Афоризмы

Видео Уроки


Видео уроки
  • 02 мая 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
Популярные статьи
  • 06 апреля 2025, 00:00
PlayStation 5 и Xbox Series X грозит подорожание на 40 % из-за новых пошлин США - «Новости сети»
Наш опрос
Помогли мы вам



Наши новости
      
      
  • 24 марта 2016, 17:40
Написание эффективного кода
  • 24 марта 2016, 16:20
Базовый синтаксис CSS
Разное и интересное
  • 02 мая 2024, 08:05
Скачивание Reels из Instagram*: новые возможности и преимущества для пользователей
  • 25 апреля 2024, 01:19
Скачать приложение Betera на Android
25-03-2016, 09:12
Как сделать паспарту - «Изображения»
Рейтинг:
Категория: Самоучитель CSS / Изображения
Internet Explorer Chrome Opera Safari Firefox Android iOS
8.0+ 1.0+ 6.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту.

 


Рис. 1. Пример паспарту

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

Применение padding и background

Самый быстрый метод получения результата состоит в добавлении к селектору IMG стилевых свойств padding и background. Свойство padding задаёт пространство вокруг картинки, а background заполняет это пространство желаемым цветом. В примере 1 показано, как использовать эти стилевые атрибуты совместно с тегом <thumb>.

Пример 1. Простой способ создания паспарту

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Паспарту</title>
  <style>
   .passe-partout {
    padding: 30px; /* Ширина паспарту */
    background: #f0f0f0; /* Цвет фона  паспарту */
    border: 2px solid #666; /* Параметры рамки */ 
   }
  </style>
 </head>
 <body>
  <p><thumb src="images/mufta.jpg" alt="Девочка с муфтой" class="passe-partout"></p>
 </body>
</html>

В данном примере вокруг фотографии добавляется паспарту серого цвета, а вокруг него устанавливается рамка толщиной два пиксела.

Плюсом приведенного метода является простота реализации, а также тот момент, что кроме тега <thumb> не требуется вводить дополнительные элементы. Достаточно для изображения указать введенный нами класс passe-partout и вокруг картинки автоматически появится паспарту. Минусы тоже имеются, так, нельзя добавить рамку вокруг самого изображения.

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

В том случае, когда рамка вокруг картинки должна быть обязательна, придется воспользоваться другим способом создания паспарту. При этом изображение помещается внутрь тега <figure>, и все желаемые стилевые свойства добавляются для него. Но здесь имеется одна особенность, чтобы браузеры корректно отображали паспарту, <figure> следует установить строчно-блочным элементом, как показано в примере 2. Браузер IE до версии 9.0 не понимает новые теги HTML5, поэтому для него добавляется скрипт, чтобы пример работал в старых версиях IE.

Пример 2. Усложнённый способ создания паспарту

HTML5CSS 2.1IECrOpSaFx

<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title>Паспарту</title>
  <style>
   .passe-partout {
    padding: 40px; /* Размер паспарту */
    background: #f0f0f0; /* Цвет фона паспарту */
    border: 2px solid #800000; /* Параметры рамки */
    display: inline-block; /* Строчно-блочный элемент */
    margin: 0; /* Убираем отступы */
   } 
   .passe-partout thumb {
    border: 2px solid #666; /* Рамка вокруг изображения */
   }
  </style>
  <!--[if lt IE 9]>
   <script>document.createElement('figure');</script>
  <![endif]-->
 </head>
 <body>
  <figure class="passe-partout">
   <thumb src="images/siberia.jpg" width="200" height="231" alt="Полярник">
  </figure>
 </body>
</html>

Результат данного примера показан на рис. 2.

 


 

Рис. 2. Паспарту с рамкой вокруг фотографии

Вокруг <figure> браузеры Chrome и Firefox добавляют автоматические отступы по 40 пикселов, чтобы наше паспарту смотрелось во всех браузерах одинаково, в примере добавлено свойство margin с нулевым значением.

Цитирование статьи, картинки - фото скриншот - Rambler News Service.
Иллюстрация к статье - Яндекс. Картинки.
Есть вопросы. Напишите нам.
Общие правила  поведения на сайте.

Internet Explorer Chrome Opera Safari Firefox Android iOS 8.0 1.0 6.0 1.0 1.0 1.0 1.0 Задача Сделать вокруг изображения паспарту, состоящее из рамки и цветной области. Решение Паспарту называется картонная рамка для фотографии или рисунка. Использование паспарту зрительно увеличивает изображение, привлекает к нему внимание и делает картину более эффектной. Конечно, на веб-странице нет нужды имитировать подобную рамку, поэтому паспарту в данном случае будем называть цветную прямоугольную область вокруг изображения. На рис. 1 продемонстрирована фотография с паспарту. Рис. 1. Пример паспарту Существует несколько способов получить желаемый результат, способы различаются подходом и, естественно, кодом. Применение padding и background Самый быстрый метод получения результата состоит в добавлении к селектору IMG стилевых свойств padding и background. Свойство padding задаёт пространство вокруг картинки, а background заполняет это пространство желаемым цветом. В примере 1 показано, как использовать эти стилевые атрибуты совместно с тегом . Пример 1. Простой способ создания паспарту HTML5 CSS 2.1 IE Cr Op Sa Fx В данном примере вокруг фотографии добавляется паспарту серого цвета, а вокруг него устанавливается рамка толщиной два пиксела. Плюсом приведенного метода является простота реализации, а также тот момент, что кроме тега не требуется вводить дополнительные элементы. Достаточно для изображения указать введенный нами класс passe-partout и вокруг картинки автоматически появится паспарту. Минусы тоже имеются, так, нельзя добавить рамку вокруг самого изображения. Использование width В том случае, когда рамка вокруг картинки должна быть обязательна, придется воспользоваться другим способом создания паспарту. При этом изображение помещается внутрь тега , и все желаемые стилевые свойства добавляются для него . Но здесь имеется одна особенность, чтобы браузеры корректно отображали паспарту, следует установить строчно-блочным элементом, как показано в примере 2. Браузер IE до версии 9.0 не понимает новые теги HTML5, поэтому для него добавляется скрипт, чтобы пример работал в старых версиях IE. Пример 2. Усложнённый способ создания паспарту HTML5 CSS 2.1 IE Cr Op Sa Fx Результат данного примера показан на рис. 2. Рис. 2. Паспарту с рамкой вокруг фотографии Вокруг браузеры Chrome и Firefox добавляют автоматические отступы по 40 пикселов, чтобы наше паспарту смотрелось во всех браузерах одинаково, в примере добавлено свойство margin с нулевым значением.
Просмотров: 2 848
Комментариев: 0:   25-03-2016, 09:12
Распечатать
Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь. Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

 
Еще новости по теме:


Другие новости по теме:
ДОБАВИТЬ БАННЕР