Меню
Спросить
*.{ }

Урок 8. Стилизация form.

7 декабря 2016
Урок 8. Стилизация form.

Всем привет, сегодня стилизуем тег form и его составляющие.

border

Но сначала изучим новое свойство border.
border - в простонародье "рамка", рамка вокруг элемента. Принимает три параметра, каждый из которых можно записать, как отдельное свойство, но не рекомендую этого делать, так как занимает больше места.

Первый параметр border
Первый параметр, который принимает свойство border - это border-width или ширина рамки. Указывается в пикселях.

  1. border:1px solid red;
  2. /*Можно записать как отдельное свойство*/
  3. border-width:2px;

Второй параметр border
Вторым параметром бордера является border-style или стиль рамки. Может быть разным.Например solid - сплошная рамка, dashed - пунктирная и тд.
Вот тебе все стильные рамки, попробуй все и подбери себе по душе =)
solid - сплошная,
dashed - пунктирная,
dotted - похожа на пунктир,
double - двойная,
groove,
ridge,
inset,
outset.

  1. border:1px solid red;
  2. /*Можно записать как отдельное свойство*/
  3. border-style:solid;

Третий параметр border
Ну а третий вовсе был дурак, конечно это не про третий параметр рамки.
Третий - border-color или цвет рамки

  1. border:1px solid red;
  2. /*Можно записать как отдельное свойство*/
  3. border-color:red;

Про рамку на сегодня все, вернемся к стилизации тега form.

Сама форма с классом forma, я изменил цвет фона и шрифта, так же добавил вокруг тень(box-shadow), скруглил углы(border-radius), сделал ширину в 400px, добавил два параметра свойству margin(0 auto), плюс к этому сверху 5%, задал внутренние отступы(padding), и изменил тип шрифта на Arial.

  1. .forma{
  2. background:#19b5fe;
  3. color:#2c3e50;
  4. width:400px;
  5. margin:0 auto;
  6. margin-top:5%;
  7. padding:10px 15px;
  8. border-radius:2px;
  9. box-shadow:0 0 10px black;
  10. font-family:Arial;
  11. }

Остальные свойства по традиции описывать подробно не буду. Те свойства, которые мы изучили вспомните и попробуйте самостоятельно прочесть код.
Один момент.
Я добавил супер-мега анимацию.
Добавим классу form_btn внешний отступ снизу(margin-bottom) в 5px;
При наведении, используя псевдокласс hover, мы обнуляем отступ снизу, но добавляем те же 5px, только в отступ сверху(margin-top). И все, наша анимация заработает.
Было

Тег form

Стало

Тег form

Заключение

Если хочешь узнать по подробнее, внизу есть видео, посмотри его)))
До следующего урока =)

Следующая статьяПредыдущая статья