Улучшаем границы изображения с помощью CSS

Когда мы используем границу для изображения, мы хотим чтобы результат выглядел более привлекательным. Это, как известно, позволяет отделить картинку от другого контента на странице. Рассмотрим способы отрисовки границы.

Без использования границы:
Без бордера

Используя границу:
Используем бордер

С “Двойной границей“:
Двойной бордер

То что вы видите можно просто сделать в графических редкторах, таких как Photoshop, ImageReady или FireWorks. Но давайте подумаем что надо будет сделать, если, например, вам нужно поменять границу изображения, которое уже использовалось на сайте, а в связи со сменой дизайна надо её поменять. Вам надо будет открыть каждую картинку в редакторе и поменять бордер. Если у вас на сайте всего 3-4 изображения, то это займёт несколько минут, а если у вас их 100?

Вы можете добиться такого же эффекта очень просто с помощью CSS. И вам понадобится всего несколько секунд чтобы поменять все границы на сайте.

Как мы это сделаем?

Самый простой бордер:

img { border : 1px solid #021a40; }

“Двойной бордер”:

img { padding : 1px; border : 1px solid #021a40; }

Двойной бордер, подсвеченный цветом:

img { padding : 1px; border : 1px solid #021a40; background-color : #ff0; }

Другие плюсы этой техники.

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

Опубликовано: 21.11.2009 Просмотров 18526 Ссылка на оригинал Tweet it!
3 comments  

Илья

2010.12.21 14:01

 В чем последний плюс?
 

basilkot

2010.12.21 14:07

  • в том что размытости нет. граница получается чёткая.

bearkid

2011.04.18 13:40

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

Роман

2013.04.03 23:14

 С картинками спасибо понял. А как сделать что бы виджеты запаковать в границы
 

Оставить после себя комментарий

user

2016.09.11

Отправить сообщение:

Email

Сообщение

Бонус на первый депозит в слоте Грейт Пигсби Мегавейс дарит тебе онлайн казино Вавада! Переходи по ссылке и получай 100 бесплатных вращений на депозит до 1000$!