page-translate

Définir des règles CSS pour des mobiles uniquement

CSS / media queries / mobile

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 façon la plus simple de cibler des navigateurs mobiles (téléphone, tablette), est d'utiliser des media queries. En fait, nous ne ciblons pas directement le navigateur mobile mais plutôt la taille de celui-ci, ce qui nous permet de déduire que nous avons affaire à un utilisateur qui navigue en utilisant son iPad, par exemple.

Si vous voulez définir certaines propriétés CSS qui s'appliquent à des largeurs d'écran en particulier (ou des mobiles), utilisez la synthaxe suivante :

LIRE L'ARTICLE

Backgrounds multiples en CSS3

background / CSS3 / 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.

Comment afficher, en CSS3, plusieurs backgrounds dans le même conteneur ?

En CSS "normal", nous devons utiliser plusieurs conteneurs emboîtés les uns dans les autres et/ou du Javascript pour avoir plusieurs backgrounds. Toutefois, grâce au CSS3, nous avons maintenant une synthaxe pour donner plusieurs backgrounds au même élément.

Voici un petit bout de code qui vous montre les nouvelles possibilités de la propriété background:

LIRE L'ARTICLE

CSS3 PIE : This cake is not a lie !

border-radius / CSS3 / CSS3 Pie / IE / 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.

Dans un précédent article nous avons abordé la compatibilité des différents navigateurs vis-à-vis du HTML 5 et de CSS 3. La conclusion qui en découlait était que l'on pouvait utiliser ces langages sur des navigateurs récents, mais que les versions d'Internet Explorer antérieures à la 9 posaient problème.

LIRE L'ARTICLE

Personnaliser une liste avec des caractères spéciaux

CSS / liste / trucs et astuces / 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.

Saviez-vous que l'on peut utiliser des caractères ASCII comme "bullet" dans une liste HTML.

En effet, pour créer une liste avec des » ou des ·, nous n'avons pas à utiliser un background-image, non !

Il suffit d'utiliser la propriété content sur le peusdo-élément before comme dans cet example :

LIRE L'ARTICLE

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

5 trucs CSS que tout Web designer doit connaître !

CSS / trucs et astuces / 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.

Le CSS nous sauve littéralement la vie, nous, Web designers/programmeurs qui cherchons à nous simplifier la vie dans notre travail quotidien.

Voici, donc, 5 petits trucs et astuces qui pourraient s'avérer être fort utiles :

1. La première lettre d'un paragraphe

5 trucs et astuces 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

Détecter le fureteur dans Wordpress

CSS / HTML / Web / Wordpress

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.

Cette fonction détecte le navigateur du visiteur et l'applique à la fonction body_class().
.
Il devient donc très facile de corriger des petits problèmes CSS spécifique à un fureteur en particulier. Ajoutez cette fonction dans votre fichier functions.php :

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

Pages