IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

Publications (X)HTML et CSS Discussion :

Galerie au clic sans JavaScript


Sujet :

Publications (X)HTML et CSS

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 207
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 207
    Par défaut Galerie au clic sans JavaScript
    Bonjour,

    je vous propose un article Galerie au clic sans JavaScript.

    Dans celui-ci nous allons voir comment réaliser une galerie fonctionnant au clic de la souris et ce sans utiliser JavaScript, uniquement sur base de sélecteur et pseudoclasse CSS3.

    N'hésitez pas à faire part de vos remarques ou commentaires concernant cet article.

    Bonne lecture.

    Galerie au clic sans JavaScript

  2. #2
    Membre extrêmement actif
    Avatar de Muchos
    Homme Profil pro
    Enseignant
    Inscrit en
    Décembre 2011
    Messages
    1 704
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 39
    Localisation : France, Ardennes (Champagne Ardenne)

    Informations professionnelles :
    Activité : Enseignant
    Secteur : Arts - Culture

    Informations forums :
    Inscription : Décembre 2011
    Messages : 1 704
    Billets dans le blog
    6
    Par défaut
    Excellente idée et excellent rendu !
    De plus, il me semble qu'il s'agit d'une utilisation pertinente du couple LABEL/INPUT.
    Bravo en tous cas !

  3. #3
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    Super article

  4. #4
    Invité
    Invité(e)
    Par défaut
    Du plus bel effet !
    Je crois déjà savoir où m'en servir...

    Il faut cependant, je pense, éviter les "grandes galeries" (avec beaucoup de photos) : les images petites et grandes étant chargées d'entrée...

    Malheureusement, ne semble pas fonctionner sur mon smartphone (Samsung Galaxy Ace / Android 2.3.6) : la grande photo ne change pas au clic.

  5. #5
    Rédacteur/Modérateur

    Avatar de SylvainPV
    Profil pro
    Inscrit en
    Novembre 2012
    Messages
    3 375
    Détails du profil
    Informations personnelles :
    Localisation : France

    Informations forums :
    Inscription : Novembre 2012
    Messages : 3 375
    Par défaut
    Bien écrit et rendu final très sympa

    Pour le problème du chargement soulevé par jreaux62, est-ce que par hasard on ne pourrait pas régler le problème en utilisant les pseudos-attributs before/after ?
    Code css : Sélectionner tout - Visualiser dans une fenêtre à part
    :checked + div:after { content: url('image.jpg') }

    à tester pour voir le comportement des navigateurs...

  6. #6
    Membre Expert
    Avatar de rodolphebrd
    Homme Profil pro
    Indépendant
    Inscrit en
    Novembre 2012
    Messages
    2 336
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Indépendant
    Secteur : Conseil

    Informations forums :
    Inscription : Novembre 2012
    Messages : 2 336
    Par défaut
    :before et :after sont plutôt des pseudo-éléments.

Discussions similaires

  1. [CSS 3] Galerie au clic sans JavaScript
    Par NoSmoking dans le forum Mise en page CSS
    Réponses: 3
    Dernier message: 22/07/2013, 17h44

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