Как сделать рамку полупрозрачной

Как сделать рамку полупрозрачной

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

 

Проблема

Вам, вероятно, достаточно часто приходилось возиться с инструментами создания полупрозрачных цветов в CSS, такими как  rgba() и  hsla() (о цветах в CSS можно почитать здесь). В 2009 году, когда мы, наконец, получили возможность использовать их в своем дизайне, они произвели настоящий фурор — и это несмотря на необходимость продумывать пути отхода, разнообразные «костыли» и даже уродливые поделки с фильтрами в IE для самых отважных. Однако их применение в промышленных условиях
ограничивалось в основном фонами.

Существует три главные причины, почему так происходило: часть первых экспериментаторов не поняла, что эти новые цветовые форматы в действительности были обычными цветами, такими как  #ff0066 и  orange , и работала с ними как с изображениями, используя только для фонов; обходные пути было намного проще реализовать для фонов, чем для любых других свойств. Например, альтернативным решением для полупрозрачного  фона могло быть простое полупрозрачное изображение площадью в один пиксель. Для других свойств единственной альтернативой оставался сплошной цвет; применение их для других свойств, таких как рамки, зачастую оказывалось делом далеко не простым, и скоро мы узнаем почему.

Полупрозрачная рамка на CSS

 

24ways.org был одним из первых веб-сайтов, в дизайне которых еще в 2008 году
использовались настоящие полупрозрачные цвета, хоть и для фонов

Предположим, что мы хотим для оформления контейнера использовать белый фон и полупрозрачную белую рамку, сквозь которую будет просвечивать основной фон. Наша первая попытка, вероятно, будет выглядеть примерно так:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
Если у вас нет твердого понимания, как работают фоны и рамки, результат  может шокировать. Куда делась рамка? И если невозможно достичь эффекта полупрозрачной рамки, используя полупрозрачный цвет для рамки, то как это вообще сделать?

Читайте также  Как сделать фон в полоску

Как создать полупрозрачную рамку

 

Решение

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

Вариант полупрозрачной рамки

 

Это не играет особой роли, когда вы используете сплошные непрозрачные рамки, но в нашем примере способно полностью изменить дизайн. Вместо полупрозрачной белой рамки, сквозь которую просвечивает прелестная фоновая картинка, мы получили полупрозрачную белую рамку на непрозрачном белом фоне, которую не отличить от обычной белой рамки. В CSS 2.1 фон именно так и работал. Нам нужно было просто смириться и продолжать жить с этим. К счастью, с появлением стандарта Backgrounds & Borders Level 3 мы обрели возможность корректировать поведение фона в соответствии с насущными требованиями дизайна, применяя для этого свойство  background-clip. Его первоначальное значение равно  border-box , что означает, что фон обрезается по краю ограничивающей рамки. Если мы хотим, чтобы наш фон не растягивался под рамку, то для этого всего лишь нужно присвоить свойству значение  padding-box, которое приказывает браузеру обрезать фон по краю забивки:
border: 10px solid hsla(0,0%,100%,.5);
background: white;
background-clip: padding-box;

 

готовый вариант полупрозрачной рамки

ПОПРОБУЙТЕ САМИ!
http://play.csssecrets.io/translucent-borders

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: