<MyRusakov.ru />

Вёрстка сайта с нуля

Вёрстка сайта с нуля

Это уникальная информация по созданию страниц любой сложности. Вы узнаете всё, что нужно по HTML и CSS, а также увидите множество примеров по вёрстке страниц. А также почти к каждому уроку идут упражнения для закрепления материала, поэтому в отличном результате можете быть уверены! Пройдя данный курс, Вы сможете верстать страницы с любым по сложности дизайном. Помимо курса, Вы получите Бонус, который расскажет, как заработать на вёрстке сайтов.

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

Подробнее
Подписка

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Верстка прозрачной формы входа

Верстка прозрачной формы входа

Представьте, что вы начинающий верстальщик и перед вами стоит задача сверстать прозрачную форму входа на фоне изображения. Дизайнеры часто используют такие комбинации на сайтах с авторизацией, поэтому неплохо было бы знать как это делается.

Прозрачная форма из реального макета:

Верстка прозрачной формы входа.

HTML код

<section>
  <h2>Вход на сайт</h2>
  <form>
    <div>
      <input type="text" name="" required="">
      <label>Логин</label>
    </div>
    <div>
      <input type="password" name="" required="">
      <label>Пароль</label>
    </div>
  <input type="Submit" name="" value="Вход">
  </form>
</section>

Я не присваивал тегам никаких классов, так как мы имеем дело только с фрагментом сайта и можем себе это позволить. При верстки целого сайта, без классов не обойтись.

Верстка прозрачной формы входа.

Делать HTML разметку, одно сплошное удовольствие - это как разминка перед стартом, чего не скажешь про CSS. Надо много поработать, чтобы получить такую красоту.

CSS код формы входа

Для всех элементов пропишем свойство:

* {
    box-sizing: border-box;
}

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

В качестве фона для всей секции будет большая фотография, которая займет собой все пространство - cover и не будет повторяться - no-repeat.

body {
    background: url(https://cdn.pixabay.com/photo/2017/06/12/17/54/anemone-2396299_1280.jpg);
    background-repeat: no-repeat;
    background-size: cover;
}

Прозрачный бокс (section)для формы входа

Эта строчка задает черный цвет фона формы (0,0,0) и степень прозрачности, значение (.6) делает ее полупрозрачной.

section {
    background: rgba( 0,0,0,.6);

Закругляем углы у бокса

border-radius: 5px;
Размеры ширины бокса - width и полей - padding берем из макета.

width: 400px;
padding: 40px;

Код ниже отвечает за местонахождение бокса относительно окна браузера. В нашем случае бокс позиционирован точно по центру.

position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);

На данном этапе форма имеет такой вид.

Верстка прозрачной формы входа.

Стилизуем заголовок (h2)

Цвет, размер, название шрифта, необходимые отступы, определяются по PSD макету, ставит заголовок по центру свойство - text-align: center.

section h2 {
     color: #fff;
     font-family: 'Caveat', sans-serif;
     font-size: 30px;
     margin: 0 0 30px;
     padding: 0;
     text-align: center;
}

Стилизуем поля ввода (input)

Позиционирует два блока div относительно родителя section.

section div {
    position: relative;
}

В макете поля ввода нарисованы не типично, мы видим простые две линии, как в школьной тетрадке. Эти линии - нижнии рамки белого цвета и прозрачный фон у input-ов. Остальным рамкам выставлен border: none.

section div input {
    background: transparent;
    border: none;
    border-bottom: 1px solid #fff;
}

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

outline: none;

Метки полей ввода (label)

Код ниже ставит их в нужное место согласно макету.

section div label {
    position: absolute;
    top: 0;
    left: 0;
}

Псевдоэлементы :focus и :valid

При вводе в форму пользователя логина и пароля, метки (login, password) будут мешаться. Поэтому в момент, когда input будет в фокусе, метки сдвинутся вверх.

section div input:focus ~ label,
section div input:valid ~ label {
    left: 0;
    top: -22px;
}

Верстка прозрачной формы входа.

На jsfiddle вы можете посмотреть код последнего элемента прозрачной формы - кнопки входа, а так же весь код целиком.

"В моём видеокурсе" вы увидите реальный пример адаптивной верстки по макету.

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (1):

aleksey_krepostnov aleksey_krepostnov 12.06.2018 14:16:45

у меня с прозрачностью rgba(0,0,0,.6) по чему-то не срабатывало, получилось только с полным значением 0.6, т.е. (0,0,0,0.6), а в остальном спасибо за урок очень познавательно.

Ответить

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.