Semblerait que votre Javascript est désactivé. Ce site requiert Javascript pour son bon fonctionnement.

Les performances vues des CSS

La production de CSS n’échappe pas à cette quête de rapidité

Il est inutile de se le cacher : la contrainte des performances est devenue vitale et probablement une des contraintes les plus critiques des sites internet modernes.

(...)

Voir l'article complet
 

Header pleine page en CSS

Petit test rapide de l'unité VH (viewport height) pour construire un visuel de site avec header et section en pleine page.

(...)

Voir l'article complet
 

Outil pour calculer le "aspect ratio"

Voici donc un petit outil pour calculer et garder le ratio. Il vous permet de choisir votre propre ratio, de définir des dimensions, il vous donne alors les ratios plus grand et plus petit. 

(...)

Voir l'article complet
 

Petit compteur rapide pour ses maquettes

Petit exemple de CSS pour ajouter rapidement des chiffres dans chaque boîte d'une maquette.

(...)

Voir l'article complet
 

Simple petit parallax en mootools

Code CSS, HTML et mootools pour un parallax très simple.

(...)

Voir l'article complet
 

Grosseur de la typographie suivant le « viewport »

CSS3 a ajouté de nouvelles valeurs pour ajuster la grosseur des choses en relation avec la grosseur du « viewport » : vw, vh et vmim.

(...)

Voir l'article complet
 

Avoir un lecteur vidéo avec un ratio intrinsèque

Petite solution bien simple pour que notre lecteur vidéo garde son ratio dans un design responsive.

(...)

Voir l'article complet
 

Petit test de transition sur le z-index

Petit test de transition sur le z-index

(...)

Voir l'article complet
 

Guide 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 complet
 

Petit 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 complet
 

Jouer 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 complet
 

Ma 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 complet
 

Les 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 complet
 

Comment 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 complet
 

Split 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 complet
 

Le 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 complet
 

Guide 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 complet
 

Comment mimer un "mousedown" en CSS3

Petit truc super simple pour mimer un effet de "mousedown".

(...)

Voir l'article complet
 

Petit Slideshow Mootools

Un petit slideshow très simple en Mootools.

(...)

Voir l'article complet
 

Ré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.

(...)

Voir l'article complet
 

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 complet
 

Menu avec vidéo sous les boutons en HTML5

Menu avec images survolées qui laisse apparaître un vidéo en HTML5.

(...)

Voir l'article complet
 

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.

(...)

Voir l'article complet
 

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 complet
 

Imbriquage 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 complet
 

Blockquotes sans images

Voici un petit bout de code tout simple pour faire un blockquote sans utilisé d'images.

(...)

Voir l'article complet
 

Pochoir 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 complet
 

Hover effect 3d en css3

Petit effet 3d sur le hover en CSS3

(...)

Voir l'article complet
 

Multiple images avec CSS et background-image

Nouvelle syntaxe qui nous permet d'avoir multiple image en background-image avec CSS

(...)

Voir l'article complet
 

Comment 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 complet
 

Test 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 complet
 

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 complet
 

Transition 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 complet
 

Dé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 complet
 

Design 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.

(...)

Voir l'article complet
 

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 complet
 

Accordéon vertical en CSS3

Accordéon vertical en CSS3 (en réponse à l'article Accordéon horizontal en CSS3

(...)

Voir l'article complet
 

Accordéon avec Mootools et CSS3

Code pour un menu accordéon en CSS3 et Mootools. Facilement configurable.

(...)

Voir l'article complet
 

Largeur 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 complet
 

Comment faire en CSS un effet de "Polaroid"

Voici, juste pour le plaisir, un petit effet de "Polaroid" fait en CSS.

(...)

Voir l'article complet
 

Une façon de remplacer le Text-indent:-9999px;

On peut remplacer dès aujourd'hui notre utilisations du text-indent:-9999px;

(...)

Voir l'article complet
 

6 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 complet
 

Formulaires HTML5 : placeholder, required, pattern et validation

Un artcile complet sur les Formulaires HTML5 : placeholder, required, pattern et validation.

(...)

Voir l'article complet
 

Nouvelle 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.


(...)

Voir l'article complet
 

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.)

