Делаем рамки 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

Вот ее код:

<!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

Вот ее код:

<!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>

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

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