<ruby id="h7oj1"></ruby>

In this structure:<\/p>\n\n<\/pre>\n

\n
• The checkbox is hidden using display: none; in the CSS, making it invisible to users.<\/li>\n
• A label is used to create a clickable area that will act as the checkbox. The label element is linked to the checkbox by the for=\"_checkbox\" attribute.<\/li>\n
• The div with the ID tick_mark serves as a container for the HTML tick mark, where the tick icon will be rendered when the checkbox is checked.<\/li>\n<\/ul>\n\n

  \n \n \n Designing the Tick Mark with CSS\n<\/h2>\n\n

  Once the basic HTML is in place, we can move on to styling. The goal is to create an attractive checkbox that not only functions properly but also provides a visually satisfying experience for the user.<\/p>\n\n

  \n \n \n Setting the Background and Layout\n<\/h2>\n\n

  The first step is to set the background color of the page to black and remove default margin and padding. This makes the checkbox stand out against the dark background. Here is how we style the body:
  \n<\/p>\n\n

  html,\nbody {\n    height: 100%;\n    background-color: black;\n}\n\nbody {\n    margin: 0;\n}\n\n<\/pre>\n\n\n\n
  これにより、目盛マークが表示され、明確に目立ちます。<\/p>\n\n
  \n  \n  \n  ラベルのスタイルを設定する\n<\/h2>\n\n
  ラベルは円形のボタンの形になります。 border-radius、box-shadow、background-color などの CSS プロパティを使用してスタイルを設定します。さらに、スムーズなトランジション効果がラベルに適用され、よりインタラクティブな雰囲気が生まれます。
  \n<\/p>\n\n
  label {\n    position: absolute;\n    top: 50%;\n    right: 0;\n    left: 0;\n    width: 100px;\n    height: 100px;\n    margin: 0 auto;\n    background-color: #5e2cd3;\n    transform: translateY(-50%);\n    border-radius: 50%;\n    box-shadow: 0 7px 10px #bdb8ff;\n    cursor: pointer;\n    transition: 0.2s ease transform, 0.2s ease background-color,\n      0.2s ease box-shadow;\n    overflow: hidden;\n    z-index: 1;\n}\n\n<\/pre>\n\n\n\n
  このコードはラベルを中央に配置して丸く、奧行きを出すために影を追加します。トランジション効果は、ホバーやクリックのアクションなどの変化をアニメーション化することでユーザー エクスペリエンスを向上させます。<\/p>\n\n
  \n  \n  \n  疑似要素を使用して目盛りを追加する\n<\/h2>\n\n
  このデザインの最も興味深い部分は、チェックボックスをオンにすると表示される HTML チェックマークです。 :before および :after 疑似要素を使用して目盛りアイコンを作成します。最初は、これらの要素は不透明度 0:
   で表示されません。\n<\/p>\n\n
  #tick_mark {\n    position: absolute;\n    top: -1px;\n    right: 0;\n    left: 0;\n    width: 60px;\n    height: 60px;\n    margin: 0 auto;\n    margin-left: 14px;\n    transform: rotateZ(-40deg);\n}\n\n#tick_mark:before,\n#tick_mark:after {\n    content: \"\";\n    position: absolute;\n    background-color: #fff;\n    border-radius: 2px;\n    opacity: 0;\n    transition: 0.2s ease transform, 0.2s ease opacity;\n}\n\n<\/pre>\n\n\n\n
  これらの疑似要素は目盛りの 2 つの部分を作成します。 before 疑似要素はティックの垂直線を形成し、after 要素は水平線を形成します。<\/p>\n
  \n  \n  \n  チェックボックスの選択時にチェックマークをトリガーする\n<\/h2>\n\n
  チェックボックスが選択されている場合、:checked 擬似クラスを使用して背景色を変更し、HTML の目盛り文字を表示します。
  \n<\/p>\n\n
  \n\n\n    \n    \n    \n    \n