Transition d'images pour gallerie en Mootools
Pour le travail, j'ai travaillé sur des animations de transition d'images pour une galerie. Voici le code mootools, html et css pour ces animations.
(...) Voir l'article completDébuter les transitions seulement quand la page est téléchargée
Voici une traduction d'un article très intéressant et pratique.
Transitions Only After Page Load de Cris Coyier
(...) Voir l'article completDesign réceptif en 3 étapes
Quelques personnes me sont revenus avec des interrogations sur le design réceptif, soit le "Responsive Design". Pour vous aider à rapidement débuter avec le design réceptif, je vous présente une méthode simple en 3 étapes.
Accordéon vertical en CSS3
Accordéon vertical en CSS3 (en réponse à l'article Accordéon horizontal en CSS3
(...) Voir l'article completLargeur minimum de paragraphe dans une disposition fluide
Il m'est souvent arrivé d'avoir des problèmes avec les paragraphes dans des "layouts" fluides. Je suis tombé sur un article très intéressant qui démontre quelques méthodes pour contrer ce problème.
(...) Voir l'article complet6 meilleurs Frameworks HTML5/CSS3 pour des présentations Slideshow
Dans cette liste nous allons couvrir quelques-uns des meilleurs "framework" qui permettent de créer des présentations rapidement et simplement.
(...) Voir l'article completFormulaires HTML5 : placeholder, required, pattern et validation
Un artcile complet sur les Formulaires HTML5 : placeholder, required, pattern et validation.
(...) Voir l'article completNouvelle propriété CSS3 pour l'adaptation du texte.
J'ai découvert un super texte sur de nouvelles propriétés CSS3, comme il était en anglais je l'ai traduit pour vous. L'original se trouve sur impressivewebs.
Portfolio/Galerie avec Navigation en Mootools et CSS3
Encore une fois, j'ai travaillé sur la confection d'un portfolio. Cette fois-ci, un portfolio/galerie plein écran avec navigation en Mootools et CSS3 fonctionnel sur tous les navigateurs. (IE ne peut cependant afficher les petites subtilités CSS3.)
Différence entre pseudo-élément et pseudo-classe
Comment résoudre le problème de différenciation entre la pseudo-classe et le pseudo-élément en CSS.
(...) Voir l'article completBarre de progrès en HTML5 et CSS3
Voici comment faire une barre de progrès avec petite animation en HTML5 et CSS3.
CSS3 Media queries ou comment bien cibler
Un "header" pour bien cibler les ordinateurs et mobiles et leur différents affichage.
Menu avec animation d'images en Mootools (version 1.1)
Après quelques petits ajouts, voici la version 1.1 de mon menu avec animation d'images en Mootools.
25 secrets des outils de développement de navigateur
25 secrets des outils de développement de navigateur
Image plein écran en "background"
Quelques fois, nous avons besoin d'une façon vite d'avoir une image plein écran en "background". J'espère que dans ces moments vous n'utilisez pas de Javascript, parce que c'est si simple à faire avec seulement du CSS.
Bouton complexe réalisé en CSS3
Pour le plaisir voici un petit bouton réalisé entièrement en CSS3.
Solution de compatibilité en Mootools pour Placeholder
Il existe beaucoup de façons pour utiliser dès maintenant l'attribut PLACEHOLDER. En voici une, toute simple, en Mootools.
Album photos empilés en CSS3 et mootools
Voici un petit effet/animation en CSS3 et Mootools d'un album de photos empilés.
3 façons de cibler les appareils mobiles
Cet article va discuter de comment cibler les appareils mobiles et d'afficher un contenu différent, différentes feuilles de styles et même rediriger à un URL mobile.
Comment les navigateurs font le rendu des différentes valeurs de style CSS Border ?
Voici une traduction de l'excellent article de Louis Lazaris sur son site : impressivewebs.com, ce dernier démontre les différences entre les différents rendus des navigateurs pour les bordures.
Comment utiliser SASS et SCSS sur un serveur distant
Comment utiliser SASS et SCSS sur un serveur distant. Méthode pour pouvoir travailler sur un SCSS, sauvegarder et rafraîchir votre page et avoir le CSS généré.
Boutons fluides avec image transparente en CSS
Un petit post pour des boutons fluides avec images transparentes.
(...) Voir l'article completPortfolio avec description en Hover
Un portfolio tout simple en CSS qui laisse apparaître le titre et la description de l'image lorsque le curseur passe par-dessus cette dernière.
"Tab Bar" en CSS3 (partie 2)
Nouveaux onglets (tabs) fait en CSS3, fonctionnels sans Javascript et sans images sprites.
"Tab Bar" en CSS
Vous en avez sûrement déjà vu, ces petits onglets en haut d'une boîte de texte qui servent à partager du texte. Nous allons donc, très simplement, créer ces onglets fluides.
(...) Voir l'article complet8 trucs pour commencer le HTML5
Voici quelques trucs pour commencer et comprendre le HTML5. Cette liste n'est pas exhaustive, il manque beaucoup de nouveaux éléments, elle ne se veut qu'un aide pour bien commencer.
Word-Wrap: Forcer le "wrappage" d'un texte
La propriété word-wrap est rarement utilisée mais reste une propriété CSS extrêmement utile. Vous pouvez forcer un long text à "wrapper" sur une nouvelle ligne en spécifiant break-word avec une propriété word-wrap.(...)
Voir l'article completTooltip en html5 utilisant les pseudos elements
Quand arrive le temps de faire un petit Tooltip pour un site vous utilisez quoi ? Il existe plusieurs moyen, habituellement le plus fiable et le plus utilisé est d'ajouter du javascript avec une librairie (mootools ou Jquery). J'ai travaillé pour en créé un en html5 et CSS3.
Vidéo player élastique en HTML5
Juste un petit exemple pour mettre un vidéo en HTML5 de manière fluide.
(...) Voir l'article completBandes qui font la largeur du navigateur
Pour vous faire de beaux "header" qui font la largeur du navigateur.(...)
Voir l'article completCarrousel pour gallerie en Mootools
J'ai beaucoup fouillé sur internet pour un carrousel en Mootools, sans grand succès. Sois ces carrousels ne fonctionnaient pas comme je voulais, sois ils ne fonctionnaient pas tout court. J'ai donc décidé d'en faire un comme je le voulais. Comme j'ai chercher pour celui et que je n'ai rien trouvé, j'ai décidé de vous le partager.
(...) Voir l'article complet1140 CSS Grid - Fluide pour mobile
Si vous avez un site à plusieurs colonnes, il faut absolument jetter un oeil à 1140 CSS Grid pris sur ce site http://cssgrid.net/.
(...) Voir l'article completHTML5 Boilerplate, un template puissant et complet
HTML5 Boilerplate est un template (HTML+CSS+JS+...) lancé par Paul Irish (Modernizr) et Divya Manian. Il contient toutes les bonnes pratiques du moment en terme de performances, de compatibilité inter-navigateurs, de JavaScript, avec un soupçon d'accessibilité (si utilisé à bon escient), voire de Flash.
(...) Voir l'article completBoîtes avec pattern de tissus en CSS3
J'ai voulu faire des boites qui reprenaient le style du logo ci-haut. J'ai donc fait en CSS3 un pattern, j'y ai ajouté un border-radius et un box-shadow.
(...) Voir l'article completSite pour du Modular Grid Pattern
Application qui aide à créer une grille modulaire dans photoshop.(...)
Voir l'article complet