21 outils et générateurs CSS pour développeurs web
Les générateurs et outils CSS sont de plus en plus nombreux sur la toile. Certains sont essentiels et facilitent la tâche des développeurs web en leur faisant gagner un gain de temps considérable, en particulier ceux qui génèrent du CSS3. Voici une liste non exhaustive de 21 ressources CSS à connaître et à tester dès maintenant !
(...) Voir l'article completTransition 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.
Petite sélection de "snippets" CSS3
9 morceaux de codes réutilisables qui peuvent s'avérer très pratique dans vos projets.
(...) Voir l'article completAccordéon vertical en CSS3
Accordéon vertical en CSS3 (en réponse à l'article Accordéon horizontal en CSS3
(...) Voir l'article completAccordéon avec Mootools et CSS3
Code pour un menu accordéon en CSS3 et Mootools. Facilement configurable.
(...) 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 completComment faire en CSS un effet de "Polaroid"
Voici, juste pour le plaisir, un petit effet de "Polaroid" fait en CSS.
(...) Voir l'article completUne façon de remplacer le Text-indent:-9999px;
On peut remplacer dès aujourd'hui notre utilisations du text-indent:-9999px;
(...) 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 completSlideshow d'images plein-écran en fond avec CSS3
Petite expérience en CSS3 pour faire un slideshow d'images plein-écrans.
(...) 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.
Animation de "border" sur un bouton en CSS3
C'est juste un petit essai d'animations sur "border" en CSS3. Deux bouttons, deux animations, tout simple et fort sympathique.
(...) Voir l'article completAccordéon horizontal en CSS3
Pour le plaisir, Accordéon horizontal en CSS3 exclusivement, sans javascript.
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
3 bulles de dialogue en CSS3
Voici 3 bulles de dialogue, en CSS3, qui remplace le blockquote.
Multiples outlines en css3 (avec box-shadow)
Voici comment faire de multiples outlines en CSS3 de manière toute simple.
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.
Comment faire une navigation sans javascript avec animation CSS3.
Comment faire une navigation sans javascript avec animation, gradient, ombre en CSS3.
Bouton complexe réalisé en CSS3
Pour le plaisir voici un petit bouton réalisé entièrement en CSS3.
Librairie d'animation CSS3
Petite librairie d'animation CSS3
(...) Voir l'article completAlbum photos empilés en CSS3 et mootools
Voici un petit effet/animation en CSS3 et Mootools d'un album de photos empilés.
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.
Métal brossé en CSS3
Voici tout simplement une méthode pour vous faire de beaux boutons avec une apparence de métal brossé en CSS3.
"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 completCréer une bordure en pointillé (Style couture)
Pour un projet, j'avais besoin d'une petite bordure, style couture, sur un morceau de tissus(image en background). J'ai travaillé à faire une version CSS de ce style pour que mes boîtes soient fluides et que lorsque je les agrandis le résultat reste beau.
Animation CSS3 de type Lightbox
Ce fameux Lightbox de jquery, refait avec seulement du CSS3.
Animation en CSS3 compatible webkit et Moz (partie 2)
Je me suis amusé à faire une petite animation de gallerie d'images en CSS3. Je suis arrivé avec un résultat intéressant, compatible avec les dernières versions de Firefox et Chrome. (...)
Voir l'article complet3 exemples de Text-Shadow complexes
En fouillant un peu sur le web, en jouant un peu avec le CSS3 j'en suis venu à faire 3 styles de Text-shadow très intéressants.(...)
Voir l'article completAnimation en CSS3 compatible webkit et Moz
Je me suis amusé un peu avec les animations CSS3. Je suis arrivé avec un résultat satisfaisant, compatible avec les dernières versions de Firefox et Chrome.
(...) Voir l'article complet"Target" un navigateur en particulier en CSS
C'est juste un petit "reminder" pour pouvoir appliquer un style différent selon le navigateur.
Police de style "emboss" en CSS3
Juste un petit peu de CSS3 pour faire une police d'écriture style "emboss" que j'avais besoin.(...)
Voir l'article completWord-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 completTrois façons simples d'aligner verticalement en CSS
"Vertical align" peut facilement devenir un casse-tête. J'ai travaillé quelques façons de faire pour que ça ne le soit pas.
(...) Voir l'article completMettre un "bevel" sur une image
Il existe une technique appelé le "Double border technique" pour faire un semblant de "bevel". J'ai repensé un peu le code pour travailler avec l'attibut outline.
(...) 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 completComment utiliser Font-face
À l’origine, les déclarations CSS @font-face faisaient partie de la norme CSS 2.0 et étaient supportées aussi bien par Internet Explorer 6 que par Netscape 4. Cette propriété a été abandonné en CSS 2.1 Avec CSS 3, c’est le grand retour en force des fontes web à travers le module CSS Fonts qui redéfinit la méthode d’insertion des fontes personnalisées dans les navigateurs. Les spécifications c’est bien, mais comme d’hab
Carrousel 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 complet