Для css картинки: background-image | htmlbook.ru

Пример:

Используемые изображения:

Можно использовать не только квадратные картинки, но и овальные:

Картинки из примера:

При этом border-radius не влияет на border-image, так что круглые картинки для рамки — единственный способ сделать округлую рамку.

Главное требование — симметричность изображений.

Рамка с изображением полность резиновая, и может быть добавлена объекту любого размера.

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

Или откройте этот пример в отдельном окне.

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

Картинка:

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

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png") 25% round;

Результат:

Для border обязательно нужно задать толщину и стиль рамки. Цвет — опционально, но рамку именно такого цвета увидят пользователи, браузеры которых не поддерживают

Для border-image обязательно задавать изображение (border-image-source), размер угловой части (border-image-slice) и повторение картинки (border-image-repeat).

Заданная картинка режется вот по такой схеме:

Желтым выделены угловые части, размер которых задается свойством border-image-slice, зеленым — заполняющие.

Рассмотрим отдельные свойства border-image.

Border-image-source

Возможные значения: none или <image>

Теоретически, можно задавать и градиенты, но они работают в Хроме/Сафари и не работают в FF. С их помощью можно было бы делать резиновые тени неправильной формы, вот такие, например (смотреть в Хроме). С градиентами можно делать и более странные варианты, причем узоры сами заботятся о своей пропорциональности. Примеры ниже на момент написания статьи работают только в Хроме и Сафари.

Upd: В Firefox работают начиная с 29-й версии.

Размер картинки равен толщине рамки. Цвет и стиль рамки игнорируются.

Если задать только border-image-source, картинка заполнит собой уголки, не зная что ей делать дальше:

border: 80px solid transparent;
border-image: url("//img-fotki. yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_XL.png");

Border-image-slice

Важное свойство, которое определяет размер куска изображения, которое заполнит углы рамки. Остальные части будут использованы для заполнения пространства между углами по алгоритму, заданному в border-image-repeat.

Возможные значения:

<проценты> — рассчитываются относительно размера изображения. Горизонтальные относительно ширины, вертикальные — относительно высоты.

<числа> — пиксели (для растрового изображения) или координаты (для векторного). Единицы измерения не указываются.

fill — ключевое слово, дополняющее предыдущие значения. Если оно задано, изображение не обрезается внутренним краем рамки, а заполняет также область внутри рамки. Очень полезно для округлых рамок.

Чтобы определить значения для каждой стороны, несколько значений можно задать через пробел.

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

border: 80px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;

Border-image-repeat

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

Возможные значения:

stretch — растягивает заполняющий участок картинки. Значение по умолчанию;

repeat — повторяет заполняющий участок, при этом видны места стыков с угловой картинкой;

round — заполняет промежуток между углами. Может быть заметен стык в середине стороны. Самое аккуратное действие.

space — действует похоже на repeat. Разницы не обнаружила.

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

border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 100;
border-image-repeat: repeat;

Слева repeat, справа round.

Если рамка сложная и стороны плохо стыкуются между собой, stretch сработает корректнее:

Border-image-width

border-image-width

Свойство управляет шириной видимой части рамки, масштабирует её. Если это значение больше ширины border-width, картинка рамки заползет под содержимое, даже если не заданно свойство fill.

Возможные значения:

<длина> — значения в px или em;

<%> — значения в процентах относительно размера изображения;

<числа> — числовое значение, на которое умножается border-width

auto — ключевое слово. Если оно задано, значение равно соответственному border-image-slice. Если подходящего размера нет, используется значение border-width, при этом картинка заполняет весь угол рамки, заползая под контент. Немного странно работает.

border: 60px solid transparent;
border-image: url("//img-fotki. yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 80;
border-image-repeat: round;
border-image-width: 160px;

Справа рамка с border-image-width. На примере слева видно, как картинка обрезалась внутренними краями рамки. Правая рамка засчет увеличенной ширины заползла под контент.

Border-image-outset

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

Возможные значения:

<длина> — значения в px или em;

<числа> — числовое значение, на которое умножается border-width.

border: 60px solid transparent;
border-image: url("//img-fotki.yandex.ru/get/6730/5091629.9a/0_7eb4e_e27786d4_L.png");
border-image-slice: 120;
border-image-repeat: round;
border-image-outset: 60px 10px 50px 120px;

Справа пример с border-image-outset. Это свойство не влияет на размеры элемента, а рамка может перекрывать соседние элементы:

border-image — довольно сложное, но очень интересное свойство. Мне очень нравится идея использовать его вместо традиционного способа сделать графическую рамку для резиновых элементов. Примеры в посте несколько диковаты, но я уверена, что свойство можно применять более изящно, а от его возможностей просто захватывает дух : )

