Petit test de transition sur le z-index
Petit test de transition sur le z-index
(...) Voir l'article completGuide pour débutant sur le Responsive web design
Traduction de l'article Beginner’s Guide to Responsive Web Design de Nick Pettit.
(...) Voir l'article completPetit ombrage en tête de page
Voici un petit bout de code pour ajouter une ombre à votre en-tête de site.
(...) Voir l'article completJouer avec le curseur
Ceci n'est qu'une référence de curseur que j'ai placé ici pour que lorsque j'en ai de besoin, je puisse la retrouver facilement.
(...) Voir l'article completMa critique du nouveau site Billboard.com
Billboard a lancé, sans grande pompe un nouveau site cette semaine. En effet, ils étaient plus que due et d’emblée
(...) Voir l'article completLes bases de l'API de dessin 2D et le canvas (partie 1)
Canvas fait maintenant parti des spécifications du HTML5. Voici les bases pour savoir comment l'utiliser.
(...) Voir l'article completComment utiliser Less, Sass et Stylus sur un serveur distant.
Voici une méthode simple et efficace et qui peut permettre l'utilisation de frameworks.
(...) Voir l'article completSplit image en hover
J'ai décidé de faire le code pour faire un "split" image en hover et pour qu'il soit fonctionnel sur tous les navigateurs.
(...) Voir l'article completLe modèle tabulaire en CSS (pour ie6-7)
Comment utiliser les propriétés de display:table dans IE 6 - 7.
(...) Voir l'article complet"Pop-up bar" en CSS3 et HTML5 classList API
"Pop-up bar" le plus simple possible. Il est animé en CSS3 en utilisant la propriété transition. Pour que ces transitions s'effectuent, j'ai mis du Vanilla Javascript (ce qui permet de l'utiliser partout sans entrer en conflit avec une librairie Javascript) pour ajouter et enlever une classe sur l'élément "popup".
(...) Voir l'article completGuide pratique et modèles de web apps IOS safari
Partage de mes résultats sur la confection d'une web app IOS dans l'espoir de vous épargner une expérience frustrante.
(...) Voir l'article completComment mimer un "mousedown" en CSS3
Petit truc super simple pour mimer un effet de "mousedown".
(...) Voir l'article completPetit Slideshow Mootools
Un petit slideshow très simple en Mootools.
(...) Voir l'article completRésolution de problèmes multimédias HTML5 liés à l'audio et au vidéo
Ian Devlin a écrit un article sur html5doctor.com très intéressant sur les problèmes rencontrés lors de l'intégration HTML5 du vidéo et de l'audio.
Animation d'alerte sur bouton en CSS3
Voici quelques animations d'alertes effectuées sur un bouton. Ces animations sont construites en CSS3.
(...) Voir l'article completMenu avec vidéo sous les boutons en HTML5
Menu avec images survolées qui laisse apparaître un vidéo en HTML5.
Sous-menu animé avec Mootools
Ce sous-menu s'ouvre lorsque l'utilisateur se rend sur le menu. Lorsqu'il se déplace sur chacun des éléments du menu, une animation va déplacer les sous-éléments verticalement.
Effet de loupe sur image avec Mootools et CSS3
Tutoriel pour créer un effet de loupe sur image avec Mootools et CSS3
(...) Voir l'article completImbriquage de tweets et intégration avec Masonry
Javascript et css pour pouvoir se faire un "wall" de tweets imbriqués avec intégration de Masonry.
(...) Voir l'article completBlockquotes sans images
Voici un petit bout de code tout simple pour faire un blockquote sans utilisé d'images.
(...) Voir l'article completPochoir de page web sur image
Je me suis amusé à tenter de trouver une nouvelle façon de présenter un mixte d'image et de structure web. Durant mes essaies, je suis arrivé à un résultat de pochoir que j'ai trouvé très intéressant.
(...) Voir l'article completHover effect 3d en css3
Petit effet 3d sur le hover en CSS3
(...) Voir l'article completMultiple images avec CSS et background-image
Nouvelle syntaxe qui nous permet d'avoir multiple image en background-image avec CSS
(...) Voir l'article completComment créer un lecteur audio HTML5
Ce tutoriel va démontrer comment s'interfacer avec un lecteur audio HTML5. On connait tous le lecteur mais je veux aller complètement ailleurs ici. Évidemment, tous les fureteurs ne rendent pas le même résultat visuellement et vous ne voulez pas briser votre design.
(...) Voir l'article completTest de navigateur, PHP, JS et Flash
Il arrive souvent que l'on développe un site web et que chez un client il n'obtient plus le résultat escompté. C'est alors quelques fois très ardu de savoir ce qui peut causer ce problème. Voici un petit outil pour vous aider à déterminer la cause.
(...) Voir l'article complet21 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 galerie 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 galerie 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 galerie 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