Как сделать похожие анимации и элементы?

Question

[E Happy]

Доброго времени суток гуру своего дела, и просто хорошие люди :)
Накопилось немного вопросов, вот решил разом их задать..

Делается сайт в минимализме, на WordPress. Как пример буду показывать или указывать нужные фичи на другом сайте - сайт не мой sketchapp.me/. Сразу скажу, в JS знаний у меня нет.

1) При наведении в правом верхнем углу на круглую иконку профиля/человечка, он меняет цвет с белого на зеленый и обратно. Думал сделать так сам, но вот подгружается этот файл fa fa-user откуда то с другого места, ибо в теме его нет (либо я не нашел). Как сделать такую анимацию?

2) В подвале сайта есть соц элементы - так же при наведении на них, они подпрыгивают - как можно заметить, подпрыгивает только белые элементы (с тенью сзади), сами прямоугольные иконки не двигаются. Как сделать так же?

3) В шапке (справа) и в подвале (справа) есть элемент подписки. Буду делать такой же, собственно при наведении мышки на кнопку Подписки, так же проигрывается анимация (небольшое засветление). Как сделать так же?

4) На главной странице под надписью Новые записи мы видим у записей теги - они белые, при наведении у них появляется зеленая обводка рамки и текста. Когда открываем пост и видим наверху тег, он так же белый и при наведении окрашивается. Пробовал делать так же в обоих случаях - увы, у меня просто тег, который заполнен цветом, сама надпись белого цвета. Как сделать так же?

5) Если мы нажимаем на любую запись, то мы видим под меню хлебные крошки, и они окрашиваются в цвета, при том сама запись без цвета, а вот путь который она прошла - окрашивается зеленым. И если с крошками я надеюсь еще как то разобраться, то вот с цветом...снова проблема. Как сделать так же?

Извините за сумбурность и возможно наглость, но оформление нравится, поэтому некоторые элементы хотел бы перенять. Просьба не ругаться и не флудить, тапками не кидаться :)

Answer 1

[Сергей Горячев]

На все пункты ответ один.
Открывай консоль разработчика и смотри, как и что сделано.
В хроме и мозилле это открывается клавишами ctrl+shift+i.

Не вижу смысла подсказывать что-то конкретно.
Всё видно в коде.

PS: Не всё там требуется JS, обычные CSS эффекты.

Comments

[E Happy]

Пробовал - либо я кривой и не понимаю, либо человек закрыл всё хорошо :)

[Сергей Горячев]

E Happy: К сожалению, первый вариант. Обычные ховер-эффекты нельзя скрыть от консоли.

[E Happy]

Sergey Goryachev: ну в какую тему нужно покопать, если отбросить вариант с просмотром кода сайта?..

[Сергей Горячев]

E Happy: Вот к примеру.

.mdSocialWidget .socialList a:hover i {
    -webkit-transform: translate(0,-2px);
    -ms-transform: translate(0,-2px);
    transform: translate(0,-2px);
    text-shadow: 6px 6px 12px rgba(0,0,0,0.5);
}

Эффект на иконках соцсетей.

[Сергей Горячев]

E Happy: Если вы не понимаете как сделать такие простые вещи, то наверно вам копать в сторону основ CSS, так как эффект наведения :hover, это основы (про первый и третий пункт).

[E Happy]

Sergey Goryachev: А можно пожалуйста поподробнее объяснить еще раз Где конкретно смотреть и что копировать?

Спасибо:)

[Сергей Горячев]

E Happy: Повторюсь, вам нужно основы подтягивать, это элементарные вещи.
Также ищите видео-обзоры по работе с консолью разработчика, всё сможете найти.

[Егор Живагин]

E Happy: css + hover . Всё, кроме 5-го пункта

Открываешь консоль, находишь элемент нужный, тыкаешь на :hov справа вверху и выбираешь hover. Смотришь, чо изменилось на страничке и в стилях

[Егор Живагин]

E Happy: поправлюсь. css + hover + transition .