Archives pour la catégorie CSS

[CSS] CSS Checkbox : Personnalisez vos checkbox sans Javascript

CSS Checkbox propose une grande variété de styles de checkbox afin de trouver celui qui vous convient. Reposant sur des images et du CSS, vos cases à cocher « new look » seront compatibles sur tout navigateur.

En plus de styles plus conventionnels représentant des marques ou des croix, vous pourrez aussi retrouver les styles utilisés par des sites connus comme Google ou Reddit.

Tous les styles sont téléchargeables en une archive unique ou à l’aide d’un générateur pour ne récupérer que celui qui nous interresse. Le générateur vous permettra également de récupérer le code html et la feuille de style correspondante.
Continuer la lecture

[CSS] Hint.CSS – biblio de Tooltips en CSS

Si vous ne souhaitez pas avoir à ajouter une bibliothèque Javascript ou un Plugin jQuery supplémentaire pour afficher vos tooltips, Hint.css est, comme son nom l’indique, une solution 100% CSS. Les tooltips peuvent être mis dans de multiples directions et styles.

La ressource combine subtilement classes CSS et attributs data-* pour afficher vos tooltips.

Hello Sir, hover over me.

Avec la classe hint–DIRECTION vous pouvez contrôler l’endroit ou devra s’afficher la bulle, et dans l’attribut data-hint, le texte à afficher.

Plusieurs styles sont prédéfinis : Bulles d’erreur, bulles d’infos, bulles de confirmation … et un mode tooltip toujours affichée.

Vous pourrez télécharger la version Sass ou directement le CSS prêt à emploi.

Des effets de transitions donnent un effet réussi aux tooltips sur navigateurs modernes, et sont bien dégradées sur tous les autres navigateurs.

hint-css

Source

[CSS/HTML] Responsive Boilerplate

Responsive Boilerplate est une base permettant de commencer un site responsive.

Grâce à cet ensemble de bibliothèques CSS et Javascript, vous n’aurez plus à vous pré-occuper de chercher les bonnes medias queries, ou comment adapter votre menu pour smartphones…

L’objectif de ce boilerplate est de vous faire gagner du temps en vous proposant une structure CSS et HTML simple et adaptée.

En plus du CSS, le package comprend :

  • Un PSD pour le système de grille
  • Des snippets Sublime Text2 pour générer rapidement son site responsive
  • Des fichiers Javascript pour adapter dynamiquement les menus et structure du site en fonction du périphérique
  • Un fichier index.html avec le markup HTML essentiel
  • Avec une feuille de style compressée à moins de 3Ko, ce squelette de responsive webdesign va faire des heureux !

responsive-boilerplate

Source

[CSS] Des CSS dynamiques grâce au langage LESS

Sur Alsacreations j’ai trouvé un tuto expliquant ce qu’était LESS et comment l’utiliser.

Vous avez toujours voulu utiliser des variables, des fonctions, ou encore faire de l’héritage avec le langage CSS ? C’est devenu possible grâce au langage LESS, aux frameworks Sass et xCSS. Cet article concernera uniquement le langage LESS et le compilateur LessPHP.

Pour convertir une syntaxe LESS (format .less) à un format CSS valide, il faudra utiliser un compilateur comme LessCSS ou LessPHP. LessCSS permet une compilation de votre fichier .less avec Javascript, tandis qu’avec LessPHP la compilation se fera côté serveur avec PHP. L’avantage de ce dernier est au niveau de la compatibilité (vous aurez par exemple aucun problème si un intenaute désactive Javascript).

Continuer la lecture

[CSS] Apprendre à apprécier les parties les moins sexy de CSS

J’ai lu il y a quelque jours un petit tuto sur le blog du Train de 13h37 qui nous explique quels sélecteurs CSS utiliser suivant ce que l’on souhaite faire.

Le futur des CSS nous donne beaucoup d’occasions de nous enthousiasmer : d’un côté il y a un paquet de nouvelles méthodes qui vont révolutionner notre façon de mettre en page le web, et de l’autre il y a un ensemble d’effets graphiques qui vont permettre d’appliquer des filtres et shaders 3Ds « à la volée ». Tout le monde aime ce genre de nouveautés : les magazines et les blogs débordent d’articles à ce propos.

Mais si ces outils font figure de chiens savants des CSS, je crois cependant qu’il est temps de s’intéresser aux figurants : les rouages du langage tels que les sélecteurs, les unités et les fonctions. Je les appelle souvent « les parties les moins sexy de CSS », mais c’est toujours avec beaucoup d’affection – affection qu’à mon sens vous devriez partager.

Continuer la lecture

[HTMl, CSS] Liste de livres HTML / CSS

Voici une liste (non exhaustive) de livres abordant le sujet du HTML et du CSS. Les éditeurs s’intéresse de plus en plus aux thèmes HTML / HTML5 / CSS / CSS3.

Le choix des livres est vaste et il est difficile de conseiller un bouquin plutôt qu’un autre.

Sur Alsacréations il y a une liste de livres commentés et critiqués.

Source