page-translate

Créer un effet d'ombrage sur une photo en CSS

CSS / HTML / trucs et astuces

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Le CSS peut nous sauver du temps. Beaucoup de temps.

Je travaillais sur un site, l'autre jour, et je remarque que des dizaines de photos doivent être intégrées dans une galerie. Parfait, me dis-je. Or, je remarque, sur la maquette du designer, que les miniatures doivent avoir un ombrage pour chacune d'elle. Moi qui suis paresseux ne voulais surtout pas découper chaque image pour les miniatures !

J'ai donc pris chaque photo en version "grande" et les ai réduites avec du HTML pur et simple, tout en ajoutant un effet d'ombrage en CSS.

LIRE L'ARTICLE

Donner de la transparence à une image en CSS

CSS / CSS3 / HTML / opacity / transparence

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Il est très facile de donner de la transparence à une image ; pas besoin de modifier celle-ci dans Photoshop !

Grâce à la magie du CSS, nous pouvons modifier la transparence d'une image sur-le-champs. En effet, comme vous pouvez le constater dans l'exemple suivant, les fleurs de lys ont l'air différentes mais en réalité, elles sont pareilles. C'est simplement qu'un style CSS a été appliqué sur l'image de droite, ce qui fait qu'elle apparaît différement.

LIRE L'ARTICLE

Ajouter un champs requis en HTML5

formulaire / HTML5 / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

HTML5 est actuellement en cours de développement pour devenir la prochaine grande révision de la norme HTML.

LIRE L'ARTICLE

Empêcher la mise en cache du CSS et JS

HTML / PHP / trucs et astuces

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Par défaut, tout fureteur met en cache (caching) les fichiers CSS et Javascript (JS).

Si vous voulez empêcher qu'un navigateur mette en cache les fichiers CSS et JS, il vous suffit d'appliquer ce truc très simple. Lorsque vous appelez vos fichier CSS et JS dans l'entête HTML de votre page, ajoutez la date tel que démontré ici :

LIRE L'ARTICLE

Créer un bouton avec les coins ronds sans image pour Explorer, Firefox, Chrome, Safari

bouton / code / CSS / CSS2 / CSS3 / Explorer / Firefox / safari / style / truc

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Dans un article antérieur, j'ai déjà parlé d'un didactitiel pour créer des boutons de formulaire avec les coins ronds. La technique utilisée était pour vanter les mérites du CSS3, mais à quoi bon l'utiliser si la majorité des fureteurs ne prennent pas encore en charge toutes ces nouvelles propriétés de CSS3 ?

Firefox, Chrome, Safari, Opera

Sous Firefox, Chrome et Safari, il est simple de créer un bouton aux coins ronds (si vous ne le voyez pas, c'est que vous n'avez pas un fureteur qui le supporte !) :

LIRE L'ARTICLE

Lien actif d'un menu en PHP et CSS

didacticiel / HTML / menu / PHP / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Il est plutôt facile de donner le style que l'on veut dans un site programmé exclusivement en HTML et CSS. Par exemple, pour donner un style différent au lien "actif" d'un menu, il suffirait d'écrire, pour la page en question :

LIRE L'ARTICLE

Validation d'un numéro de téléphone en Javascript

didacticiel / HTML / Javascript / script / validation

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

La sécurité d'un site Web peut être compromise si aucune validation des formulaires n'est faite. Il est donc important de normaliser les valeurs reçues, alors voici un petit script qui valide un numéro de téléphone.

LIRE L'ARTICLE

Convertir une police en Javascript

CSS / Javascript / police / typographie / Web

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

La typographie est un domaine de la conception web qui peut s'avérer plus technique que nous l'aurions cru. Avec le Flash, nous pouvons utiliser la police que nous voulons, mais puisque cette technologie est de moins en moins utilisées vues ses lacunes SEO, nous devons souvent user de créativité pour utiliser une typo personnalisées dans un site Web.

LIRE L'ARTICLE

Envoyer un courriel HTML en PHP

didacticiel / HTML / PHP / script

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Envoyer un courriel (ou email) est vraiment simple grâce à la fonction PHP mail(). Cette fonction peut spécifier les paramètres suivants :

LIRE L'ARTICLE

Créer un compte à rebours en Javascript

didacticiel / Javascript / script

Important: Nous venons de migrer d'un site Wordpress vers Drupal alors il se peut qu'il y ait des liens brisés, des images qui ne s'affichent pas ou encore du code mal formatté. Nous travaillons fort pour régler ces problèmes le plus tôt possible.

Un compteur à rebours, ou timer en anglais, est une horlorge qui calcule le temps restant, en années, mois, jours, minutes et secondes, avant une certaine date. Une fois le compteur à zéro, une action peut être exécutée (par exemple, écrire un message).

LIRE L'ARTICLE

Pages