Index CSS

CSS - Animations

Comprendre les animations CSS avec image-clé (@keyframes). Et les librairies populaires d’animation de défilement (Scroll animation librairie).

Oznog 20 janvier 2023

Consulté 1425 fois

Mode de couleurs (Color modes) Bootstrap 5

Changer dynamiquement le thème de couleur dit le mode de couleur du site Web deviens plus facile que jamais avec la dernière version Bootstrap 5.3.0.

Oznog 15 janvier 2023

Consulté 2169 fois

25 ans des Trucsweb - Bouton hamburger animé Bootstrap 5

Transition et transformation CSS, bouton hamburger et barre de navigation Bootstrap 5 compatible.

Oznog 15 janvier 2023

Consulté 1935 fois

Mise en page à trois colonnes adaptative

Si c’est une affaire de rien avec la librairie Bootstrap, on peut facilement s’en passer pour créer un système de grille (Grid).

Django Blais 27 février 2022

Consulté 3541 fois

CSS - Liste à puce avec puce vraiment personnalisée

Très populauire, cette technique à pourtant un défaut de taille que le SVG peut régler

Django Blais 1er septembre 2021

Consulté 3706 fois

CSS - Personnalisez vos hyperliens avec un pictogramme (icon)

Identifier vos documents PDF, Word ou tout autres hyperlien à l’aide d’un pictogramme personnalisé Font Awesome.

Django Blais 26 février 2021

Consulté 5824 fois

Bootstrap 5 : Migration de la version 4 à la version 5

Une nouvelle version en travail du populaire cadriciel maintenant sans dépendance à jQuery !

Django Blais 30 septembre 2020

Consulté 6317 fois

Bootstrap 4 - Barre de recherche avec sélection de catégorie

Barre de recherche avec la librairie Bootstrap qui aligne une sélection de catégories, la saisie de mots-clés et le bouton soumettre tout au bout.

Django Blais 18 janvier 2020

Consulté 29118 fois

CSS3 - Texte en multicolonnes à la manière d’un journal

La meilleure façon de lire un texte est de le présenter en colonnes plus ou moins étroites, comme un journal.

Django Blais 23 novembre 2019

Consulté 6243 fois

C’est quoi SASS et pourquoi pas ?

Comment simplifier la production de feuilles de styles CSS pour sans tracas.

Django Blais 3 novembre 2019

Consulté 7002 fois

Bootstrap 4.2 - Saisie de fichier (File browser)

Il n’y a pas à dire, Bootstrap coupe souvent les coins ronds quand il est question de documenter le plugiciel d’un tiers parti.

Django Blais 3 janvier 2019

Consulté 18799 fois

Élégante boite à cocher «checkbox» et bouton «radio» en pure CSS

Voilà un tutoriel très simple. Simple, mais combien utile ! Quel site n’a pas de formulaire et quel formulaire n’a pas de boite à cocher ?

Django Blais 15 décembre 2018

Consulté 10954 fois

Effet parallaxe avec défilement en pure CSS

Le terme parallaxe, utilisé notamment en astronomie depuis le 16e siècle, n’a pas attendu l’initiative de Nike de 2011 pour être utilisé en programmation.

Django Blais 8 octobre 2018

Consulté 20577 fois

Les variables CSS ou propriétés personnalisées

Les propriétés personnalisées du CSS enfin compatible.

Django Blais 16 avril 2018

Consulté 5132 fois

Le flyout ou la fenêtre modale fixe et adaptative en pure CSS

Un petit menu rapide, une annonce importante, un chat ou le simple abonnement au bulletin électronique, la fenêtre modale fixe est aujourd’hui présente partout. Et pas besoin d’être un geek, un petit bout de code CSS sans une seule ligne de JavaScript et avec une animation en prime.

Django Blais 31 mars 2018

Consulté 8993 fois

Proportion de vidéo adaptative

Petit truc rapide aujourd’hui, la préservation du rapport d’aspect (le ratio) 16: 9 avec l’unité vmin du CSS3.

Django Blais 1er novembre 2017

Consulté 6728 fois

Police de caractères adaptative

Depuis l’arrivée des tablettes et particulièrement du mobile, on ne peu plus concevoir des pages Web avec une seule grandeur de police de caractères. Mais est-ce que les unités « Viewport » sont efficaces?

Django Blais 30 octobre 2017

Consulté 9302 fois

Bootstrap 4 Beta - Attendre la version 5 ou pas?

Bootstrap admet ne pas être parfait, mais assure qu’ils feront de leur mieux pour garder cette fois toutes les classes, les fonctionnalités et les url.

Django Blais 21 août 2017

Consulté 9603 fois

CSS - Styliser la boite à cocher

Couvrez ce que je ne saurais voir ou la coche adaptative et le bouton bascule en pure CSS.

Django Blais 12 décembre 2016

Consulté 17855 fois

CSS - Pictogrammes en police vectoriels

Du vieux .ico au nouveau pictogramme vectoriel gratuitement.

Django Blais 7 novembre 2016

Consulté 8250 fois

Typographie - La police Web parfaite

