Содержание

Как добавить рамку к изображению при наведении?

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img. Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { border: 3px solid #65994C; /* Параметры рамки */ border-radius: 10px; /* Радиус скругления */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

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

Рис. 1. Изображение с рамкой

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

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

Свойство border заменяем на свойство outline, которое обладает схожим поведением, но не оказывает влияния на размеры (пример 2).

Пример 2. Свойство outline

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img:hover { outline: 3px solid #65994C; /* Параметры рамки */ } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

Учтите, что outline всегда выводит прямоугольную рамку, поскольку не поддерживает border-radius.

Прозрачная рамка

Устранить сдвиг картинки поможет прозрачная рамка то же толщины, что указана в border. Картинки предварительно выводим с прозрачной рамкой, а уже в :hover меняем у этой рамки цвет (пример 3). Тогда при наведении на изображение никаких смещений уже не будет. Для прозрачного цвета используем значение transparent, а цвет рамки меняется с помощью свойства border-color.

Пример 3. Прозрачная рамка

<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Рамка</title> <style> img { border: 3px solid transparent; /* Прозрачная рамка */ } img:hover { border-color: #65994C; /* Цвет рамки */ border-radius: 10px; } </style> </head> <body> <img src=»image/3.png» alt=»»> <img src=»image/7.png» alt=»»> <img src=»image/ace.png» alt=»»> </body> </html>

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

Рис. 2. Изображение с рамкой

Автор и редакторы

Автор: Влад Мержевич

Последнее изменение: 25.09.2018

Редакторы: Влад Мержевич

Рамка при наведении css

Рамка вокруг изображений делается с помощью свойства border, которое добавляется к селектору img . Чтобы рамка появлялась только при наведении курсора мыши на картинку, следует воспользоваться псевдоклассом :hover, как показано в примере 1.

Пример 1. Добавление рамки

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

Рис. 1. Изображение с рамкой

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

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

Свойство border заменяем на свойство outline, которое обладает схожим поведением, но не оказывает влияния на размеры (пример 2).

Пример 2. Свойство outline

Учтите, что outline всегда выводит прямоугольную рамку, поскольку не поддерживает border-radius.

Прозрачная рамка

Устранить сдвиг картинки поможет прозрачная рамка то же толщины, что указана в border . Картинки предварительно выводим с прозрачной рамкой, а уже в :hover меняем у этой рамки цвет (пример 3). Тогда при наведении на изображение никаких смещений уже не будет. Для прозрачного цвета используем значение transparent , а цвет рамки меняется с помощью свойства border-color.

Пример 3. Прозрачная рамка

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

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 54acff71ae80971e • Your IP : 91.146.8.87 • Performance & security by Cloudflare

Internet Explorer Chrome Opera Safari Firefox Android iOS
4.0+ 7.0+ 1.0+ 4.0+ 1.0+ 1.0+ 1.0+ 1.0+

Задача

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

Решение

За изменение стиля элемента при наведении на него указателя мыши отвечает псевдокласс :hover . Для управления стилем ссылок этот псевдокласс добавляется к селектору A .

Также псевдокласс :hover допускается применять аналогичным способом к изображениям, но в браузере Internet Explorer версии 6.0 и ниже этот подход работать не будет. Все потому, что эта версия Internet Explorer понимает :hover только для ссылок. Поэтому для начала рассмотрим универсальный метод, работающий во всех браузерах.

Пример 1. Изменение цвета рамки

HTML5 CSS 2.1 IE Cr Op Sa Fx

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

Рис. 1. Вид рамки до и после наведения курсора на изображение

Если хочется сделать изменение цвета рамки без применения ссылок, то свойство border допустимо применить непосредственно к селектору img , при этом в браузере Internet Explorer до версии 6.0 код работать не будет (пример 2).

Пример 2. Изменение параметра рамки вокруг изображения

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

заливка и обводка • Про CSS

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

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

В качестве заливки и обводки можно задавать none, цвета, ключевые слова (currentColor и transparent), а также градиенты и паттерны.

fill

Заливка элемента.

Возможные значения: none, ключевые слова, цвета, паттерны и градиенты. Значение по умолчанию — black.

<svg>
  <defs>
    <symbol>
      <rect/>
    </symbol>
    <linearGradient
      x1="0%" y1="0%"
      x2="0%" y2="90%"
    >
      <stop offset="0%" stop-color="yellowgreen" />
      <stop offset="90%" stop-color="green" />
    </linearGradient>
  </defs>

  <use xlink:href="#s-rect"
    x="20" y="20"
    fill="hsla(348, 83%, 47%,.3)"/> 
  <use xlink:href="#s-rect"
    x="110" y="20"
    fill="rgb(255, 215, 0)"/> 
  <use xlink:href="#s-rect"
    x="20" y="110"
    fill="url(#g-green)"/> 
  <use xlink:href="#s-rect"
    x="110" y="110"
    fill="skyblue"/> 
</svg>

fill-rule

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

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

fill-rule="nonzero" интересно ведет себя для фигур из двух путей. Например, если внешний круг нарисован по часовой стрелке, а внутренний в обратном направлении, центральный круг останется без заливки (слева). Если же оба круга нарисованы в одном направлении — фигура зальется полностью (справа):

fill-opacity

Управление прозрачностью заливки. Можно задавать значения от 0.0 до 1.0 или в процентах. Правда, Firefox не любит значения в процентах для градиентов (пруфлинк, смотреть в FF).


<use xlink:href="#s-rect"
  x="20" y="20"
  fill="url(#g-red)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="50" y="50"
  fill="hsl(50, 100%, 50%)" fill-opacity=".5"/>
<use xlink:href="#s-rect"
  x="80" y="80"
  fill="url(#g-green)" fill-opacity=".5"/>

stroke

Цвет обводки. Значения по умолчанию нет.

<svg>
  <rect x="20" y="20"
    fill="none"
    stroke="yellowgreen"/>
</svg>

stroke-width

Толщина обводки, можно задавать в единицах длины или в процентах. Значение по умолчанию: 1.

<svg>
  <rect x="50" y="50"
    fill="none" stroke="gold"
    stroke-width="10"/>
  <rect x="20" y="20"
    fill="none" stroke="yellowgreen"
    stroke-width="10%"/>
</svg>

stroke-linecap

Свойство определяет как будут выглядеть концы линий. Возможные значения: butt, round

, square. Значение по умолчанию: butt.


  <use xlink:href="#s-path" stroke="orangered" y="20"
    stroke-linecap="butt"/>

  <use xlink:href="#s-path" stroke="olivedrab" y="85"
    stroke-linecap="round"/>

  <use xlink:href="#s-path" stroke="steelblue" y="150"
    stroke-linecap="square"/>

stroke-linejoin

Определяет как будут выглядеть соединения линий на углах. Возможные значения: miter, round, bevel. Значение по умолчанию: miter.


  <use xlink:href="#s-corner" stroke="orangered" y="0"
    stroke-linejoin="miter"/>

  <use xlink:href="#s-corner" stroke="olivedrab" y="80"
    stroke-linejoin="round"/>

  <use xlink:href="#s-corner" stroke="steelblue" y="160"
    stroke-linejoin="bevel"/>

stroke-dasharray

Управляет видом пунктирной обводки. Можно задавать в единицах длины или в процентах. Если задано одно значение, второе значение считается равным первому. Например, stroke-dasharray="1" нарисует линию из отрезков длиной одну единицу разделенных пробелами такой же ширины.

Примеры разных пунктирных линий:

<svg>
  <path d="M 20 20 h 260"
    stroke="purple" stroke-width="1"
    stroke-dasharray="1" />
  <path d="M 20 40 h 260"
    stroke="mediumspringgreen" stroke-width="15"
    stroke-dasharray="1 3" />
  <path d="M 20 60 h 260"
    stroke="orangered" stroke-width="1"
    stroke-dasharray="5%" />
  <path d="M 20 80 h 260"
    stroke="green" stroke-width="1"
    stroke-dasharray="1 5" />
  <path d="M 20 100 h 260"
    stroke="steelblue" stroke-width="1"
    stroke-dasharray="2 7 6" />
  <path d="M 20 120 h 260"
    stroke="orange" stroke-width="5"
    stroke-dasharray="5" />
  <path d="M 20 140 h 260"
    stroke="mediumseagreen" stroke-width="1"
    stroke-dasharray="12% 5%" />
</svg>

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

Также stroke-dasharray интересно сочетается с анимацией:

stroke-dashoffset

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

В этом примере оранжевые и желтые линии смещены относительно красной с помощью разных значений stroke-dashoffset:

<svg>
  <g fill="none"
    stroke-width="15"
    stroke-dasharray="25% 110%"
    transform="rotate(72 135 135)">
    <circle r="115" cx="135" cy="135"
      stroke="crimson"/> 
    <circle r="115" cx="135" cy="135"
      stroke="orangered"
      stroke-dashoffset="25%"/> 
    <circle r="115" cx="135" cy="135"
      stroke="gold"
      stroke-dashoffset="50%"/> 
  </g>
</svg>

Сочетая stroke-dashoffset и stroke-dasharray можно получить интересные эффекты.

Для полноценного просмотра воспользуйтесь браузерами на Webkit. Ссылка на полную версию.

Для перезапуска нажмите Rerun.

Несколько вдохновляющих ссылок про анимацию на stroke-dashoffset:

stroke-opacity

Прозрачность обводки. Задаются значения от 0.0 до 1.0.

<svg>
  <g fill="none"
    stroke-width="15">
    <circle r="40" cx="60" cy="60"
      stroke="crimson"
      stroke-opacity=".7"/>
    <circle r="55" cx="100" cy="100"
      stroke="orangered"
      stroke-opacity=".5" />
    <circle r="40" cx="140" cy="140"
      stroke="gold"
      stroke-opacity=".25"/>
  </g>
</svg>

Анимация обводки позволяет получить совершенно удивительные вещи. Правда, я в своих примерах использовала CSS (и это демо не играет в Firefox) и SVG-анимацию, которая работает таки везде, но задается странно, длинно и неудобно. Думаю, что оптимальнее всего для анимации SVG использовать JavaScript-библиотеки.

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


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

Свойство border-image | CSS справочник

CSS свойства

Определение и применение

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


В настоящее время браузер Chrome не отображает изображение-границу если у элемента не задано свойство border.

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


Поддержка браузерами

CSS синтаксис:

border-image:"source slice / width / outset / repeat | initial | inherit";

/* Обратите внимание, что если вы добавляете в одно объявление свойства width или outset, то обязательно надо указывать слэш после slice и после этого значения. */
border-image:"url(ramka.png) 350 1-4 value + fill / 10px 1-4 value / 7px 1-4 value/ round 1-2 value";

JavaScript синтаксис:

object.style.borderImage = "url(border.png) 50 stretch"

Значения свойства

Версия CSS

CSS3

Наследуется

Нет.

Анимируемое

Нет.

Пример использования

<!DOCTYPE html>
<html>
<head>
	<title>Использование изображения в качестве границы</title>
<style> 
div {
width : 150px; /* устанавливаем ширину блока */
height : 50px; /* устанавливаем высоту блока */
padding : 50px; /* устанавливаем величину внутреннего отступа элемента */
border : 55px solid transparent; /* прозрачная сплошная граница размером 55px */
border-image : url(ramka.png) 100 round; /* указываем путь к изображению, устанавливаем смещение 100px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<div class = "test">Ваш текст</div>
	</body>
</html>

В этом примере мы используем изображение 800 на 687, которое мы установили в качестве изображения рамки. Кроме того, установили смещение 100px от верхней, правой, нижней и левой кромки изображения и указали, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.

Результат нашего примера:

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

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

<!DOCTYPE html>
<html>
<head>
<title>Изображение-граница на CSS</title>
<style> 
div {
display : inline-block; /* устанавливаем элементы <div> как блочно-строчные (выстраиваем в линейку) */
width : 150px; /* устанавливаем ширину блока */
height : 70px; /* устанавливаем высоту блока */
border : 10px solid transparent; /* прозрачная сплошная граница размером 10px для все элементов <div> */
margin-right : 20px; /* устанавливаем отступ справа 20px */
}
.test {
border-image : repeating-linear-gradient( 45deg, red, red 1%, yellow 1%, red 8%) 10; /* устанавливаем повторяющийся линейный градиент, который будет использован в качестве границы-изображения */
}
.test2 {
border-image : linear-gradient(to right, pink , green) 10;; /* устанавливаем линейный градиент, который будет использован в качестве границы-изображения  */
}
.test3 {
border-image : radial-gradient(yellow 50%, green 65%, red 100%) 10; /* устанавливаем круговой градиент, который будет использован в качестве границы-изображения  */
}
.test4 {
border-image : url(img-border.png) 25 stretch; /* указываем путь к изображению, устанавливаем смещение 25px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение будет растянуто на всю длину.  */
}
.test5 {
border-image : url(img-border.png) 15 round; /* указываем путь к изображению, устанавливаем смещение 15px от верхней, правой, нижней и левой кромки изображения, указываем, что изображение масштабируемо и должно повторяться, пока не заполнит зазор между двумя границами.  */
}
</style>
</head>
	<body>
		<p><b>Использование градиентов:</b></p>
		<div class = "test"></div>
		<div class = "test2"></div>
		<div class = "test3"></div>
		<p><b>Использование изображения:</b></p>
		<img src = "img-border.png" alt = "ramka">
		<div class = "test4"></div>
		<div class = "test5"></div>
	</body>
</html>

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

Результат нашего примера:

Пример использования свойства border-image.CSS свойства

Размеры и отступы блоков html

Модель контейнера

В соответствии со спецификацией CSS, свойства width и height устанавливают размер не контейнера, а области содержимого.

По сути, мы имеем дело с ЧЕТЫРЬМЯ(!) контейнерами, где содержимое является так называемым «ядром» (core content area) и помещается еще в 3 контейнера.

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

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

padding — внутренний отступ | внутренняя полоска | подложка.
Обрамляет содержимое, отделяя его от границ контейнера. Заливается цветом фона вместе с содержимым.

border — рамка. Имеет цвет, толщину и стиль используемых линий. Чаще используются в декоративных целях.

margin — внешний отступ | внешняя полоска | поле.
Прозрачная полоска за пределами рамки. Используется для задания промежутков между элементами страницы.

Добавление padding, border, margin не изменяет размеры области содержимого, но изменяет общий размер контейнера.

Вычисляем ширину контейнера:

width + 2 *(padding + border + margin) = 100+2*(20+2+30) = 204px

Высота вычисляется аналогично и, в нашем случае, равна ширине.

Свойство box-sizing CSS3

Это свойство появилось в спецификации CSS3 и поддерживается всеми современными браузерами. Позволяет включить отступы контейнера в заданную ширину! Может принимать 2 значения:

box-sizing: content-box — все так как было описано выше, width и height включают в себя только область содержимого.

box-sizing: border-box — указанный размер контейнера включает в себя все отступы и рамки.

Свойства padding и border

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

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

/* класс для контейнера div */
div.my_container{
width: 520px ; /* ширина области содержимого*/
padding: 5px 10px 20px 30px; /* подложка: сверху-справа-снизу-слева */
border: 2px solid #999; /* рамка – толщина сплошная цвет */
background: ##EFF8F8; /* цвет фона*/
}
/* для содержащегося в классе параграфа p */
div.my_container p {
padding: 4px 8px; /* подложка – сверху/снизу-справа/слева */
border: 3px solid #565; /* рамка */
background: #FDFCE5; /* цвет фона */
}

Вывод кода Html

<div>
    <p>Так как высота не задана явно ...</p>
</div>
Свойство margin

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

Слияние внешних отступов

Поля первого блока:
верхнее, нижнее — 30px
правое, левое — 20px

Ширина и высота блока, а так же рамка в данном примере значения не имеют.

Второй блок окружен полями — 50px;
Все достаточно просто, визуально разница в отступе от левого края хорошо заметна. Интерес представляет расстояние между блоками …

Логично было бы предположить, что расстояние между блоками, нижнее поле одного из которых равно 30px, а верхнее поле другого 50px, будет равно сумме этих полей, т.е. 80px. Но это не так. Смежные вертикальные полоски сливаются, принимая ширину большей из них. В нашем случае зазор между блоками будет 50px. Это очень полезное правило, позволяющее убирать не нужные вертикальные зазоры между абзацами, например.
По горизонтали поля не сливаются.

Сейчас мы более подробно остановимся на этом очень важном для понимания моменте — слияние смежных полей.

<!-- html-код со встроенными стилями -->
 
<div>
  <p>
      Cлияние смежных вертикальных полей родительского и дочернего элементов.
  </p>
</div>

Из вышеприведенного примера видно, что нижнее поле блока div, равное 15px, и верхнее поле блока p — 20px «схлопнулись» и дали результирующее поле размером 20px. При этом горизонтальные поля остались на месте. (в браузере IE6 — нет …)

А теперь, если родительскому блоку div добавить рамку border:1px solid #111, или внутренний отступ padding:5px, верхнее и нижнее поля вернутся на место!

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

Так же сливаются верхние и нижние вертикальные поля пустого элемента, а если пустых элементов несколько и они расположены друг над другом, то все их вертикальные внешние полоски сольются в одну!

Отрицательный margin

Для свойства margin можно задавать отрицательные значения. Их можно использовать для наслоения элементов друг на друга.

Еще отрицательные значения иногда используют для сокрытия элемента. Задав достаточно большой отрицательный отступ, например -2000px, мы смещаем элемент за пределы страницы, т.е. делаем его невидимым.

Фотошоп для верстальщика | Типичный верстальщик

Данная статья посвящается всем тем, кто только-только взялся за изучение верстки макетов, и тем, кто пока плохо разбирается в Adobe Photoshop. Моя цель рассказать откуда брать данные из PSD-файлов и научить приёмам, которые будут полезны всем верстальщикам.

Как вырезать и сохранять картинки?

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

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

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

Во-вторых, в окне «Слои» в нужном слое нажать на правую кнопку мыши и выбрать пункт «Создать дубликат слоя…». В диалоговом окне «Дубликат слоя» выбрать в выпадающем списке пункт «Новый».

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

Далее в левой панели необходимо выбрать инструмент «Рамка». Весь документ затемнится, кроме нужной картинки.

Жмем Enter. Наша картинка готова.

Сохраняем ее в режиме web. Чтобы так сохранить в Photoshop CC надо нажать на Файл -> Экспортировать -> Сохранить для Web (старая версия). Для более ранних версий Photoshop можно было сохранить еще проще: Файл -> Сохранить для Web

Как правило, картинки сохраняют в JPEG и PNG-24.

Сохранение SVG картинок в Photophop

Чтобы сохранить картинку в формате SVG, достаточно кликнуть правой кнопкой мыши и кликнуть на «Экспортировать как…»

Далее появится диалоговое окно, в котором необходимо установить Формат SVG и нажать на «Экспортировать все». Важно, чтобы картинка в документе была одна.

Информация о font-family, font-size, line-height, color

Чтобы найти данные по этим трем компонентам, достаточно дважды кликнуть на слой с текстом, чтобы он стал активным. Как правило, информацию о font-family и font-size можно найти в верхней панели, а данные о line-height в окне «Символ». Обычно он располагается в правой части, но если его пока там нет, достаточно открыть его через Окно -> Символ.

Информация о margin и padding

Чтобы узнать сколько пикселей необходимо задать для отступа, достаточно включить Инструмент «Прямоугольная область» и потянуть курсор вниз (или влево), чтобы посмотреть расстояние в пикселях.

Этот метод я использую, как правило, чтобы узнать о высоте или ширине определенного элемента. Но для того, чтобы соблюсти pixel-perfect всего макета, обычно я использую расширение для Chrome с одноименным названием PerfectPixel. Чтобы его установить, нажмите здесь.

Информация об opacity

Довольно часто веб-дизайнеры делают элементы прозрачными. В css за это отвечает свойство opacity. К счастью, в Photoshop можно увидеть процент непрозрачности. Для этого достаточно кликнуть на слой, в котором применяется прозрачность и посмотреть в верхний правый угол окна «Слои». На скриншоте видно, что прямоугольный элемент имеет прозрачность в 90%. Следовательно, в css следует записать следующее: opacity: 0.9

Горячие клавиши Photoshop для верстака

В процессе верстки я применяю «горячие клавиши», которые значительно ускоряют работу в Photoshop. Список актуален для всех версий:

Ctrl + «-« — уменьшить масштаб

Ctrl + «+» — увеличить масштаб

Ctrl + «1» — масштаб 100%

Ctrl + J — создать дубликат слоя

Ctrl + [ — уменьшить размер кисти

Ctrl + ] — увеличить размер кисти

Ctrl + Alt + Z — шаг назад (отмена действия)

Ctrl + Shift + Z — шаг вперед (вернуть назад отменённое действие)

Ctrl + Alt + I — диалоговое окно «Размер изображения»

 

P.S. Скриншоты, приводимые в статье сделаны в программе Photoshop CC.

Тема оказалась довольно объемной и уместить все в рамках одной статьи — сложно. Но я для вас подготовила видеоролик, в котором я все подробно объясняю:

border-color — CSS: Каскадные таблицы стилей

Свойство CSS border-color устанавливает цвет границы элемента.

Это свойство является сокращением для следующих свойств CSS:

 
цвет границы: красный;


цвет границы: красный #f015ca;


цвет границы: красный rgb(240,30,50,.7) зеленый;


цвет границы: красный желтый зеленый синий;


цвет границы: наследовать;
цвет границы: начальный;
цвет границы: вернуться;
цвет границы: не установлен;
  

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

  • Когда указано одно значение , применяется один и тот же цвет ко всем четырем сторонам .
  • Когда указаны два значения , первый цвет применяется к верхнему и нижнему , второй — к левому и правому .
  • Когда указаны три значения , первый цвет применяется к верхнему , второй — к левому и правому , третий — к нижнему .
  • Когда указаны четыре значения , цвета применяются к верхнему , правому , нижнему и левому в указанном порядке (по часовой стрелке).

Значения

<цвет>

Определяет цвет границы.

 <цвет>{1,4} 

, где
<цвет> = | | | | | <шестнадцатеричный цвет> | <названный цвет> | текущий цвет |

, где
= rgb({3} [/]?) | rgb(<число>{3} [/<альфа-значение>]?) | rgb(<процент>#{3}, <альфа-значение>?) | rgb(<число>#{3}, <альфа-значение>?)
= rgba(<процент>{3} [/<альфа-значение>]?) | rgba(<число>{3} [/<альфа-значение>]?) | rgba(<процент>#{3}, <альфа-значение>?) | rgba(<число>#{3}, <альфа-значение>?)
= hsl(<оттенок> <процент> <процент> [/<альфа-значение>]?) | hsl( <оттенок>, <процент>, <процент>, <альфа-значение>?)
= hsla( <оттенок> <процент> <процент> [ / <альфа-значение> ]? ) | hsla( <оттенок>, <процент>, <процент>, <альфа-значение>? )
= hwb( [<оттенок> | нет] [<процент> | нет] [<процент> | нет ] [ / [<альфа-значение> | нет] ]? )

где
<альфа-значение> = <число> | <процент>
<оттенок> = <число> |

Полное использование цвета границы

HTML
  <дел>
  

border-color: red; эквивалентно

  • border-top-color: красный;
  • правый цвет границы: красный;
  • border-bottom-color: красный;
  • border-left-color: красный;
<дел>

border-color: gold red; эквивалентно

  • border-top-color: gold;
  • правый цвет границы: красный;
  • border-bottom-color: gold;
  • border-left-color: красный;
<дел>

border-color: красно-голубой золотой; эквивалентно

  • border-top-color: красный;
  • цвет правой границы: голубой;
  • border-bottom-color: gold;
  • цвет левой границы: голубой;