Например, Вадим Макеев предложил с помощью border-image делать тень сложной формы для блока, размеры которого могут быть заранее неизвестны.

Приготовьте подходящую картинку и посмотрите как border-image легко справится с задачей с помощью всего лишь пары строчек кода:

Можно менять размеры блока и добавлять в него сколько угодно текста — тень будет растянется вслед за ним.

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

Изображения рамок нагуглены по запросу «рамки». Картинка с джедаями — фотожаба.

4 симпатичных CSS-эффекта для изображений

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

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

Полароид

Демо: на Tinkerbin.

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

Правда, мне этот эффект очень не нравится, но мне кажется, что вы сможете придумать ему достойное применение.

HTML

Для этого эффекта применим к div-у класс «polaroid». А внутрь его поместим изображение и текст. Я буду использовать изображение 200px на 200px (это важно).

<div>
 <p>Сара, Дек ’02</p>
 <img src=»/200/200/people/1. jpg» />
</div>

Обратите внимание, в демо-примере выше, мы использовали пользовательский рукописный шрифт. Этот шрифт называется Kaushan. Чтобы использовать его, добавьте этот фрагмент кода между тегами head на вашей HTML-странице.

<link href=’http://fonts.googleapis.com/css?family=Kaushan+Script’ rel=’stylesheet’ type=’text/css’>

CSS

Теперь перейдем к  CSS. Для класса polaroid, мы установим position: relative и ширину 220px. Относительное позиционирование здесь важно, потому что мы будем использовать абсолютное позиционирование для текста.

Далее, мы будем создавать границы для эффект полароида. Вместо того, чтобы применять стили к каждой границе до отдельности, мы установим единую границу 10px вокруг изображения, а затем переопределим стили для нижней. В нижней части граница толще, чем остальные, нам нужно установить ширину границы 45px. Я также применил box-shadow.

.polaroid {
 position: relative;
 width: 220px;
}
 
. polaroid img {
 border: 10px solid #fff;
 border-bottom: 45px solid #fff;
 -webkit-box-shadow: 3px 3px 3px #777;
 -moz-box-shadow: 3px 3px 3px #777;
 box-shadow: 3px 3px 3px #777;
}
 
.polaroid p {
 position: absolute;
 text-align: center;
 width: 100%;
 bottom: 0px;
 font: 400 18px/1 ‘Kaushan Script’, cursive;
 color: #888;
}

Множественная рамка

Демо-пример: на Tinkerbin.

Есть несколько способов, с помощью которых можно сделать множественную рамку на CSS. Один из самых простых и самых популярных способов выполнения данного трюка в том, чтобы использовать box-shadow с разными установками.

HTML

HTML-код очень прост для этого примера. На самом деле, div здесь не обязателен. Если вы используете только одно изображение, вы можете отказаться от обертки и применять класс прямо к изображению.

<div>
 <img src=»/400/200/nature/1.jpg» />
</div>

Как работает тень

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

box-shadow: inset x y blur spread color;

Inset создает внутреннюю тень (мы будем использовать это позже), х устанавливает горизонтальное смещение, у задает вертикальное смещение, blur определяет, насколько размытая будет тень и spread, как далеко тень будет распространяться. Тень, которую мы использовали в предыдущем примере выглядит следующим образом:

box-shadow: 3px 3px 3px #777;

Этот код устанавливает offsets и blur равным 3px и цвет #777, распространение не определено. Теперь давайте начнем работать с нашим примером:

.multiple-borders {
 box-shadow: 0px 0px 0px 7px #000;
}

Как видите, у нас не установлено смещение и нет размытия, а spread равен семи пикселям. В результате, тень выглядит так же, как черная рамка шириной семь пикселей.

Чтобы добавить вторую тень, все что нужно сделать — это вставить запятую, а затем повторить те же параметры, только изменив немного значения. На этот раз я установил первый spread равный 5px (черный), а второй — равный 10px (белый).

.multiple-borders {
 box-shadow: 0px 0px 0px 5px #000, 0px 0px 0px 10px #fff;
}

Результат должен выглядеть как две рамки по 5px, одна черная и одна белая.

CSS

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