Ce n’est pas la police de caractères parfaite, c’est la meilleure méthode, celle officiellement proposée par les UI des systèmes d’exploitation.

Django Blais 11 septembre 2016

Consulté 18051 fois

Pictogrammes et boutons à 3 états avec les sprites CSS

Limiter le nombre de requête serveur avec des boutons et des pictogrammes avec effet réactif (rollover) faciles à utiliser.

Django Blais 27 mars 2016

Consulté 9689 fois

Panneau latéral de navigation Flex adaptatif sans jQuery

Le tout en pure CSS et « @media » avec un simple petit JavaScript pour faire basculer la classe.

Django Blais 22 mars 2016

Consulté 10247 fois

Système de Grille CSS adaptatif et équipollent ;- )

Aligner des boites de contenu avec différentes quantités d’informations et comparer les méthodes.

Django Blais 20 février 2016

Consulté 8964 fois

Nouveau cadriciel Fundation 6

Plus léger, plus dépouillé, et plus que jamais accessible! Fondation 6 à la prétention d’être utilisé partout, sur tout périphérique et par quiconque.

Django Blais 24 novembre 2015

Consulté 5653 fois

Menu déroulant en pur CSS

Un simple menu principal déroulant avec un niveau de sous-menu sans Javascript.

Django Blais 4 octobre 2015

Consulté 15088 fois

Arrivé de Bootstrap 4 Alpha

Nouvelle version v4 Alpha de la populaire « cadre de travail CSS » ou « cadriciel » (framework) Bootstrap de Twitter.

Django Blais 11 septembre 2015

Consulté 13273 fois

Police de caractères et règle CSS @font-face

Le navigateur permet par défaut l’usage des polices de caractères déjà installées mais aussi vos propre polices.

Django Blais 10 juin 2015

Consulté 15561 fois

Tableau en pure CSS versus table HTML

Passer aux structures CSS optimisée ne veut pas dire la fin de la table HTML.

Django Blais 3 avril 2015

Consulté 45515 fois

Transitions, transformation et animations CSS3

Animez la transition de vos éléments HTML en une ligne de code CSS. Hyperlien réactif en pur CSS avec effets de transition.

Django Blais 26 février 2015

Consulté 12051 fois

Feuille de styles CSS alternatives

Créer vos différentes feuilles de styles CSS alternatives et utiliser le Javascript pour passer de l’une à l’autre.

Django Blais 12 janvier 2015

Consulté 9400 fois

Structure HTML5 en colonnes CSS, fluide et adaptative (responsive)

Variation du gabarit CSS, entête et pied de page avec alignement de colonnes en terme HTML5.

Django Blais 3 janvier 2015

Consulté 53511 fois

Police de caractères « Google Fonts »

Google offre des polices d’écriture ou polices de caractères pour page web tout à fait gratuitement.

Django Blais 13 décembre 2014

Consulté 28799 fois

Zoom sur image avec fenêtre « modal responsive » en pure CSS3

La visualisation d’image grand format dans une fenêtre modale communément appelée le « Magic zoom » !

Django Blais 4 décembre 2014

Consulté 29410 fois

Les « cadre de travail CSS » ou cadriciel (Framework)

Des monstres Twitter Bootstrap et Zurb Foundation 5 aux petites initiatives.

Django Blais 2 décembre 2014

Consulté 11608 fois

Remise à zéro CSS (Reset)

Pourquoi éviter cette technique énergivore essentiellement utile au « cadriciel HTML » industriel!

Django Blais 30 novembre 2014

Consulté 28363 fois

La balise d’en-tête Viewport pour mobile

Contrôler la mise en page et le zoom sur les navigateurs mobiles.

Django Blais 28 novembre 2014

Consulté 11634 fois

CSS3 - Transparence, opacité et couleurs RGB

Quel plaisir de vous parler de transparence CSS, à toutes fins pratiques inexistante avant le CSS2, à quelques exceptions près.

Django Blais 26 novembre 2014

Consulté 19713 fois

Retina et les images adaptatives

L’informatique est essentiellement une question de stockage et de ...sensibilité!

Django Blais 28 octobre 2014

Consulté 12689 fois

Structure CSS adaptative et media Queries

Une « Structure CSS adaptative » ou la fluidité du contenu, un art d’adaptation!

Django Blais 27 octobre 2014

Consulté 28434 fois

Bouton sensitif en pure CSS3

Boutons réactifs avec les sélecteurs :hover, :focus, :link et :active.

Django Blais 22 octobre 2014

Consulté 10998 fois

Notification en pure CSS3

Il n’y a pas de plus simple usage du sélecteur « :target ».

Django Blais 17 octobre 2014

Consulté 9588 fois

Menu bootstrap à multiples niveaux

La fameuse barre de navigation Bootstap 3 permet un seul sous-niveau. Voilà donc une solution en CSS toute simple à ce problème.

Django Blais 14 octobre 2014

Consulté 71036 fois

Fenêtre « modal responsive » en pure CSS3

Une fenêtre « modal responsive » en pure feuille de style CSS3, sans Javascript, compatible Internet Explorer 9+ !

Django Blais 22 août 2014

