Привет, сегодня продолжаем работать над видом игр. Вчера нам удалось внедрить новый код html, в файл вид материалов. И я скажу это получилось весьма даже неплохо. Но если зайти на сайт и посмотреть как это всё смотрится, можно увидеть что вид игр как то выглядит не очень.
Очень важно! Если вдруг, перед тем как изучить урок вы обнаружили что вид вашей панели отличается от того что описано в уроке, не пугайтесь! Просто переключите новую панель на старую. Как это сделать? Вот в этой инструкции.
Рекомендую почитать:
Как поменять адрес сайта на ucoz Всего за 200р.
Правильно, он и должен так выглядеть потому что он написанный на голом html, то-есть в прошлом уроке нам удалось создать разметку для вида материалов, при помощи html. Теперь что-бы наши игры на главной странице смотрелись красиво, требуется написать ещё один код уже на другом языке, на языке css.
Изменение css в ucoz
Для этого нам нужно изменить файл css и добавить в него новые строчки кода, но перед эти открыть данный файл. Файл можно открыть если кликнуть в верхнем меню по кнопке дизайн и по кнопке управление дизайном (CSS)
Изображение:
Далее откроется страница с кодом промотайте её до самого низа.
В прошлом уроке, мы в файле с html кодом, прописали главный блок. В него добавили 3 элемента, картинку игры, название игры, и панельку для редактирования игры. Если вы помните мы нашему главному блоку дали название post_home. Так вот, оно нам сейчас пригодится, при помощи него мы обратимся к главному блоку div из файла css и зададим ему правила.
В конце css файла вставьте следующий код:
.post_home { position: relative; overflow: hidden; box-shadow: 2px 3px 6px 0px rgba(0, 0, 0, 0.31);
}
Должно получится вот так:
Файл можете сохранить и посмотреть что получилось на сайте.
Давайте разберём код: Наш блок кода начинается с .post_home{ }, таким образом мы обратились к блоку див у которого мы прописали название post_home. (Смотрите прошлый урок)
Между фигурных скобок {ЗДЕСЬ}, я поместил три строчки кода. Первая строчка содержит в себе код position:relative; он говорит браузеру что этот блок можно двигать в любое направление от того место где он находится, при помощи указателей left:20px;, right:12px; top:10px;, bottom:30px;.
Но мы этого делать не будем, этот код для главного блока нам нужен для того что-бы в нём можно было двигать другой блок, относительно главного блока. Если мы не пропишем этот код главному блоку, (как мы сделали это сейчас) тогда тот блок который мы будем двигать, будет двигаться относительно окна браузера, а это нам не подходит.
Вторая строчка это overflow:hidden; — Этот код говорит браузеру что контент который находится внутри этого блока, (в нашем случае это картинка, название игры и панелька для редактирования игры) не в коем случае не должен выходить за его приделы, то есть те элементы которые будут выходить за приделы этого блока, будут обрезаться. Этот код нам нужен для того что-бы прятать название игры, которые будет появляться при наведение на картинку, то-есть если навести на картинку, тогда снизу будет выезжать название игры, если убрать мышку с картинки, тогда название игры снова заедет обратно. Так вот, этот код нужен для того что-бы название игры не было видно в блоке, как бы он прячется за ним.
И третья строчка box-shadow задаёт нашему блоку тень. Что-бы долго не писать, загляните на сайт и изучите что такое тени и как они работают.
Результат на сайте:
Пока что на сайте мы видим тени, что-бы вид игр стал ещё лучше, нам нужно добавить ещё один код в css файл.
Код:
.post_home h2{ position:absolute; bottom:-44%; background: rgba(0, 0, 0, 0.56); margin:0; padding: 20px; transition: all 2s; opacity:0;
}
Должно получится вот так:
Хотите сохраните файл и посмотрите что получилось на сайте.
Давайте разберём код. Первым делом мы должны обратиться к блоку div, это я сделал при помощи .post_home и после пробела добавил тег h2. Этого горит браузеру, что я обращаюсь к главному блоку див у которого внутри есть тег h2. Вот как раз к этому тегу я и обращаюсь. Как вы помните из прошлого урока тег
отвечает за заголовок игры, вот этот заголовок мы и настраиваем. Между фигурных скобок я поместил 7 строчек кода.
Первая строчка кода position:absolute; указывает браузеру что этот код можно двигать в любом направлении относительно главного блока див у которого название post_home. Вторая строчка bottom:- 44%; как раз и двигает блок от нижнего края главного блока. Но я прописал — 44%, это означает что нужно блок с названием игры разместить на 44% ниже нижнего края главного блока:
Пример:
Следующей код, это background, он задаёт задний фон нашему блоку с названием игры, в данный момент это чёрный цвет, который я сделал немного прозрачным. Следующая строчка с кодом margin:0; говорит браузеру что нужно все внешние отступы от блока с название игры обнулить.
Если заглянуть на картинку выше там где название игры, видите как бы название игры находится по середине блока, а покроям имеется отступ. Так вот, как раз эти отступы от текста внутри блока, задаёт следующая строчка кода padding:20px; Следующий код transition: all 2s; говорит браузеру с какой скоростью должен выезжать этот блок, после наведения мышкой на картинку, в моём случае он будет выезжать со скоростью две секунды в час. Ну и последний код это opacity:0; это правило задаёт прозрачность блоку, в моём случае это полная прозрачность.
Посмотрим что получилось на сайт:
Видите текста с названием игры как бы негде нету, на самом деле он есть только спрятанный внизу под блоком.
Теперь вставим следующий код для панельки.
Код:
.panel{ position:absolute; top:5%; right:2%; }
Должно получится вот так:
Код не очень сложный, и вы его уже знаете я его описал выше. То-есть через имя .panel{} мы обращаемся к блоку див у которого есть эта панелька. Между фигурных скобок я поместил код position:absolute;, так я сказал браузеру что хочу двигать этот блок у которого внутри панелька. А двигать мы его будем сверху вниз на 5% для этого я прописал top:5%; и справа налево на два процента, код right:2%;
Вот что получилось:
Обратите внимание, под картинкой появился отступ, который мы можем убрать если добавить следующей код.
Код:
.post_home img{ display:block;
}
Показывать не буду как я его добавил, лучше давайте разберём сам код. Здесь я прописал следующие, я обратился к главному блоку див с названием post_home у которого есть тег img внутри. Так вот я прописал следующие строчки кода display:block; между фигурных скобок. Они говорят браузеру что все картинки в этом блоке превратить нужно из строчного элемента в блочный. Проблема в том что браузеры к картинкам подставляют стандартные стили, в данном случае выравнивают картинку вертикально из за этого добавляется лишний отступ снизу. Эту проблему можно решить многими способами, один из них это картинку превратить в блочный элемент как мы и сделали выше.
Результат:
Нам осталось вставить ещё три кода, первый из них вы видите ниже.
Код:
.post_home:hover h2{ bottom:0px; text-decoration:none; transition: bottom 0.5s ease; opacity:1; }
Вставьте этот код в документ и сохраните. Давайте разберём код. В css стилях есть псевдоклассы которые помогают оживлять ссылки на сайте или блоки. Как это работает, к примеру мы наводим на ссылку, а под ней появляется подчёркивание, или к примеру она меняет цвет.
Так вот при помощи одно такого правила мы и будем оживлять наш сайт. Для этого я прописал после названия post_home псевдокласс :hover, это говорит браузеру что нужно поменять элемент при на видение на него мышкой. После псевдокласса идёт тег h2, это говорит браузеру что нужно поменять стили именно у этого тега.
Менять мы будем при помощи стилей, первое что нужно поменять это расположение данного блока, помните где у нас сейчас находится блок, ниже границы на 44 процента. Код bottom:0; возвращает его на нижнею границу главного блока. text-decoration:none; говорит что нужно убрать подчёркивание у текста. transition: bottom 0.5s ease; говорит браузеру с какой скоростью будет появляться блок. И код opacity:1; ворачивает блоку видимость, помните выше в коде я его сделал невидимым.
Результат:
Всё осталось вставить последние два кода.
Код:
.post_home a{ color:#00F500;
}
.post_home a:hover{ text-decoration:none;
}
Первый отвечает за цвет текста у названия игры, второй убирает подчёркивание у текста когда мы наводим на него мышку.
Результат:
Вот и всё, мы проделали большую работу по изменению вида у наших игр. Дальше когда настроем главную страницу, это всё будет смотреться очень даже нечего)) Надеюсь в этом большом уроке вы для себя узнали что-то новенькое, и теперь это знание будете применять в разработке сайтов.
Предыдущий урок | Как создать сайт — Оглавление | Следующий урок