Меню
Спросить
???

Учимся верстать сайты. Часть 3. Окна.

31 августа 2017
Учимся верстать сайты. Часть 3. Окна.

Привет всем с вами KNLNT и мы продолжаем верстку страницы ВК. Сегодня планировалось сверстать всплывающие окна и сделать к ним анимацию, но анимация переносится на следующий урок, так как не хватило времени. Поехали!

Правки в html

Начнем с правок в коде html, файла index.html.
Открываем файл и...
Нужно исправить следующее - у нас был блок с классом vo и id hmenu, в нем был список ul с пунктами меню, так вот нужно убрать этот div блок и добавить к списку ul тот самый класс и айди.

  1. <ul class = "vo" id = "hmenu">
  2. ...
  3. </ul>

Это было не сложно. Просто я сам не понял, зачем я список обернул еще в блок, наверно так нужно было. Продолжаем.

Правки css

Я не много присмотрелся к шапке ВК и заметил, что наша не много меньше по длине, поэтому изменим длину шапки, сделаем ее равной 42 пикселя, так же подправим все элементы, которые зависели от длины шапки. Подробнее можно посмотреть в видео ниже.
Так же зададим нашему поиску ширину равную 196 пикселей.
С правками все.

Стили css или стильные окна

Теперь будем стилизовать окна.
И так, что мы имеем. У нас есть четыре окна. Все четыре имеют класс vo. Значит начинаем писать общий вид окон, пока что, общий.
Открываем style.css и прописываем класс.

  1. .vo{

  2. }

С чего бы начать. Давайте подумаем что общего имеют эти четыре окна? Начнем с того, что все они имеют абсолютное позиционирование.

  1. .vo{
  2. position: absolute;
  3. }

Начало положено, теперь давайте зададим им начальные размеры, пока что один размер на всех. Например 400 на 200 пикселей.

  1. .vo{
  2. position: absolute;
  3. width: 400px;
  4. height: 200px;
  5. }

Далее отодвинем их не много от левого края и от верхнего верха.

  1. .vo{
  2. position: absolute;
  3. width: 400px;
  4. height: 200px;
  5. top: 60px;
  6. left: 300px;
  7. }

Дальше зададим белый цвет фона, скругление углов и рамку.

  1. .vo{
  2. position: absolute;
  3. width: 400px;
  4. height: 200px;
  5. top: 60px;
  6. left: 300px;
  7. background: white;
  8. border-radius: 3px;
  9. border: 1px solid #e7e8ec;
  10. }

Сохраняем обновляем, смотрим, что получилось.
Теперь кто внимателен, мог заметить, что у почти у всех окон, кроме поискового кона, присутствует треугольничек сверху окна. Это эффектно смотрится. Давайте его тоже сделаем.
Но как сделать треугольник на css? Поставить картинку треугольника? Думаю нет. Все делается на чистом css. Треугольник делается с помощью псевдоэлементов :before и :after, о них мы обязательно поговорим в отдельной статье, но сегодня уже познакомимся. По сути не важно с каким из псевдоэлементов вы будите делать этот треугольник. Я буду делать с :before.

Треугольник на css, :before

И так пишем:

  1. .vo: before{

  2. }

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

  1. .vo: before{
  2. position: absolute;
  3. content: '';
  4. }

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

  1. .vo: before{
  2. position: absolute;
  3. content: '';
  4. bottom: 100%;
  5. }

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

  1. .vo: before{
  2. position: absolute;
  3. content: '';
  4. bottom: 100%;
  5. border: 8px solid black;
  6. }

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

  1. .vo: before{
  2. position: absolute;
  3. content: '';
  4. bottom: 100%;
  5. border: 8px solid black;
  6. border-bottom: 8px solid white;
  7. }

Вот треугольник и готов, осталось обесцветить черные остатки.

  1. .vo: before{
  2. position: absolute;
  3. content: '';
  4. bottom: 100%;
  5. border: 8px solid transparent;
  6. border-bottom: 8px solid white;
  7. }

SHADOW

Я совсем забыл про тень у наших окон, поэтому добавим тень.

  1. box-shadow:0 20px 40px 0 rgba(0,0,0,0.1);

Окно поиска

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

  1. .vo#search{

  2. }