.multiple-borders {
 -webkit-box-shadow:
 0px 0px 0px 2px rgba(0,0,0,0.6),
 0px 0px 0px 14px #fff,
 0px 0px 0px 18px rgba(0,0,0,0.2),
 6px 6px 8px 17px #555;
 
 -moz-box-shadow:
 0px 0px 0px 2px rgba(0,0,0,0.6),
 0px 0px 0px 14px #fff,
 0px 0px 0px 18px rgba(0,0,0,0.2),
 6px 6px 8px 17px #555;
 
 box-shadow:
 0px 0px 0px 2px rgba(0,0,0,0.6),
 0px 0px 0px 14px #fff,
 0px 0px 0px 18px rgba(0,0,0,0.2),
 6px 6px 8px 17px #555;
}

Виньетка

Демо-пример: на Tinkerbin.

На этот раз мы собираемся использовать другой тип box-shadow, чтобы создать очень необычный эффект. Используя параметр «inset» для тени, мы можем создать такой красивый эффект а-ля Photoshop, как виньетка, используя только CSS.

HTML

На этот раз нам нужен пустой div. При желании можно разместить текст внутри, но изображение должно быть вставлено с помощью CSS. Потому что внутренняя тень будет появляться под содержанием вставленным в HTML-код, а это означает, что изображение будет скрывать её полностью.

<div>
</div>

CSS

В CSS нам нужно установить изображение как фон, а затем определить ширину и высоту div-a. После этого настало время применить тени. Обратите внимание, что в значении inset установлено как вертикальное, так и горизонтальное смещение равным 0.

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

. vignette {
 background: url(«/400/200/nature/5.jpg»);
 width: 400px; height: 200px;
 -webkit-box-shadow:
 inset 0 0 50px #000,
 inset 0 0 50px #000,
 inset 0 0 50px #000;
 
 -moz-box-shadow:
 inset 0 0 50px #000,
 inset 0 0 50px #000,
 inset 0 0 50px #000;
 
 box-shadow:
 inset 0 0 50px #000,
 inset 0 0 50px #000,
 inset 0 0 50px #000;
}

Гранж-эффект для фотографии

Демо-пример: на Tinkerbin.

Для начала вам необходимо создать прозрачное шероховатое фоновое изображение. Я использовал эту текстуру для создания этого изображения. Хитрость тут в том, чтобы сделать текстуру точного того же цвета как фон страницы, на которую вы будете помещать её.

HTML

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

<div>
</div>

CSS

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

body {
 background: #867d79;
}
 