Consulté 107979 fois

Styliser vos tabelaux HTML »

Colorer vos tableaux HTML avec border-collapse: collapse et effet d’alternance.

Django Blais 2 avril 2014

Consulté 77810 fois

Générateur d’effets de filtres et de transitions - Exclusivement pour Internet Explorer 4+

Microsoft offre depuis la version 4 de son navigateur Internet Explorer une grande quantité d’effets surprenants. Les effets peuvent être appliqués à la plupart des objets HTML et même aux images. Des effets d’embossage, de flou, de rayon-X aux transitions les plus diverses qui ne risqueront pas d’ennuyer vos visiteurs. Le généreteur permet de séle

Django (Oznog) Blais 17 octobre 2001

Consulté 22968 fois

Feuille de styles (css) dynamique - En fonction du OS et du navigateur

Ce petit Javascript permet de tester le navigateur et le système d’exploitation pour indiquer au navigateur la feuille de styles à utiliser. Le teste se fait sur la plupart des versions de navigateurs et sur Linux, Macintosh et Windows. Vous pouvez le modifier pour ne pas tester la version du navigateur ou encore linux.

Django (Oznog) Blais 18 septembre 2001

Consulté 28599 fois

Colorer vos tableaux en CSS avec bordure - Compatible avec la plupart des navigateurs

Colorer un tableau et surtout mettre une bordure ou des lignes de séparation entre les lignes et les colonnes n’est pas très compatible. La bordure HTML est différente entre Internet Explorer et Netscape et ce dernier ne gère pas bien les couleurs de tableau. Avec une feuille de style (CSS) vous pouvez régler ce problème une fois pour toutes.

Django (Oznog) Blais 16 août 2001

Consulté 86987 fois

Modification du pointeur ou du curseur en CSS - Avec Internet Explorer

Vous pouvez modifier l’aspect du pointeur selon vos goûts. Ajouter un style et déterminer l’attribut « cursor » dans vos liens ou créer une feuille de style externe en déterminant des classes pour chaque pointeur.

Django (Oznog) Blais 1er février 2001

Consulté 69508 fois

La classe BODY et la police par défaut en CSS - Et changer l’aspect de la barre de défillement

Vous désirez déterminer la police par défaut de votre document ainsi que sa couleur et sa grandeur. Rien de plus simple avec une feuille de style (CSS). Ajouter ce code dans le HEAD de votre document.

Django (Oznog) Blais 15 décembre 2000

Consulté 39070 fois

Standardiser vos formulaires - Enfin un formulaire compatible Netscape et IE avec le CSS

Par exemple : Quoi de plus énervant que les formulaires ! La balise FONT qui permet avec Netscape de modifier l’apparence des objets d’un formulaire ne fonctionnant pas avec IE nous oblige souvent à restreindre la longueur des saisies pour permettre au formulaire d’avoir une allure convenable avec IE qui gère les formulaires drôlement.

Django (Oznog) Blais 5 février 2000

Consulté 20114 fois

Le RollOver CSS... - Exclusif à Internet Explorer 4 et 5...

La balise A :Hover du CSS détermine la couleur de fond d’un lien (A). Elle n’est pas compatible avec Netscape. Elle le sera peut-être dans la version 5. Mais cet attribut offre tellement de dynamisme à une page que je ne peux m’empêcher de l’utiliser. De toute façon il n’enlève rien aux utilisateurs de Netscape si ce n’est quelques agréments. La te

Django (Oznog) Blais 8 novembre 1999

Consulté 22817 fois

Définir le style de vos hyperliens - Pour vos feuilles de style (CSS)

La balise référence (A HREF) est utilisé pour créer des liens sur un document HTML. Un lien texte ou celui d’une image. Il y a plusieurs états d’un lien, lorsqu’il n’a jamais été utilisé (link), lorsqu’il est actif c’est-à-dire que vous avez le clic dessus ! (active), lorsqu’il à déjà servi (visited), lorsque la souris passe au-dessus...

Django (Oznog) Blais 5 novembre 1999

Consulté 14831 fois

Introduction aux CSS - Les Feuilles de styles ou le Cascading Style Sheets

Les feuilles de style ou Cascading style sheets (CSS), utilisés dans un document HTML définissent les propriétés des balises HTML du document. Avec le CSS, la conception de site web est des plus facile et optimisée par le webmestre. Avec un seul document externe, le CSS peut contrôler l’ensemble de la présentation d’un site web.

Django (Oznog) Blais 5 septembre 1999

Consulté 19760 fois

Position dynamique avec STYLE - Script pour afficher une image x/y sur votre page Web.

Utiliser l’attribut CSS de position pour placer des images sur une page Web. Avant le HTML 4.0 il était difficile de positionner avec précision une image sur une page Web. Les attributs standards de la balise IMG, vspace, hspace et align sont très limités et le programmeur doit mettre les images dans une table ou utiliser les GIF un-pixel. Avec le

Django (Oznog) Blais 5 août 1998

Consulté 22745 fois

Syndication : CSS - Trucsweb

Dernière mise à jour : le 2 août 2024 à 12:12

Trucsweb.com