И так, что тут нужно изменить, а что добавить. Для начала добавим ширину и длину, а так же положение относительно левого края.

  1. .vo#search{
  2. width: 250px;
  3. height: 390px;
  4. left: 345px;
  5. }

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

  1. .vo#search{
  2. width: 250px;
  3. height: 390px;
  4. left: 345px;
  5. top: 39px;
  6. box-shadow: none;
  7. }

Отлично, что еще нужно изменить у этого окна. Заметим то, что у него отсутствует тот самый треугольничек, поэтому мы его уберем.

  1. .vo#search: before{
  2. display: none;
  3. }

С этим окном все, переходим к следующему.

Окно оповещений

На очереди колокольчик или окно для оповещений.
Тут долго распинаться не будем.
Добавим положение относительного левого края, ширину и длину. Треугольник переместим в право на 14 пикселей.

  1. .vo#col{
  2. left: 604px;
  3. width: 480px;
  4. height: 200px;
  5. }
  6. .vo#col: before{
  7. left: 14px;
  8. }

Окно для музыки

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

  1. .vo#muz{
  2. left: 355px;
  3. width: 660px;
  4. height: 500px;
  5. }
  6. .vo#muz: before{
  7. left: 310px;
  8. }

Меню шапки

Осталось сделать последнее окно, скорее даже не окно, всплывающее меню, кстати для удобства работы с каждый элементом отдельно, можете скрывать остальные окна свойством display:none.
Так начнем с самого окна, он же тег ul.
Для начала добавим ширину, положение относительно левого края и верха, длина будет автоматическая, поэтому ее не задаем.

  1. .vo#hmenu{
  2. width: 160px;
  3. left: 1006px;
  4. top: 48px;
  5. }

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

  1. .vo#hmenu{
  2. width: 160px;
  3. left: 1006px;
  4. top: 48px;
  5. box-shadow: none;
  6. margin: 0;
  7. padding: 5px 0;
  8. }

Здесь все, поехали дальше.
Стрелочку так же смещаем вправо и все.

  1. .vo#menu: before{
  2. left: 110px;
  3. }

Дальше займемся пунктами li.
Для начала уберем маркеры, зададим белый цвет фона и укажем курсор-руку.

  1. .vo#menu li {
  2. list-style: none;
  3. background: white;
  4. cursor: pointer;
  5. }

Теперь зададим размер и цвет шрифта, а так же уберем внешние отступы.

  1. .vo#menu li {
  2. list-style: none;
  3. background: white;
  4. cursor: pointer;
  5. font-size: 12px;
  6. color: #2a5885;
  7. margin: 0;
  8. }

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

  1. MAX ширина 160px
  2. Два отступа по 12px = 24px

Значит берем и вычитаем эти 24 пикселя из максимальной ширина. У нас получается 136 пикселей, это и будет ширина пунктов.
Задаем ширину и внутренние отступы.

  1. .vo#menu li {
  2. list-style: none;
  3. background: white;
  4. cursor: pointer;
  5. font-size: 12px;
  6. color: #2a5885;
  7. margin: 0;
  8. padding: 8px 12px;
  9. width: 136px;
  10. }

Еще нам нужно добавить эффект к пунктам, при наведении курсора на пункт, он должен менять цвет, за это будет отвечать псевдокласс hover.

  1. .vo#menu li: hover {
  2. background: #e5ebf1;
  3. }

С пунктами все, остались линии между пунктами.
Задаем им длину, цвет фона, ширину и внутренние отступы.

  1. .vo#hmenu hr {
  2. height: 1px;
  3. backrgound: #dbe4ec;
  4. width: 85%;
  5. padding: 0;
  6. }

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

  1. .vo#hmenu hr {
  2. height: 1px;
  3. backrgound: #dbe4ec;
  4. width: 85%;
  5. padding: 0;
  6. margin: 0 auto;
  7. }

Так же нужно задать внешние отступы сверху и снизу и убрать рамку.

  1. .vo#hmenu hr {
  2. height: 1px;
  3. backrgound: #dbe4ec;
  4. width: 85%;
  5. padding: 0;
  6. margin: 0 auto;
  7. margin-top: 5px;
  8. margin-bottom: 5px;
  9. border: none;
  10. }

Вот и все. Как итог, вот что должно получится у нас с вами.

Всплывающие окна на сайте

Заключение

На сегодня все, было классно, всем спасибо, до следующего урока.
Всем пока =)

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