Charger une page sur un onglet Bootstrap spécifique

On ne présente plus l’utilité des frameworks HTML/CSS et encore moins le plus connu de tous : Bootstrap. Cette boîte à outils permet à tout le monde d’implémenter des fonctionnalités HTML, CSS et javascript très simplement et avec un minimum de style. Parmi ces fonctionnalités, on retrouve les onglets (tabs). Grâce à une classe CSS, il est possible de forcer l’affichage de l’onglet de votre choix, mais si vous partagez un lien en voulant faire apparaître un autre onglet, là c’est une autre marmelade. Voici une astuce javascript qui va vous faciliter la vie.

Continue reading

Imiter le Material Theme d’Android dans les formulaires Bootstrap

Android a profité du lancement de Lollipop (Android 5.0) pour présenter le Material Theme. Dans le développement de la nouvelle version de TeamFoot, j’ai voulu imiter le Material Theme d’Android dans les formulaires Bootstrap. Je n’ai appliqué cette modification CSS uniquement lorsque l’utilisateur accède au site avec son mobile, mais je vais vous la présenter ici également pour tous les autres devices.

Continue reading

Compiler LESS css avec Sublime Text

LESS css est un “langage” basé en javascript, permettant de générer des feuilles de style css. L’extension du document de travail étant un .less, il est nécessaire de compiler ce fichier pour le transformer en feuille de style .css compréhensible par les navigateurs. Ce simple point est suffisant pour décourager de nombreuses personnes qui ne souhaitent pas se compliquer la tâche. En effet, l’installation côté client ou serveur nécessite quelques manipulations qui peuvent en effrayer plus d’un.

Continue reading

Transformer des images en noir et blanc

Pour la nouvelle version du site TeamFoot, j’ai eu besoin de mettre en place des images en noir et blanc, puis d’afficher l’image en couleur lors du survol souris. Il existe plusieurs solutions pour y parvenir. Les plus usuelles sont :

  1. créer deux images. Une en noir et blanc et une autre en couleur,
  2. créer une seule image intégrant les deux visuels, puis de jouer sur la propriété “background-position”,
  3. transformer des images en noir et blanc grâce à quelques propriétés CSS.

C’est cette dernière solution que nous allons dans l’article. Compatible avec tous les navigateurs, elle ne nécessite que quelques lignes de codes CSS et une seule image. De plus, nous aurons la possibilité d’y attribuer une transition permettant d’ajouter un peu de dynamisme.

Continue reading

Rendre Font Awesome Icons compatible avec IE8

Au moment d’écrire ce billet, Font Awesome Icons est disponible dans sa version 4.0.3. Il s’agit d’une collection d’icônes utilisant une police vectorielle, gratuit et simple à utiliser. Le fait d’être une police vectorielle nous permet d’afficher les icônes à la taille de notre choix sans charger moultes fichiers. De plus, via la CSS, nous pouvons appliquer une couleur hexadécimale pour personnaliser les icônes. Continue reading

Appliquer un effet zoom sur les images lors du survol

Pour le projet Moustache Football Club il m’a été demandé de mettre en place un effet zoom lorsqu’on survol les images avec la souris. Ça paraît anodin, mais pourtant ça apporte un peu de dynamisme sur les pages et ça permet d’apporter un effet Wow pour les utilisateurs. Pour arriver à nos fins, pas besoin d’utiliser la librairie jQuery, CSS3 va nous permettre d’y parvenir rapidement et efficacement.

Continue reading