<MyRusakov.ru />

Создание крупного проекта на Java с нуля

Создание крупного проекта на Java с нуля

Данный курс научит Вас создавать крупные проекты на Java грамотно и быстро. В курсе Вы увидите создание большой и сложной программы на Java абсолютно с нуля.

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

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

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

Подписавшись по 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), а в остальном спасибо за урок очень познавательно.

Ответить

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