Как через CSS cделать такую галочку?

Question

[Игорь]

И вообще, где можно посмотреть, как делать подобные "рисунки"?

Comments

[Игорь]

Андрей Мохов нужна Ваша помощь

Answer 1

[Djahar]

Есть соединённое изображение галочки, в включенном и выключенном виде. При клике, с помощью JQuery можно сдвигать background-position.
Как-то так, могу ошибаться.

Comments

[Игорь]

с бордером как такое сделать?
или transform..

[Имя Фамилия]

Игорь: как понять "с бордером"?

[Игорь]

Имя Фамилия: любым доступным способом посредством css

Answer 2

[Александр Втюрин]

Twitter Bootstrap, а в частности FontAwesome

Comments

[Игорь]

пример?

Answer 3

[Андрей Мохов]

Игорь: ваш скрин с youtube, нажмите в браузере F12 и посмотрите как сделан этот элемент, какие стили при этом он имеет
в качестве иконок можете использовать стили Bootstrap или FontAwesome, что вам и посоветовали выше

Comments

[Игорь]

www.youtube.com/watch?v=lvqWSI7WkjE

как там с помощь инспектора найти то правило в css?
я искал но не нашел.

[Андрей Мохов]

Игорь: что именно вас интересует? как происходит плавное смещение?

[Андрей Мохов]

для всех тэгов внутри label указано свойство transition:

.yt-uix-checkbox-on-off label>* {
    transition: width .1s;
}

и собственно вся пляска идет относительно прозрачного чекбокса, определены стили после отмеченного чекбокса и после неотмеченного, с разной шириной, отсюда и происходит анимация

[Игорь]

Андрей Мохов: меня интересует белая галочка как геометрический узор.Как такой же сделать?

[Андрей Мохов]

Игорь: посмотрите стиль вот этого элемента:
.yt-uix-checkbox-on-off .checked:before
там бэкграундом картинка s.ytimg.com/yts/imgbin/www-hitchhiker-vflAPZHki.webp, где фон сдвинут в позицию -78px -307px

[Андрей Мохов]

Игорь: кстати, картинку лучше смотреть на чёрном фоне, т.к. галка белого цвета, а фон под ней прозрачный

[Игорь]

Андрей Мохов: а css как сделать такие стрелочки?
картинка не подходит.

[tef]

Игорь: вертеть блоки можно с помощью transform: rotate(7deg); в скобках указывается градус поворота.

Answer 4

[petyagrill]

tympanus.net/Development/CreativeButtons
Гляньте тут, да и вообще по сайту пройдитесь. Очень много крутых примеров)

Answer 5

[Дмитрий]

www.bootstrap-switch.org