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

Оцените материал
(0 голосов)

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

 

Проблема

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

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


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

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

И на десерт посмотрите как круто ездить на мотоцикле:

Прочитано 651 раз Последнее изменение Воскресенье, 15 января 2017 16:09
Другие материалы в этой категории:
Понравилась запись? Подпишитесь на обновления по почте:

Нетология

TemplateMonster

geekbrains.ru/

Поиск по сайту

Google+