hideout-lastation.com
Paradis Pour Les Concepteurs Et Les Développeurs


Style vos propres effets d'animation Checkbox avec Checkbox.css

Dans un post récent, j'ai couvert une bibliothèque d'animation amusante pour les boutons radio personnalisés, alimenté par CSS .

Cette bibliothèque gratuite a été libérée par 720kb et a rapidement vu une alternative de suivi appelée Checkbox.css . Cela fonctionne de la même manière, sauf qu'il restyles et anime les cases à cocher HTML .

Cette bibliothèque se présente sous la forme d'une suite de bibliothèques avec trois objectifs distincts :

  1. Radiobox.css - animations radio personnalisées
  2. Checkbox.css - animations de cases à cocher personnalisées
  3. Checked.css - styles et anime les éléments sélectionnés existants (radios et cases à cocher)

Tous sont développés par la même équipe et fonctionnent de manière similaire. Mais vous devrez inclure chaque bibliothèque individuellement si vous voulez obtenir tous les effets.

Jetez un coup d'œil sur le GitHub Checkbox.css pour voir certaines de ces fonctionnalités et comment elles fonctionnent. Par défaut, ils dépendent des transformations 2D et des transitions CSS, en fonction du support du navigateur.

Aucune de ces bibliothèques ne dispose de méthodes de repli JS, elles ne fonctionnent donc que pour les animations alimentées par CSS . Mais, un coup d'œil rapide à la page de démonstration devrait vous avoir ravi d'ajouter ces animations à votre page.

Le processus ne peut pas être plus simple et nécessite peu ou pas de connaissances en codage (bien qu'il soit toujours utile d'en avoir).

Une fois que la feuille de style CSS est sur votre page, ajoutez simplement une classe à votre case à cocher avec le format checkbox-x où le "x" représente l'animation que vous voulez . Par exemple, voici le code de l'effet d'animation "saut":

La meilleure partie est comment cette bibliothèque peut fonctionner en même temps que le format du bouton radio . Je recommanderais certainement la bibliothèque Checked.css si vous voulez animer des éléments sélectionnés existants .

Ne laissez pas toutes ces dépendances vous effrayer. Presque tout le monde peut mettre en place la bibliothèque Checkbox.css ou l'une des bibliothèques connexes, tout à partir de zéro avec un petit copier-coller .

Et, si vous avez des questions ou des suggestions pour ce pack de bibliothèques d'animation d'entrée, envoyez un message aux créateurs via leur site ou sur Twitter @ 720kb_.

Vitrine des conceptions fraîches de carte de visite de hipster

Vitrine des conceptions fraîches de carte de visite de hipster

Une carte de visite a un objectif simple: elle porte votre nom, le nom de votre entreprise ou de votre produit, et les coordonnées du client si celui-ci veut vous contacter. De nos jours, les cartes de visite sont uniques et exceptionnelles, reflétant les personnalités, les caprices et les talents de leurs propriétaires depuis que les créatifs se sont impliqués et ont complètement changé le jeu.Au lieu

(Conseils techniques et de conception)

Premiers pas avec Webpack [avec un exemple de projet]

Premiers pas avec Webpack [avec un exemple de projet]

Webpack est un bundler de module qui facilite la construction d'applications JavaScript complexes. Il a gagné en popularité depuis que la communauté React l'a choisi comme principal outil de construction. Webpack n'est ni gestionnaire de paquets, ni gestionnaire de tâches car il utilise une approche différente (plus avancée), mais son objectif est également de mettre en place un processus de construction dynamique .Webpac

(Conseils techniques et de conception)