Прозрачная рамка на CSS
Добрый день уважаемые друзья, сегодня Вашему вниманию будет предложено рассмотреть реализацию прозрачной рамки на CSS. Данная задача решается довольно просто при помощи языка CSS3. Структура будет самой примитивной и состоять из блока, в котором будет находиться текст, а именно заголовок, для того чтобы нам не пришлось устанавливать размер шрифта для абзаца, если бы мы выбрали в качестве использования его. Давайте приступим:
<html>
<head>
<title>Прозрачная рамка</title>
<link rel="stylesheet" href="css/styles.css" type="text/css" />
</head>
<body>
<div class="border">
<h1>Прозрачная рамка</h1>
</div>
</body>
</html>
Теперь преобразуем все к нужному виду, и применим некоторые стили:
body {
background: #f00;
}
.border {
background-color: #fff;
background-clip: padding-box;
border: 15px solid rgba(0, 0, 0, 0.3);
border-radius: 30px;
margin: 20px auto;
padding: 10px;
text-align: center;
width: 220px;
}
Вот мы и завершили реализацию прозрачной рамки на CSS, осталось лишь прокомментировать данный код.
Задаем красный цвет фона для всего окна браузера, чтобы мы смогли в дальнейшем увидеть, что рамка действительно является прозрачной.
Для самого блока мы задаем белый фоновый цвет, рамку черного цвета, с прозрачностью в формате rgba, и указываем радиус закругления
углов у данной рамки.
При помощи свойства backround-clip, которое позволяет указывать, как будет выводиться наш фон, относительно границ элемента.
Указав значение padding-box, мы его можем растолковать как отображение фона внутри границ. И благодаря данному свойству, мы получаем наш результат.
Осталось лишь добавить, что также мы выравниваем наш блок по центру экрана с некоторыми отступами, текст размещаем по центру, задав при этом фиксированную
ширину для блока. В результате у Вас должно получиться следующее:
Вот мы и разобрались с данной темой, хотелось бы лишь одного, чтобы данная информация смогла быть для Вас полезной в дальнейшем. На этом я с Вами прощаюсь, до скорых встреч!
