<MyRusakov.ru />

WordPress 4. Пример создания блога

WordPress 4. Пример создания блога

Видеокурс "WordPress 4. Пример создания блога" научит Вас создавать любые сайты на самой популярной CMS - WordPress.

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

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

Курс очень простой и проходится за один вечер, а знания останутся с Вами навсегда.

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

Подписавшись по E-mail, Вы будете получать уведомления о новых статьях.

Подписка Подписаться

Добавляйтесь ко мне в друзья ВКонтакте! Отзывы о сайте и обо мне оставляйте в моей группе.

Мой аккаунт Мой аккаунт Моя группа
Опрос

Каким движком Вы предпочитаете пользоваться?

Плавное подчеркивание ссылки при наведении

Плавное подчеркивание ссылки при наведении

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

Демо


HTML разметка в виде списков:

<body>
  <ul>
    <li><a href="#">Стрижка</a></li>
    <li><a href="#">Покраска</a></li>
    <li><a href="#">Химия</a></li>
    <li><a href="#">Маникюр</a></li>
  </ul>
</body>

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

Плавное подчеркивание ссылки при наведении

Начинаем мы всегда с подготовительных работ, прежде чем дойдем до hover эффекта. Обнуляем margin и padding, чтобы для всех браузеров, значения этих свойств, были одинаковыми изначально, ведь по умолчанию у браузеров, они у каждого свои.

body{
  margin: 0;
  padding: 0;
}

Стилизуем селектор маркированного списка ul

ul {
  margin: 10%;
  list-style: none;
  display: flex;
}

Сделаем отступ от края браузера на 10%, убираем маркеры списка - list-style:none и выстроим пункты меню по горизонтали - display: flex.

Выбор шрифта

Не стоит ограничивать себя только дефолтными шрифтами, изначально установленными на компьютерах у пользователей. Такие шрифты давно всем приелись. Выбираем привлекательный шрифт с поддержкой Cyrillic в Google Font.

Подключение шрифта

Один из способов через import, копируем код на Google Fonts и вставляем в верх файла style.css

. @import url('https://fonts.googleapis.com/css?family=Lobster');
Прописываем название выбранного шрифта:

ul {   font-family: 'Lobster', arial; }
делаем шрифт крупнее, в 2 раза.

ul {   font-size: 200%; }

Сейчас пункты меню прижаты друг к другу, сделаем для них отступы, по 10 пикселей сверху, снизу и по 20 пикселей слева и справа.

ul li {   padding: 10px 20px; }
Полупрозрачный текст на фоне в CSS

Оформление ссылок


ul li a {   text-decoration: none;   color: #03a9f4;   position: relative; }
Полупрозрачный текст на фоне в CSS

Меню приняло свой окончательный вид, перед тем, как будет применен hover эффект.


Псевдо-линия для подчеркивания


Создается с помощью псевдоэлемента ::after

ul li a:after {   content: ''; }

До наведения курсора длина линии равна нулю - width: 0px, ширина линии равна 5 пикселям - height: 5px.

width: 0px; height: 5px;

Стартовая позиция линии (top, left). Линия находится в системе координат (position: absolute), относительно родителя - гиперссылки (position: relative).

position: absolute; top: 100%; left: 0;
Время анимации и цвет линии.

background: #cddc39; transition: .5s; }

Hover эффект плавного подчеркивания ссылок


ul li:hover a:after {
  width: 100%;
  transform: translationX(100%);
}

При наведении курсора, длина линии становится равной 100% и происходит ее смещение вправо на 100% по оси X.

Полупрозрачный текст на фоне в CSS

Весь код эффекта

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

  1. Кнопка:

    Она выглядит вот так: Как создать свой сайт

  2. Текстовая ссылка:

    Она выглядит вот так: Как создать свой сайт

  3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии (0):

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