Мой первый урок! Подсветка текста при наведении мыши.

[Anton.A]

Всем привет! Сегодня я пишу свой первый урок связанный с HTML и CSS. Тема очень простая сегодня мы познакомимся с вами с двумя функциями: text-shadow и transition.
Смысл урока: мы научимся с вами делать красивую и плавную подсветку текста при наведении на него курсор мыши. Это урок особенно будет интересен владельцам SA:MP серверов для их форумов/сайтов. Подобный эффект видел на многих форумах/сайтах SA:MP серверов. И так начнем!

Создадим в отдельной папке два файла: index.html и style.css (Можете ставить свои названия)

Открываем оба файла и вставляем в файл index.html стандартный код html-файла.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Language" content="ru">
<link rel="stylesheet" href="style.css" type="text/css"/>
<title>Lesson 1</title>
</head>
<body>



</body>
</html>

Примечание: После вставки кода сохраните файл и выйдите из него, а затем снова зайдите чтобы Notepad установил кодировку UTF-8.

Стандартный код мы вставили теперь добавим нашу ссылку, с которой будем работать, между тегами <body></body>. Вот так выглядит мой код ссылки:

<a href="#">Ссылка</a>

Примечание: в кавычки тега 'href' можете вставить свою любую ссылку.

Теперь у нас есть ссылка. Давайте оформим её стандартный вид. Но прежде чем начинать её оформлять подумайте, какого цвет и размер вы хотите для своего текста. Выбрали? Хорошо. Едем дальше. Я взял красный цвет и размер 20px чтобы всё было лучше видно. Теперь переходим в файл style.css и туда добавляем данный код:

a {
  color: #FF0000; /* задаём цвет текста */
  font-size: 20px; /* задаём размер текста */
}

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

Это только заготовки. Теперь давайте избавимся от нижнего прочерка ссылки, а также сделаем положение ссылки по центру.
Это мы сможем сделать двумя простыми тегами: <center></center> - это пойдёт в html файл, и тегом 'text-decoration'. Сначала перейдём в html файл и возьмём нашу ссылку в теги <center></center>

<center>
<a href="#">Ссылка</a>
</center>

Теперь идём в CSS файл и туда ниже всех тегов вставляем это:

text-decoration: none;

Теперь наш стилевой код ссылки выглядит вот так:

a {
  color: #FF0000;
  font-size: 20px;
  text-decoration: none;
}

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

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

*имя вашего класса/id*:hover {
  содержимое
}

В нашем случае мы добавим только подсветку для текста. её мы зададим функцией 'text-shadow'. Это очень полезная функция в CSS, которая может преобразить любой текст. Наш 'hover' будет выглядеть вот так:

a:hover {
  text-shadow: 0px 0px 10px #FF0000;
}

Объясню что здесь за что отвечает. Первые 0px - сдвиг по оси x (надеюсь все себе смогут представить график с осями x и y), вторые 0px - сдвиг по оси y. Ну а третья функция, которой мы сейчас дали значение 10px - радиус тени.
Также конечно параметры радиуса тени вы можете подобрать на собственный вкус.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

И так с добавлением функции 'text-shadow' к нашей ссылки мы уже сделали её довольно симпатичной. Но сейчас мы сделаем это включение подсветки более плавным. Именно это и сделает наш эффект ещё более красивей. Сейчас мы познакомимся с функцией 'transition'. Мы добавим 4 параметра в наши стиле в блок:

a {

}

После добавление этих параметров наш код будет выглядеть вот так:

a {
  color: #FF0000;
  font-size: 20px;
  text-decoration: none;
  -webkit-transition: text-shadow 0.5s ease-in-out;
  -moz-transition: text-shadow 0.5s ease-in-out;
  -o-transition: text-shadow 0.5s ease-in-out;
  -ms-transition: text-shadow 0.5s ease-in-out;
  transition: text-shadow 0.5s ease-in-out;
}

В данном коде нужно смотреть на последнюю строчку. Верхние четыре - это адаптации под различные браузеры. Теперь разъясню содержимое параметра 'transition'.
'text-shadow' - мы показали, что плавный переход ставим к тени текста.
'0.5s' - установили время появления и исчезания нашей тени-текста.
'ease-in-out' - функция которая показывает коду, что переход должен быть медленным сначала и в конце.

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

На этом всё. В данном уроку я старался как можно яснее всё разжевать и положить вам в рот. Урок прост к освоению и позволяет нам добавить на свой сайт красивый эффект! От плюсов не откажусь. Также заранее прошу прощения если где-то плохо сформировал мысль.

Автор: Anton.A

Чтобы видеть скрытое содержание Зарегистрируйтесь на форуме!

​