(...)

Voir l'article complet
 

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 complet
 

Slideshow d'images plein-écran en fond avec CSS3

Petite expérience en CSS3 pour faire un slideshow d'images plein-écrans.

(...)

Voir l'article complet
 

Barre de progrès en HTML5 et CSS3

Voici comment faire une barre de progrès avec petite animation en HTML5 et CSS3.

(...)

Voir l'article complet
 

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 complet
 

Accordéon horizontal en CSS3

Pour le plaisir, Accordéon horizontal en CSS3 exclusivement, sans javascript.

(...)

Voir l'article complet
 

CSS3 Media queries ou comment bien cibler

Un "header" pour bien cibler les ordinateurs et mobiles et leur différents affichage.

(...)

Voir l'article complet
 

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.

(...)

Voir l'article complet
 

25 secrets des outils de développement de navigateur

25 secrets des outils de développement de navigateur

(...)

Voir l'article complet
 

3 bulles de dialogue en CSS3

Voici 3 bulles de dialogue, en CSS3, qui remplace le blockquote.

(...)

Voir l'article complet
 

Multiples outlines en css3 (avec box-shadow)

Voici comment faire de multiples outlines en CSS3 de manière toute simple.

(...)

Voir l'article complet
 

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.

(...)

Voir l'article complet
 

Comment faire une navigation sans javascript avec animation CSS3.

Comment faire une navigation sans javascript avec animation, gradient, ombre en  CSS3.

(...)

Voir l'article complet
 

Bouton complexe réalisé en CSS3

Pour le plaisir voici un petit bouton réalisé entièrement en CSS3.

(...)

Voir l'article complet
 

Librairie d'animation CSS3

Petite librairie d'animation CSS3

(...)

Voir l'article complet
 

Album photos empilés en CSS3 et mootools

Voici un petit effet/animation en CSS3 et Mootools d'un album de photos empilés.

(...)

Voir l'article complet
 

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.

(...)

Voir l'article complet
 

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é.

(...)

Voir l'article complet
 

Boutons fluides avec image transparente en CSS

Un petit post pour des boutons fluides avec images transparentes.

(...)

Voir l'article complet
 

Portfolio 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.

(...)

Voir l'article complet
 

"Tab Bar" en CSS3 (partie 2)

Nouveaux onglets (tabs) fait en CSS3, fonctionnels sans Javascript et sans images sprites.

(...)

Voir l'article complet
 

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.

(...)

Voir l'article complet
 

"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 complet
 

Cré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.

(...)

Voir l'article complet
 

Animation CSS3 de type Lightbox

Ce fameux Lightbox de jquery, refait avec seulement du CSS3.

(...)

Voir l'article complet
 

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 complet
 

3 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 complet
 

Animation 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.

(...)

Voir l'article complet
 

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 complet
 

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 complet
 

Tooltip 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.

(...)

Voir l'article complet
 

Vidéo player élastique en HTML5

Juste un petit exemple pour mettre un vidéo en HTML5 de manière fluide.

(...)

Voir l'article complet
 

Trois 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 complet
 

Mettre 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 complet
 

Bandes qui font la largeur du navigateur

Pour vous faire de beaux "header" qui font la largeur du navigateur.(...)

Voir l'article complet
 

Comment 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

(...)

Voir l'article complet
 

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 complet
 

1140 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 complet
 

HTML5 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 complet
 

Boî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
 

 
Notice: Undefined variable: create_by in /home/content/45/6907545/html/beta/inc/footer.inc.php on line 19 Notice: Undefined variable: create_by in /home/content/45/6907545/html/beta/inc/footer.inc.php on line 40