- Автор темы
- #1
Всем, привет!
Сегодня мы продолжим писать сайт с нуля для самп проекта - Florida Role Play, На прошлом уроке мы сделали навигационное меню для сайта, сегодня мы будем его дополнять разными стилями и анимациями, для начала открываем наш проект, затем index.html, и ишем:
У меня она на 27 строке, после того как найдете ее - внутрь тега <a>, после href="index.html" пишем
Теперь, давайте делать анимации, пока анимации мы будем делать простые, используя :hover, чуть позже научу делать и на JavaScript
Открываем style.css, и находим:
Давайте сделаем так, чтоб при курсоре у него менялся цвет, для этого в конце файла пишем следующее:
Вместо yellow пишите любой другой цвет, теперь еще можно сделать так, чтоб при курсоре не только менялся цвет, но и текс увеличивался, для этого в эту же конструкцию пишем:
В scale() пишем число во сколько раз текст увеличится, сохраняем и смотрим, все работает, но не хватает плавности, для этого в:
Пишем:
После all пишем время в секундах, сохраняем - совсем другое дело, и вот, дорогие друзья, с навигационным меню мы закончили
Если возникли проблемы - vk.com/ebaniysamper
Мой CSS файл на момент урока
Мой HTML файл на момент урока
Сегодня мы продолжим писать сайт с нуля для самп проекта - Florida Role Play, На прошлом уроке мы сделали навигационное меню для сайта, сегодня мы будем его дополнять разными стилями и анимациями, для начала открываем наш проект, затем index.html, и ишем:
<li><a href="index.html">Главная</a></li>
У меня она на 27 строке, после того как найдете ее - внутрь тега <a>, после href="index.html" пишем
style="color: yellow;"
Теперь, давайте делать анимации, пока анимации мы будем делать простые, используя :hover, чуть позже научу делать и на JavaScript
Открываем style.css, и находим:
.header .navbar a{}
Давайте сделаем так, чтоб при курсоре у него менялся цвет, для этого в конце файла пишем следующее:
.header .navbar a:hover{
color: yellow;
}
Вместо yellow пишите любой другой цвет, теперь еще можно сделать так, чтоб при курсоре не только менялся цвет, но и текс увеличивался, для этого в эту же конструкцию пишем:
-webkit-transform: scale(1.13);
-ms-transform: scale(1.13);
transform: scale(1.13);
В scale() пишем число во сколько раз текст увеличится, сохраняем и смотрим, все работает, но не хватает плавности, для этого в:
.header .navbar a{}
Пишем:
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;
После all пишем время в секундах, сохраняем - совсем другое дело, и вот, дорогие друзья, с навигационным меню мы закончили
Если возникли проблемы - vk.com/ebaniysamper
Мой CSS файл на момент урока
CSS:
#logofirst{
color: yellow;
font-size: 60px;
position: absolute;
top: 17px;
left: 40px;
font-family: 'Vina Sans', cursive;
}
#logosecond{
color: white;
font-size: 45px;
position: absolute;
top: 54px;
left: 70px;
font-family: 'Dancing Script', cursive;
}
.header .navbar{
margin: 0;
padding: 0;
list-style-type: none;
width: 550px;
text-align: center;
position: absolute;
top: 7%;
right: 45px;
}
.header .navbar li{
display: inline;
}
.header .navbar a{
color: #fff;
text-decoration: none;
font-weight: bold;
display: inline-block;
width: 100px;
font-size: 19px;
font-family: 'Roboto Mono', monospace;
-webkit-transition: all 1.3s ease;
transition: all 1.3s ease;
}
.header .navbar a:hover{
color: yellow;
-webkit-transform: scale(1.13);
-ms-transform: scale(1.13);
transform: scale(1.13);
}
Мой HTML файл на момент урока
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" href="source/css/style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@700&family=Roboto+Mono&family=Russo+One&family=Vina+Sans&display=swap" rel="stylesheet">
<title>Florida Role Play - Главная</title>
</head>
<body>
<style type="text/css">
body {
background: #000 url(source/img/back.png);
color: #fff;
background-attachment: fixed;
background-repeat: repeat-x;
background-size: 100%;
}
</style>
<header class="header">
<span id="logofirst">Florida</span>
<span id="logosecond">Role Play</span>
<div class="navbar">
<ul>
<li><a href="index.html" style="color: yellow;">Главная</a></li>
<li><a href="//ссылку на форум с http://">Форум</a></li>
<li><a href="//ссылку на группу вк с http://">Новости</a></li>
<li><a href="donate.html">Магазин</a></li>
</ul>
</div>
</header>
</body>
</html>