.grunge {
 background: url(«http://lorempixum.com/400/200/technics/4»);
 width: 400px; height: 200px;
 margin: 50px;
 -webkit-box-shadow: inset 0 0 20px black;
 -moz-box-shadow: inset 0 0 20px black;
 box-shadow: inset 0 0 20px black;
}
 
.grunge:hover {
 background: url(«/imagetreatments-texture3.png»), url(«/400/200/technics/4.jpg»);
}

Заключение

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

Перевод статьи с designshack.net

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

Создание картинок.

Создание картинок

С помощью картинок можно украсить форму. Их можно использовать в качестве кнопок. Для задания кнопки-картинки указываем type=»image». При этом необходимо задать атрибут src. Его значение – адрес картинки на сервере.

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

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

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

Значения атрибута align:

• left – по левому краю;

• right – по правому краю;

• top – выравнивание верхней границы картинки по самому высокому элементу строки;

• texttop – выравнивание верхней границы картинки по самому высокому элементу текста;

• middle – середина изображения выравнивается по базовой линии строки;

• absmiddle – середина изображения выравнивается по середине строки;

• baseline – выравнивание нижней границы изображения по базовой линии строки;

• bottom – выравнивание нижней границы изображения по окружающему тексту.

В листинге 6.13 представлен пример создания кнопок-картинок, которые предварительно нарисованы в графическом редакторе. Для них задано выравнивание и альтернативный текст.

Листинг 6.13. Создание графических кнопок

<html>

<head>

<title>Конструирование форм</title>

</head>

<body>

<form action=»test.php» enctype=»multipart/form-data» method=»post» name= «test» target=»_blank»>

<input name=»submit» type=»image» src=»Send.jpg» alt=»Нажмите, чтобы отправить» align=»left» border=»5″ /><input name=»reset» type=»image» src= «Clear.jpg» alt=»Нажмите для очистки формы» align=»right» />

</form>

</body>

</html>

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

Рис. 6.7. Графические кнопки

Нарисованные кнопки оживят вид вашей формы.

Данный текст является ознакомительным фрагментом.

Хранение картинок в css с помощью base64

Почитать можно тут: http://habrahabr.ru/post/116538/

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

Пример с картинкой base64:

Код картинки base64:

<img alt="" src="data:image/png;base64,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" />

Отзывчивые изображения: CSS-приёмы, которые помогают экономить время | by Nikita | WebbDEV

Если вы занимаетесь веб-разработкой, то высока вероятность того, что вам знакомы два чудовища, о которых пойдёт речь в статье. Речь идёт об изображениях и о дедлайнах. Иногда, по каким-то причинам, картинки никак не хотят помещаться в те места макетов страниц, которые для них предназначены, а вы не можете потратить несколько часов на то, чтобы с этим разобраться.

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

Пятница. Пять часов вечера. Вам надо срочно доделать некую страницу. Всё готово, проблема лишь в картинках, которые никак не помещаются туда, где им положено быть. Если это случилось с вами — вот одно волшебное средство, которое вас выручит:

Выглядит знакомо? Мы все это делали когда-то. Не наводил ли вас это на мысли о мошенничестве?

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

Что если я скажу, что свойство object-fit применимо к элементам <img>? Оно, кстати, работает и с видео.

Вот и всё. Обратите внимание на то, что свойству object-fit можно назначить значение contain.

О поддержке object-fit

К несчастью, object-fit не будет работать в IE и в старых версиях Safari, однако, для таких случаев имеется полифилл.

Вот сведения о поддержке этой возможности, взятые отсюда.

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

Заключается он в том, что изображение нужно поместить в родительский элемент, свойство positionкоторого установлено в значение relative, а свойство padding задано в процентном выражении. В результате изображение займёт всю свободную область родительского элемента. Выглядит это так:

Тут вы можете подумать о том, что это слишком сложно. Однако, после того как вы поймёте смысл этого приёма, вы осознаете, что он очень прост и удобен. К тому же, этот приём широко используется, например, в Netflix.

Тут для управления размерами изображения используется свойство height: auto, и, кроме того, свойство max-width. Вполне возможно, что вам этот приём уже знаком:

Такой подход применим в большинстве случаев, тогда, когда ваш макет не слишком сложен.

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

Знаете ли вы о том, что в современных браузерах можно менять источник изображения в зависимости от ширины страницы? Именно для этого существует атрибут srcset.

Подобные атрибуты можно использовать в теге HTML 5 . В том случае, если браузер эту технологию не поддерживает, здесь предусмотрен запасной вариант с использованием тега <img>:

• Если ваше изображение не является частью содержимого страницы — используйте background-image.
• Если поддержка IE вас не интересует — воспользуйтесь object-fit.
• Техника с применением контейнера со специально настроенным свойством padding, используемая Netflix, работает везде.
• В большинстве случаев для решения проблемы с картинками достаточно использовать в CSS свойство height: auto;
• Если вы стремитесь сократить время загрузки страниц, используйте атрибут srcset для загрузки изображений меньших размеров на мобильных устройствах.

Надеемся, рассмотренные здесь подходы к работе с изображениями вам пригодятся.

Перевод статьи Time-saving CSS techniques to create responsive images

Использование CSS для включения декоративных изображений

Пример 1.

Таблица стилей для веб-страницы определяет фоновое изображение для целая страница.

 …
  <тип стиля="текст/CSS">
    body { background: #ffe url('/images/home-bg.jpg') repeat; }
  

<тело>
...
 

Пример 2. Фоновое изображение с CSS для ролловеров изображений

Таблица стилей для веб-страницы использует фон CSS свойство для создания декоративных эффектов ролловера, когда пользователь наводит курсор указатель мыши над ссылкой.

 a:hover { background: #ffe url('/images/hover.gif') repeat; цвет: #000;
  текстовое оформление: нет;
} 

Пример 3. Фоновые изображения с помощью CSS для создания закругленных углов вкладки или другие элементы

Набор стилей для веб-страницы использует фон CSS свойство для создания закругленных углов на элементах.

 …
  <тип стиля="текст/CSS">
    div#Комментарии { ширина:600px; }
    разд.aComment { background: url('images/middle.gif') repeat-y left top;
    поле: 0 0 30px 0; }
    div.aComment blockquote { background: url('images/top.gif') no-repeat left top;
    маржа: 0; отступ: 8px 16px; }
    div.aComment div.submitter { background:#fff url('images/bottom.gif') no-repeat left top;
    маржа: 0; заполнение сверху: 30px; }
  

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