+ Répondre à la discussion Actualité déjà publiée
  1. #1
    Expert éminent sénior

    Avatar de FirePrawn
    Homme Profil pro
    Ingénieur réalisateur
    Inscrit en
    mars 2011
    Messages
    3 174
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 29
    Localisation : France, Haut Rhin (Alsace)

    Informations professionnelles :
    Activité : Ingénieur réalisateur
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2011
    Messages : 3 174
    Points : 21 860
    Points
    21 860

    Par défaut Créer des "flat" checkbox



    Je vous propose aujourd'hui une traduction de l'article anglophone How To Create Flat Checkboxes par Paul Underwood : Créer des "flat" checkbox en CSS3.

    N'hésitez pas à faire part de vos remarques, commentaires ou propositions d'améliorations !

    Créer des "flat" checkbox en CSS3.

    Avant toute chose : lire le mode d'emploi du forum et ses règles.
    Je ne réponds pas aux questions techniques en MP.

  2. #2
    Membre habitué
    Profil pro
    Ingénieur développement logiciels
    Inscrit en
    août 2004
    Messages
    71
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations professionnelles :
    Activité : Ingénieur développement logiciels
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : août 2004
    Messages : 71
    Points : 150
    Points
    150

    Par défaut

    Bon petit tuto, par contre j'ai un résultat imparfait sous Chromium 30 Linux pour la checkbox arrondie non-cochée une fois qu'elle a déjà été cochée (ça se sens que je suis pointilleux ? ). Est-ce juste chez moi ? (je ne peux pas tester avec d'autres OS/navigateurs pour le moment)

    EDIT: j'ai essayé d'aller sur l'outil de développement, mais ça m'enlève l'imperfection au redraw de l'élément quand je le sélectionne

    EDIT2: en fait c'est une erreur de dessin, probablement causée par le navigateur, qui n'arrive pas que sur la non-sélectionnée, mais aussi sur la sélectionnée, en fonction du scroll en cours, juste les bords gauche et droit du cercle blanc qui sautent... peu de chances que ce soit le css donc

  3. #3
    lvr
    lvr est déconnecté
    Membre éprouvé Avatar de lvr
    Profil pro
    Responsable de projet fonctionnel
    Inscrit en
    avril 2006
    Messages
    816
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de projet fonctionnel
    Secteur : Arts - Culture

    Informations forums :
    Inscription : avril 2006
    Messages : 816
    Points : 1 018
    Points
    1 018

    Par défaut

    Bon tuto.

    On voit ici très clairement toutes les limites des solutions HTML5/css.

    L'HTML ne devrait être utilisé que pour les data et le CSS uniquement pour le rendu. Or ici le HTML contient clairement des objets destinés uniquement à la présentation:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    <div class="flatRoundedCheckbox">
      <input type="checkbox" value="1" id="flatOneRoundedCheckbox" name="" />
      <label for="flatOneRoundedCheckbox"></label> <!-- Uniquement pour de la présentation -->
      <div></div> <!-- Uniquement pour de la présentation !-->
    </div>

    Idealement, il faudrait avoir un HTML qui se limite à ceci:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <input type="checkbox" value="1"  class="flatRoundedCheckbox" id="flatOneRoundedCheckbox" name="" />

  4. #4
    Membre expert
    Avatar de Muchos
    Homme Profil pro
    Sans emploi
    Inscrit en
    décembre 2011
    Messages
    1 699
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 31
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Sans emploi
    Secteur : Arts - Culture

    Informations forums :
    Inscription : décembre 2011
    Messages : 1 699
    Points : 3 832
    Points
    3 832
    Billets dans le blog
    6

    Par défaut

    Citation Envoyé par lvr
    On voit ici très clairement toutes les limites des solutions HTML5/css.
    L'HTML ne devrait être utilisé que pour les data et le CSS uniquement pour le rendu.
    Et donc, quel rapport entre la séparation data/rendu et la limite des solutions HTML5/CSS?

    ici le HTML contient clairement des objets destinés uniquement à la présentation
    Oui pour la DIV vide. Non pour le LABEL: c'est juste qu'il n'a pas de contenu et qu'il le devrait.
    Souvenons-nous quand même que c'est une démo…

    ---
    Debug the Web together!

  5. #5
    lvr
    lvr est déconnecté
    Membre éprouvé Avatar de lvr
    Profil pro
    Responsable de projet fonctionnel
    Inscrit en
    avril 2006
    Messages
    816
    Détails du profil
    Informations personnelles :
    Localisation : Belgique

    Informations professionnelles :
    Activité : Responsable de projet fonctionnel
    Secteur : Arts - Culture

    Informations forums :
    Inscription : avril 2006
    Messages : 816
    Points : 1 018
    Points
    1 018

    Par défaut

    Citation Envoyé par Muchos Voir le message
    Non pour le LABEL: c'est juste qu'il n'a pas de contenu et qu'il le devrait.
    Mets-y un petit texte et tu verras bien ce que ça donne

  6. #6
    Membre habitué Avatar de happyboon
    Homme Profil pro
    Étudiant
    Inscrit en
    janvier 2012
    Messages
    186
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Burkina Faso

    Informations professionnelles :
    Activité : Étudiant
    Secteur : Enseignement

    Informations forums :
    Inscription : janvier 2012
    Messages : 186
    Points : 159
    Points
    159

    Par défaut merci

    c'est cool ça marche!

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo