Домой / Сайтостроение / Рамки CSS — Как сделать самому? Узнать прямо сейчас!

Рамки CSS — Как сделать самому? Узнать прямо сейчас!

рамки css
рамки css

Делаем рамки css для своего сайта самостоятельно!

Здравствуйте, уважаемые друзья и гости блога!


Сегодня продолжаем с вами знакомится с элементами сайтостроения и давайте научимся создавать рамки css. В прошлой своей статье я вам рассказал и показал, как создаются рамки html, но рамки css смотрятся более красивее и привлекательнее. Поэтому кто научился делать рамки html, тот и осилит создание рамки css. А я вам в этом помогу!

Давайте приступим ...

Как самому сделать рамки css для сайта?

Как я вам уже выше сказал, что рамки css намного красивее и практичнее, чем рамки html и вам никакого труда не составит создать такие рамки css самостоятельно, если Вы уже научились делать рамки html.

Что нам потребуется, чтобы сделать рамки css? Ничего заоблачного! Ваше желание и моя статья, в которой я вам все подробно объясню.

Как и в прошлом своем уроке, где мы с вами создавали рамки html, также и сейчас при создании рамки css мы с вами будем использовать, уже нам знакомое свойство «border», для которого будем задавать определенные, также знакомые нам, значения:

solid – сплошная рамка;

dashed – пунктирная рамка;

dotted – точечная рамка;

double – рамка двойной линией;

groove – рамка с тенью;

ridge — с рельефом;

И еще два новых для нас с вами сегодня значения — это:

widht – толщина рамки;

color – цвет рамки;

Все эти значения пишем в одну строку через пробел:

p{
  border: 2px solid #ffff00;
}

Затем нам нужно сделать отступы для рамки css. Это делается вот этими переменными:

padding – внутренний (отступ рамки от содержания);

margin — внешний (отступ рамки от внешних объектов);

Теперь давайте зададим направление для отступов, то есть сколько и откуда нужно отступить. Это мы с вами сможем сделать вот с помощью вот этих значений:

top – отступ сверху;

righnt – отступ cправа;

bottom – отступ снизу;

left – отступ слева;

И давайте все это запишем, вот так:

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px;
}

Если вам нужно разместить свой текст в середине рамки css, то нужно добавить вот такую вот конструкцию:

text-align: center;

Не бойтесь, может вам и сразу все это покажется очень сложным и запутанным, но далее Вы обязательно все поймете и я вам также приведу практические примеры, где все сразу станет ясно и понятно!

Теперь давайте зададим нашей рамке высоту и ширину. Это делается при помощи свойства "width". Вот пример:

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px;
  width: 400px;
}

И чтобы мы смогли разместить нашу рамку на своей странице сайта, нам с вами нужно значение «margin». Также можно расположить нашу рамку по центру страницы на сайте добавив к значению "margin" еще одно значение «auto». Вот пример:

p{
  border: 2px solid #ffff00;
  padding: 10px 20px 10px 20px;
  margin: 20px auto;
  width: 400px;
}

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

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

Первый пример:

первый пример рамки css
первый пример рамки css

Вот ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
      text-indent: 30px;
      border: 2px solid #FF0000;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 200px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Вот второй пример рамки css:

второй пример рамки css
второй пример рамки css

Вот ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      text-indent: 30px;
      border: 2px dashed #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Вот третий пример рамки из точек:

третий пример рамки
третий пример рамки

Это ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      text-indent: 30px;
      border: 3px dotted #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Это четвертый пример рамки с двойным обводом:

четвертый пример рамки
четвертый пример рамки

Вот это ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      text-indent: 30px;
      border: 5px double #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

А если применить значение «ridge», то вот какая рамка получится:

пятый пример рамки
пятый пример рамки

Вот ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      text-indent: 30px;
      border: 10px ridge #ff4f00;
      padding: 10px 20px 10px 20px;
      margin: 20px auto;
      width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Теперь давайте с вами сделаем закругленные края нашей рамки css с помощью вот этих вот значений «border-radius» и «box-shadow»:

рамка с круглыми краями
рамка с круглыми краями

Вот рамка с круглыми краями и ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      border-radius: 10px;
    box-shadow: 0 0 0 3px #ff4f00;
    text-indent: 30px;
    padding: 10px 20px 10px 20px;
    margin: 20px auto;
    width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Теперь давайте сделаем рамку с размытыми краями, это тоже выглядит довольно привлекательно, а сделать это легко, просто в значении «box-shadow» измените цифру на большее значение. И вот, что получится:

рамка с размытыми краями
рамка с размытыми краями

Вот ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      border-radius: 10px;
    box-shadow: 0 0 7px 3px #ff4f00;
    text-indent: 30px;
    padding: 10px 20px 10px 20px;
    margin: 20px auto;
    width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Теперь делаем рамку с разноцветными контурами, просто добавим в значение "box-shadow" несколько цветовых гамм:

разноцветная рамка
разноцветная рамка

Вот ее код:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #0000FF;
}
    p{
    text-align: center;
      border-radius: 10px;
  box-shadow: 0 0 0 3px #0000FF,
    0 0 0 7px #008000,
    0 0 0 10px #FF0000;
  text-indent: 30px;
  padding: 10px 20px 10px 20px;
  margin: 20px auto;
  width: 400px;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

А теперь апогей наших рамок на css — это круглая рамка. Делается также просто изменив значение «border-radius». Вот смотрите:

круглая рамка
круглая рамка

Вот и ее код здесь:

<!DOCTYPE html>
<html lang="ru">
    <head>
        <meta charset="utf-8" />
        <title>Первый пример рамки css</title>
  <style>
    body{
      border: 2px solid #FF0000;
}
    p{
    border-radius: 50%/50%;
  box-shadow: 0 0 0 3px #0000FF,
        0 0 0 7px #00FFFF,
        0 0 0 10px #FF0000;
  padding: 40px;
  margin: 20px auto;
  width: 130px;
  height: 130px;
  text-align: center;
}
  </style>
</head>
<body>
  <p> Наши рамки css!
  </p>
</body>
</html>

Ну вот и все на сегодня. До новых встреч!

Если вам понравился материал пожалуйста сделайте следующее…

  1. Поставьте «лайк».
  1. Сделайте ретвит.
  1. Поделитесь этим постом с друзьями в социальных сетях.
  1. И конечно же, оставьте свой комментарий ниже 🙂

Спасибо за внимание!

Всегда ваш Валерий Бородин



Про Валерий Бородин

Проверьте также

создание лендинг

Создание Лендинг Пейдж или лучшие плагины WordPress!

Создание Лендинг Пейдж (Landing Page) какие плагины использовать на WordPress? Узнай сейчас! Здравствуйте, уважаемые друзья …

  • http://info-kibersant.ru Андрей Зимин

    Интересный набор рамок, спасибо за объяснения. Думаю, воспользуюсь!

    • https://pribylwm.ru/ Валерий Бородин

      Спасибо вам Андрей, что заходите!

Блог Валерия Бородина: LiveInternet число посетителей за сегодня Блог Валерия Бородина: данные за сегодня (Yandex.Metrika) Блог Валерия Бородина: рейтинг МайлРу