jkeks блог


Как сделать share кнопки Яндекса классными ?



20.9.2017 1554 просмотрa ;)


Все знают что share.yandex.ru кнопки имеют 2 унылых размера, мелкие и еще мельче.

И это какой-то позор, ведь мы хотим что бы пользователи замечали наши кнопки и жмякали на них, а значит они вообще-то должны быть крупными и красивыми. А еще лучше что бы они сами подгонялись под размер экрана пользователя.

Для такого хака иконок от Яндекс нужно всего лишь подключить в свой код дополнительный стиль:

.ya-share2__container_size_m .ya-share2__icon { width: 3vw; height: 3vw; }

Данный стиль воткнуть в самый конец HTML и наслаждаться видом:

Красотень !

 

А вот как резиново все растягивается:

 

Если кнопки со счетчиками, то смотрится все не менее круто:

Но если кнопки с лайками будут очень большими, тогда цифры будут казаться мелкими, и это мы сейчас исправим, добавьте строчку с CSS правило:

.ya-share2__container_size_m .ya-share2__counter { font-size: 2vw !important ; line-height: 3vw !important; }

Итоговый код:

 .ya-share2__container_size_m .ya-share2__icon { width: 6vw; height: 6vw; }
 .ya-share2__container_size_m .ya-share2__counter { font-size: 2vw !important ; line-height: 3vw !important; }

 

Тогда кнопки будут выглядеть вот так:

 

Что за единица измерения vw ?

 





Видеочат рулетка
jAntivirus Рейтинг@Mail.ru