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

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

Главная - CSS - Прозрачная рамка на CSS

Прозрачная рамка на 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, мы его можем растолковать как отображение фона внутри границ. И благодаря данному свойству, мы получаем наш результат.
Осталось лишь добавить, что также мы выравниваем наш блок по центру экрана с некоторыми отступами, текст размещаем по центру, задав при этом фиксированную ширину для блока. В результате у Вас должно получиться следующее:

ugolok

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

Методы alert, prompt, confirm в JavaScript Методы alert, prompt, confirm в JavaScript

И снова я приветствую Вас в очередной теме посвященной языку JavaScript, в которой мы разберем методы alert, prompt, confrim.

Конструкция switch-case в JavaScript Конструкция switch-case в JavaScript

Всем привет, сегодня мы рассмотрим с Вами конструкцию switch-case в языке JavaScript.

Всплывающая подсказка на CSS Всплывающая подсказка на CSS

Здравствуйте дорогие друзья, сегодня мы с Вами изучим еще одну тему посвященную языку CSS. И научимся реализовывать всплывающие подсказки на CSS.

Псевдокласс target в CSS Псевдокласс target в CSS

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

Как вставить видео с YouTube Как вставить видео с YouTube

Довольно часто Вы видите на различных ресурсах видео, которое хранится на сервисе youtube, но каким-то образом его можно воспроизвести на данном сайте. Об этом сегодня пойдет речь, и я расскажу Вам, как вставить видео с YouTube.

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

Лучшие статьи:



Вышивки крестом схемы открытка с

Графическая электрическая схема

Модель экономического роста схема

Как сделать рекламу с сервера

Турели из portal своими руками