{"id":1159,"date":"2023-04-07T16:31:09","date_gmt":"2023-04-07T15:31:09","guid":{"rendered":"https:\/\/geekcommunicant.com\/blog\/?p=1159"},"modified":"2023-04-07T16:31:10","modified_gmt":"2023-04-07T15:31:10","slug":"creer-un-interrupteur-en-css","status":"publish","type":"post","link":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/07\/creer-un-interrupteur-en-css\/","title":{"rendered":"Cr\u00e9er un interrupteur en CSS"},"content":{"rendered":"\n<p>Aujourd\u2019hui, retour dans le monde des CSS.<\/p>\n\n\n\n<p>Ce dont j\u2019ai d\u00e9cid\u00e9 de parler cette semaine est une mani\u00e8re de cr\u00e9er un interrupteur comme ci-dessous :<\/p>\n\n\n\n<label class=\"toggle\">   \n    <input class=\"toggle-checkbox\" type=\"checkbox\" \/>\n    <span class=\"toggle-switch\"><\/span>\n<\/label>\n<style type=\"text\/css\">\n    .toggle-checkbox {\n        display: none;\n    }\n\n    .toggle-switch {\n        display: inline-block;\n        position: relative;\n        width: 30px;\n        height: 16px;\n        background-color: #cacaca;\n        border-radius: 8px;\n    }\n    \n    .toggle-switch::before {\n        content: \"\";\n        background-color: #ffffff;\n        position: absolute;\n        height: 12px;\n        width: 12px;\n        border-radius: 50%;\n        top: 2px;\n        left: 4px;\n    }\n\n    .toggle-checkbox:checked + .toggle-switch {\n        background-color: #028ddd;\n    }\n    \n    .toggle-checkbox:checked + .toggle-switch::before {\n        left: 14px;\n    }\n<\/style>\n<br\/><br\/>\n\n\n\n<h2 class=\"wp-block-heading\">Le HTML<\/h2>\n\n\n\n<p>Concernant le HTML derri\u00e8re cet interrupteur, c\u2019est un input de type checkbox qui se cache dessous.<\/p>\n\n\n\n<p>Cet input, cach\u00e9 en CSS, est englob\u00e9 dans un <code>label<\/code>, avec un <code>span<\/code> \u00e0 ses c\u00f4t\u00e9s. C\u2019est le clic sur le label qui permettra de cocher\/d\u00e9cocher la checkbox.<\/p>\n\n\n\n<!--more-->\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: xml; gutter: false; title: ; notranslate\" title=\"\">\n&lt;label class=&quot;toggle&quot;&gt;   \n    &lt;input class=&quot;toggle-checkbox&quot; type=&quot;checkbox&quot; \/&gt;\n    &lt;span class=&quot;toggle-switch&quot;&gt;&lt;\/span&gt;\n&lt;\/label&gt;\n<\/pre><\/div>\n\n\n<p>Ce span servira \u00e0 cr\u00e9er le fond de l\u2019interrupteur, tandis que son pseudo-element <code><a rel=\"noreferrer noopener\" href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/::before\" target=\"_blank\">::before<\/a><\/code> servira \u00e0 cr\u00e9er l\u2019\u00e9l\u00e9ment mobile. Le style de ces deux \u00e9l\u00e9ments sera chang\u00e9 selon l\u2019\u00e9tat de la checkbox, en utilisant la pseudo-classe <code><a href=\"https:\/\/developer.mozilla.org\/fr\/docs\/Web\/CSS\/:checked\" target=\"_blank\" rel=\"noreferrer noopener\">:checked<\/a><\/code>.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Le CSS<\/h2>\n\n\n\n<p>D\u2019abord, on cache la checkbox&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\n.toggle-checkbox {\n    display: none;\n}\n<\/pre><\/div>\n\n\n<p>Ensuite on rajoute des arrondis au fond de l\u2019interrupteur et \u00e0 sa partie mobile&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\n.toggle-switch {\n    display: inline-block;\n    position: relative;\n    width: 30px;\n    height: 16px;\n    background-color: #cacaca;\n    border-radius: 8px;\n}\n\n.toggle-switch::before {\n    content: &quot;&quot;;\n    background-color: #ffffff;\n    position: absolute;\n    height: 12px;\n    width: 12px;\n    border-radius: 50%;\n    top: 2px;\n    left: 4px;\n}\n<\/pre><\/div>\n\n\n<p>Il ne reste plus qu\u2019\u00e0 cr\u00e9er les styles pour quand la case est coch\u00e9e&nbsp;:<\/p>\n\n\n<div class=\"wp-block-syntaxhighlighter-code \"><pre class=\"brush: css; gutter: false; title: ; notranslate\" title=\"\">\n.toggle-checkbox:checked + .toggle-switch {\n    background-color: #028ddd;\n}\n\n.toggle-checkbox:checked + .toggle-switch::before {\n    left: 14px;\n}\n<\/pre><\/div>\n\n\n<p>Et voil\u00e0 ^^<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Aujourd\u2019hui, retour dans le monde des CSS. Ce dont j\u2019ai d\u00e9cid\u00e9 de parler cette semaine est une mani\u00e8re de cr\u00e9er un interrupteur comme ci-dessous : Le HTML Concernant le HTML derri\u00e8re cet interrupteur, c\u2019est un input de type checkbox qui &hellip; <a href=\"https:\/\/geekcommunicant.com\/blog\/2023\/04\/07\/creer-un-interrupteur-en-css\/\">Continuer la lecture <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[53],"tags":[64,29],"class_list":["post-1159","post","type-post","status-publish","format-standard","hentry","category-css","tag-checkbox","tag-html"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_shortlink":"https:\/\/wp.me\/p2IoOb-iH","jetpack_sharing_enabled":true,"jetpack_likes_enabled":true,"jetpack-related-posts":[{"id":40,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/26\/un-effet-de-porte-en-jquery\/","url_meta":{"origin":1159,"position":0},"title":"Un effet de porte en jQuery","author":"geekc","date":"26\/09\/2012","format":false,"excerpt":"Aujourd'hui nous allons voir comment cr\u00e9er en jQuery et jQuery UI un effet de porte, avec l'image se s\u00e9parant en 4 par les coins, r\u00e9v\u00e9lant ainsi un texte. Avant tout, il faut comprendre comment s'organiseront les diff\u00e9rentes couches: \u00e0 la base, on trouve la couche contenant le texte (z-index: 0)juste\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1233,"url":"https:\/\/geekcommunicant.com\/blog\/2024\/05\/07\/flip-card-css\/","url_meta":{"origin":1159,"position":1},"title":"Une flip card en CSS","author":"geekc","date":"07\/05\/2024","format":false,"excerpt":"Vous avez toujours voulu savoir comment cr\u00e9er un effet de carte retourn\u00e9e (flip card en anglais) ? Cet article est ce qu\u2019il vous faut ! Le r\u00e9sultat final est disponible ici. Structure HTML Pour commencer, attaquons nous \u00e0 la structure HTML d\u2019une carte. Pour sch\u00e9matiser, une carte se d\u00e9compose comme\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":171,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/10\/18\/jquery-une-fenetre-modale\/","url_meta":{"origin":1159,"position":2},"title":"[jQuery] Une fen\u00eatre modale","author":"geekc","date":"18\/10\/2012","format":false,"excerpt":"Bonjour \u00e0 tous, aujourd'hui nous allons voir comment r\u00e9aliser une fen\u00eatre modale en jQuery. Qu'est-ce que c'est ? Wikip\u00e9dia donne la d\u00e9finition suivante: Une fen\u00eatre modale est, dans une interface graphique, une fen\u00eatre qui prend le contr\u00f4le total du clavier et de l'\u00e9cran. Elle est en g\u00e9n\u00e9ral associ\u00e9e \u00e0 une\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1074,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/01\/13\/gloubi-script-texte-arriere-plan-defilant\/","url_meta":{"origin":1159,"position":3},"title":"Gloubi script &#8211; texte avec un arri\u00e8re-plan d\u00e9filant","author":"geekc","date":"13\/01\/2023","format":false,"excerpt":"Aujourd\u2019hui nouveau tuto sur un gloubi script d\u2019effet sur texte. Cette fois ci, il s\u2019agit de texte avec arri\u00e8re-plan d\u00e9filant. Principe du script Le script original est disponible sur sa propre page sur le site de notre gloubi adversaire. Il fonctionne selon le principe de calques\u00a0: au-dessus du calque de\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":10,"url":"https:\/\/geekcommunicant.com\/blog\/2012\/09\/06\/un-dancefloor-en-jquery\/","url_meta":{"origin":1159,"position":4},"title":"Un dancefloor en jQuery","author":"geekc","date":"06\/09\/2012","format":false,"excerpt":"Aujourd'hui, je vais vous expliquer comment cr\u00e9er en jQuery un effet de dancefloor \u00e0 la Saturday Night Fever (demo). Tout d'abord, de quoi est compos\u00e9 un tel \u00ab plancher de danse \u00bb ? Tout simplement de diff\u00e9rents carr\u00e9s\/cases, le tout contenu dans une surface d\u00e9finie. Ici le dancefloor sera une\u2026","rel":"","context":"Dans &quot;jQuery&quot;","block_context":{"text":"jQuery","link":"https:\/\/geekcommunicant.com\/blog\/category\/jquery\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":1175,"url":"https:\/\/geekcommunicant.com\/blog\/2023\/04\/21\/animer-degrade-css\/","url_meta":{"origin":1159,"position":5},"title":"Animer un d\u00e9grad\u00e9 en CSS","author":"geekc","date":"21\/04\/2023","format":false,"excerpt":"La semaine derni\u00e8re je vous ai pr\u00e9sent\u00e9 comment cr\u00e9er un texte en d\u00e9grad\u00e9 avec uniquement du CSS. Aujourd'hui je vais vous montrer comment animer ce d\u00e9grad\u00e9 au survol de la souris. Le principe L'\u00e9l\u00e9ment sur lequel on veut placer un d\u00e9grad\u00e9 ne laisse voir qu'une partie de ce d\u00e9grad\u00e9, et\u2026","rel":"","context":"Dans &quot;CSS&quot;","block_context":{"text":"CSS","link":"https:\/\/geekcommunicant.com\/blog\/category\/css\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"_links":{"self":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1159","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/comments?post=1159"}],"version-history":[{"count":0,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/posts\/1159\/revisions"}],"wp:attachment":[{"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/media?parent=1159"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/categories?post=1159"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/geekcommunicant.com\/blog\/wp-json\/wp\/v2\/tags?post=1159"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}