• Inicio
  • Buscar
  • Ingresar
  • Registrarse

    Samsung duplica su eficiencia en sus nuevos chips de 3 nanómetros

    • Hack x Crack - Comunidad de Seguridad informática »
    • Programación »
    • Programación Web »
    • Personalizar checkboxes con CSS
    • Imprimir
    Páginas: [1]   Ir Abajo

    Autor Tema: Personalizar checkboxes con CSS  (Leído 2454 veces)

    Desconectado R3LI4NT

    • { L4 } Geek
    • ****
    • Mensajes: 306
    • El poder del usuario radica en su ANONIMATO.
      • Ver Perfil
      • GitHub
    Personalizar checkboxes con CSS
    « en: Septiembre 08, 2021, 03:06:42 am »
    Personalizar checkboxes con CSS

    Código HTML:

    Código: Text
    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Checkboxes</title>
    8.     <link rel="stylesheet" href="style.css">
    9.     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css">
    10. </head>
    11. <body>
    12.         <label>
    13.             <input type="checkbox">
    14.             <span class="btn"></span>
    15.             <i class="fa fa-power-off icon"></i>
    16.         </label>
    17.        
    18.         <label>
    19.             <input type="checkbox">
    20.             <span class="btn"></span>
    21.             <i class="fab fa-bluetooth-b icon"></i>
    22.         </label>
    23.    
    24.         <label>
    25.             <input type="checkbox">
    26.             <span class="btn"></span>
    27.             <i class="fas fa-plane icon"></i>
    28.         </label>  
    29.    
    30.         <label>
    31.             <input type="checkbox">
    32.             <span class="btn"></span>
    33.             <i class="fas fa-bell icon"></i>
    34.         </label>
    35.        
    36.         <label>
    37.             <input type="checkbox">
    38.             <span class="btn"></span>
    39.             <i class="fas fa-battery-full icon"></i>
    40.         </label>
    41.        
    42.         <label>
    43.             <input type="checkbox">
    44.             <span class="btn"></span>
    45.             <i class="fas fa-wifi icon"></i>
    46.         </label>
    47. </body>
    48. </html>
    49.  


    Código CSS:

    Código: CSS
    1. * {
    2.     padding: 0;
    3.     margin: 0;
    4.     box-sizing: border-box;
    5. }
    6.  
    7. body {
    8.     height: 100vh;
    9.     width: 100%;
    10.     justify-content: center;
    11.     align-items: center;
    12.     display: grid;
    13.     grid-template-columns: repeat(3, 8em);  
    14.     background: #242526;
    15. }
    16.  
    17. label {
    18.     position: relative;
    19.     width: 80px;
    20.     height: 80px;
    21.     cursor: pointer;
    22.     border-radius: 50%;
    23.     margin: 0 20px;
    24. }
    25.  
    26. label .btn {
    27.     position: absolute;
    28.     top: 0;
    29.     left: 0;
    30.     width: 100%;
    31.     height: 100%;
    32.     box-shadow: 0 2px 4px rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    33.     inset 0 -1px 5px rgba(255, 255, 255,.7) , 0 0 2px 2px #000,
    34.     0 0 2px 0px #0F0F0F;
    35.     border-radius: 50%;
    36.     background: #1A1A1A;
    37. }
    38.  
    39. label input[type='checkbox'] {
    40.     -webkit-appearance: none;
    41. }
    42.  
    43. label input[type='checkbox']:checked ~ .btn
    44. {
    45.     box-shadow: 0 0 0 rgba(0,0,0,1), inset 0 -1px 6px rgba(0,0,0,1),
    46.     inset 1px 1px rgba(255, 255, 255,.1), 0 0 0 2px #000,
    47.     0 0 0 3px #0F0F0F, 0 0 15px 8px #00B9DE;
    48.     font-size: 10px;
    49. }
    50.  
    51. label input[type='checkbox']:checked ~ .fa {
    52.     color: #00B9DE;
    53.     text-shadow: 0 0 13px #00B9DE,
    54.                 0 0 25px #00B9DE;
    55. }
    56.  
    57. label input[type='checkbox']:checked ~ .fab {
    58.     color: #00B9DE;
    59.     text-shadow: 0 0 13px #00B9DE,
    60.                 0 0 25px #00B9DE;
    61. }
    62.  
    63. label input[type='checkbox']:checked ~ .fas {
    64.     color: #00B9DE;
    65.     text-shadow: 0 0 13px #00B9DE,
    66.                 0 0 25px #00B9DE;
    67. }
    68.  
    69. label .icon {
    70.     position: absolute;
    71.     top: 50%;
    72.     left: 50%;
    73.     transform: translate(-50%,-50%);
    74.     font-size: 2.1em;
    75. }
    76.  
    77. label .icon {
    78.     position: absolute;
    79.     top: 50%;
    80.     left: 50%;
    81.     transform: translate(-50%,-50%);
    82.     font-size: 2.2em;
    83. }
    84.  
    85. label .fa-plane {
    86.     font-size: 1.9em;
    87. }
    88.  
    89. label .fa-bell {
    90.     font-size: 1.9em;
    91. }
    92.  
    93. label .fa-battery-full {
    94.     font-size: 1.9em;
    95. }
    96.  
    97. label .fa-wifi {
    98.     font-size: 1.9em;
    99. }
    100.  





    El pseudo-clase ":checked" representa el radio (checkbox) al momento de ser presionado.
    En línea

    No contesto dudas por MP, si las tienes, las planteas en el foro.

    Road To Hacking v3: https://github.com/R3LI4NT/road-to-hacking

    Desconectado poseidon

    • Moderador
    • { L4 } Geek
    • **
    • Mensajes: 353
    • Malware undetector!
      • Ver Perfil
    Re:Personalizar checkboxes con CSS
    « Respuesta #1 en: Septiembre 09, 2021, 08:05:23 pm »
    Estan muy chulos, me entran ganas de dormir mirandolos ajaja
    En línea

    Desconectado R3LI4NT

    • { L4 } Geek
    • ****
    • Mensajes: 306
    • El poder del usuario radica en su ANONIMATO.
      • Ver Perfil
      • GitHub
    Re:Personalizar checkboxes con CSS
    « Respuesta #2 en: Septiembre 09, 2021, 08:37:12 pm »
    Cita de: poseidon en Septiembre 09, 2021, 08:05:23 pm
    Estan muy chulos, me entran ganas de dormir mirandolos ajaja
    Ahí tenés el icono del avión para ponerte en "modo avión" jajaj. Están buenos para hacer un panel de control, quedaría chulo.
    En línea

    No contesto dudas por MP, si las tienes, las planteas en el foro.

    Road To Hacking v3: https://github.com/R3LI4NT/road-to-hacking

    • Imprimir
    Páginas: [1]   Ir Arriba
    • Hack x Crack - Comunidad de Seguridad informática »
    • Programación »
    • Programación Web »
    • Personalizar checkboxes con CSS
     

    • SMF | SMF © 2013, Simple Machines
    • XHTML
    • RSS
    • WAP2
    Va un mudo y le dice a un sordo: Hack x Crack usa cookies. Pues eso... Learn more