Shaare your links...
29320 links
Liens en vrac de sebsauvage Home Login RSS Feed ATOM Feed Tag cloud Picture wall Daily
Links per page: 20 50 100
◄Older
page 1 / 4
181 results for tags css x
  • css fonts
    GitHub - system-fonts/modern-font-stacks: System font stack CSS organized by typeface classification for every modern operating system
    Hé mais elle est vraiment pas mal, cette font-stack. Et en prime avec des captures d'écran sur différents systèmes.
    2023-03-15 16:20:27
    https://github.com/system-fonts/modern-font-stacks
  • astuces css html
    Créer une arborescence en CSS uniquement - Dév. Web - ShevArezo`Blog
    via https://lehollandaisvolant.net/?id=20230111190121
    2023-01-12 16:38:58
    https://blog.shevarezo.fr/post/2023/01/10/creer-arborescence-css-uniquement
  • css tutoriel
    An Interactive Guide to Flexbox in CSS
    Introduction illustrée aux flexbox CSS (en anglais).
    2022-12-19 08:44:39
    https://www.joshwcomeau.com/css/interactive-guide-to-flexbox/
  • css services
    Super Useful CSS Resources 🌈 - DEV Community 👩‍💻👨‍💻
    Un tas de générateurs CSS (ombres, bordures, dégradés, motifs...)
    (via https://links.kalvn.net/shaare/Jsk-mg)
    2022-12-05 16:48:07
    https://dev.to/lissy93/super-useful-css-resources-1ba3
  • css fonts
    COLRv1 and CSS font-palette | CSS-Tricks - CSS-Tricks
    Et là j'apprends qu'OpenType (polices de caractères TTF/OTF) supporte la spécification COLRv1 depuis la version 1.9. Ce qui veut dire des polices de caractères EN COULEURS. Je parle là de plusieurs couleurs à l'intérieur des caractères (dégradés, etc.) et plus seulement une couleur uniforme.
    Si vous utilisez une police supportant COLRv1, vous pouvez donc faire varier les couleurs (et d'autres caractéristiques de la police) en CSS (donc plus seulement gras/italique).

    Google vient d'ailleurs de livrer ses premières polices supportant COLRv1, ce qui donne un bon exemple des possibilités : https://material.io/blog/color-fonts-are-here
    Non seulement on peut faire varier les couleurs et dégradés, mais aussi l'épaisseur.

    Il y a encore des limites à ce qu'on peut faire (par exemple pas de transition de palette possible en CSS sur ces polices), et le support dans les navigateurs n'est pas encore total : https://caniuse.com/colr-v1 (C'est ok pour Chrome, Edge, Opera mais pas Firefox, et le support sur mobile est très incomplet).
    En attendant, SVG est sans doute une meilleure solution si vous voulez faire des choses plus avancées.
    2022-09-14 16:41:02
    https://css-tricks.com/colrv1-and-css-font-palette-web-typography/
  • css
    accent-color | CSS-Tricks - CSS-Tricks
    C'est vrai que j'avais un peu zappé qu'avec accent-color il est facile de styler les formulaires (checkbox, radio, etc.)
    2022-02-24 15:52:35
    https://css-tricks.com/almanac/properties/a/accent-color/
  • css
    prefers-color-scheme - CSS: Cascading Style Sheets | MDN
    Je me note cette page pour ne pas la perdre: Les règles CSS pour faire des pages web qui s'adapte aux internautes qui utilisent un thème sombre.
    (Il faudrait que je le fasse partout sur mon site.)

    Par exemple pour DokuWiki il y a 2 plugins qui permettent ça (si vous ne voulez pas vous-même toucher aux CSS):
    https://www.dokuwiki.org/template:mindthedark
    https://www.dokuwiki.org/template:ad-hominem
    2022-02-22 09:27:41
    https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme
  • css
    100 Bytes of CSS to look great everywhere - DEV Community
    Un CSS minimaliste pour avoir une page web de base proprement présentée:
    ______________________________________________________________

    :root {
     max-width: 70ch;
     padding: 3em 1em;
     margin: auto;
     line-height: 1.75;
     font-size: 1.25em;
    }
    h1,h2,h3,h4,h5,h6 {
     margin: 3em 0 1em;
    }
    p,ul,ol {
     margin-bottom: 2em;
     color: #1d1d1d;
     font-family: sans-serif;
    }
    ______________________________________________________________

    Un autre framework CSS un peu moins léger (~3ko), mais qui permet aussi de styler une page simplement (en particulier avec des <code> et <blockquote> mieux présentés): https://watercss.kognise.dev/
    (Intéressant aussi parce qu'il peut s'adapter automatiquement à la configuration claire/sombre de l'utilisateur.)
    (via http://nicolas-delsaux.hd.free.fr/Shaarli/?YnUrhw)

    Ce ne sont sans aucun doute pas les seuls framework CSS minimalistes, mais ça reste intéressant.
    2021-10-22 16:35:38
    https://dev.to/swyx/100-bytes-of-css-to-look-great-everywhere-19pd
  • astuces css html javascript
    Encore un peu d’optimisation pour les pages Web - Le Hollandais Volant
    Je me note ces quelques optimisations pour des pages qui se chargent plus vite.
    2021-09-16 23:04:59
    https://lehollandaisvolant.net/?d=2021/09/16/18/23/08-encore-un-peu-doptimisation-pour-les-pages-web
  • astuces css html
    GitHub - you-dont-need/You-Dont-Need-JavaScript: CSS is powerful, you can do a lot of things without JS.
    Différentes solutions et exemples pour faire des onglets, carrousels, scrolling parallax, menus, galeries, tooltips et autres sans javascript.
    (Contexte: Le langage Javascript est usé et abusé par une majorité de sites web, rendant les pages très lourdes à charger, et très lentes à s'afficher. Diminuer la quantité de javascript permet de rendre le web plus frugal, sans pour autant retirer en fonctionnalités si on s'y prend bien.)
    2021-06-28 22:06:30
    https://github.com/you-dont-need/You-Dont-Need-JavaScript
  • css
    CSS morphing
    "morphing" (il faut le dire vite) entre mots avec du CSS. Le résultat est sympa malgré tout.
    2021-06-09 08:43:24
    https://codepen.io/amit_sheen/pen/xxqYzvm
  • css
    CSS Tips - Marko Denic - Web Developer
    Quelques chouettes astuces CSS que je ne connaissais pas.
    2021-04-27 08:33:01
    https://markodenic.com/css-tips/
  • art css
    Generative art with CSS
    Woao... super idée: Utiliser des CSS pour faire de l'art génératif (images créées par des logiciels).
    L'article est largement illustré d'exemples.
    2020-08-12 09:57:15
    https://generative-art-with-css.commons.host/
  • css
    Why is CSS Frustrating? | CSS-Tricks - Le Hollandais Volant
    Je trouve que c'est une excellente réflexion sur les CSS.
    Au final, on les utilise très mal.
    2020-03-02 09:55:38
    https://lehollandaisvolant.net/?id=20200301114053
  • css EnLigne outils
    brumm.af
    Un chouette générateur d'ombres en CSS.
    (via http://warriordudimanche.net/article1185)
    2019-12-22 11:03:09
    https://brumm.af/shadows
  • css fun
    Masking GIFs with other GIFs | CSS-Tricks
    Utiliser SVG et CSS pour faire du compositing d'images ou d'animations.
    (via http://warriordudimanche.net/)
    2019-12-04 09:51:08
    https://css-tricks.com/masking-gifs-with-other-gifs/
  • css fun
    Playing Sounds with CSS - Warrior du Dimanche
    Wokay.
    2019-11-27 09:26:56
    http://warriordudimanche.net/article1140/5ddd65c2f07d3
  • astuces css
    82 CSS Text Effects
    Et hop... plein d'effets à faire sur du texte avec des CSS (avec le code). (via http://warriordudimanche.net)
    2019-09-16 16:44:14
    https://freefrontend.com/css-text-effects/
  • astuces css
    Appliquer une hauteur de 100% à un élément - Alsacreations
    Sous le coude (via http://warriordudimanche.net/article1063/astuce-css-avoir-une-div-qui-occupe-100-du-viewport)
    2019-09-16 16:38:06
    https://www.alsacreations.com/astuce/lire/51-hauteur-100-element.html
  • css
    12 methods for vertical centering of the content - alignment of many divs and images
    Sous le coude.
    2019-08-22 11:27:16
    https://www.web4college.com/questions/methods-for-vertical-centering.php
  • css tutoriel
    Learn CSS Layout
    Un petit tuto très bien présenté sur le modèle boîtes CSS.
    2019-07-09 14:03:06
    https://learnlayout.com/
  • astuces css
    Note : thème sombre - Le Hollandais Volant
    Une petite astuce CSS pour faire un thème sombre tout en conservant les nuances de couleur:
    filter: hue-rotate(180deg) invert(1);
    2019-07-01 13:44:54
    https://lehollandaisvolant.net/?id=20190607115704
  • astuces css
    La propriété CSS - objectif-fit - NextuM
    Petite propriété CSS utile pour remplir un conteneur avec une image de différentes manières.
    Illustration: http://warriordudimanche.net/article1030/5d15f69c7ac0c
    J'ai utilisé quelque chose de similaire pour le fond: background-size: cover;
    dans cette page: http://sebsauvage.net/ambient/
    2019-06-28 14:20:10
    http://nextum.fr/la-propriete-css3-objectif-fit
  • css EnLigne outils
    The ultimate CSS tools for web designers | CSSmatic
    Petits outils en ligne pour générer facilement en CSS: Bordure, ombre et dégradés.
    2019-05-22 10:28:02
    https://www.cssmatic.com/
  • css
    CSSFX - Beautifully simple click-to-copy CSS effects
    Quelques animations CSS simples et faciles à copier-coller dans vos pages.
    2019-05-09 09:41:51
    https://cssfx.dev/
  • astuces css
    339 bytes of responsive CSS · Gaurav Koley
    Quelques lignes de CSS afin de rendre une page web tout à fait standard sous forme belle et minimaliste.
    2019-04-10 13:32:55
    https://blog.koley.in/2019/339-bytes-of-responsive-css
  • astuces css
    :empty - CSS : Feuilles de style en cascade | MDN - Le Hollandais Volant
    Pas con comme astuce: Une règle CSS qui fait qu'un DIV est automatiquement visible s'il contient quelque chose, et invisible s'il est vide.
    Ça permet de réduire la quantité de Javascript nécessaire.
    2019-03-06 09:55:16
    https://lehollandaisvolant.net/?id=20190306003014
  • css wtf
    Francine
    OH. MY. GOD.
    Cette image a été créée avec des CSS.
    °o°
    https://cyanharlow.github.io/purecss-francine/
    2018-05-02 13:33:22
    http://diana-adrianne.com/purecss-francine/
  • css EnLigne gratuit outils
    CSS Colour Gradients with GradPad, beautiful CSS color gradient generator for your designs
    Un générateur de dégradés CSS sympa.
    (via https://mastodon.xyz/@kalvn/99676638852733165)
    2018-03-13 16:56:56
    http://ourownthing.co.uk/gradpad.html
  • astuces css
    Let's Look at 50+ Interesting CSS Properties & Values | CSS-Tricks
    Plein de propriétés CSS à explorer pour différents effets. (via http://warriordudimanche.net/article455/588f05c1b84f0)
    2017-01-30 13:52:30
    https://css-tricks.com/lets-look-50-interesting-css-properties-values/
  • css fonts
    Epargner le téléchargement des polices dans une page web à vos utilisateurs
    Je trouve ça particulièrement pénible, alors je ne le fais pas subir à mes lecteurs: Je n'inclue pas dans mes pages de polices à télécharger.
    Comment faire pour que l'aspect soit le plus proche de ce que je souhaite ne sachant pas les polices pré-installées chez l'internaute ?

    En principe en CSS on a les font-stacks: Vous spécifiez plusieurs polices (d'aspect graphique proche), et le navigateur prendra en premier la police disponible dans le système.
    Exemple typique:
       font-family: Arial,Helvetica,sans-serif;
    Si Arial n'est dispo, il essaiera avec Helvetica, etc.

    Mais si je veux une police particulière, comme "Droid Sans", comment trouver la font-stack la plus fidèle, la plus proche de cette police ?
    Et bien on peut trouver !
     - Allez sur cette page: http://www.identifont.com/similar.html
     - Entrez le nom de la police qui vous intéresse.
     - Cliquez "ok".
    Et dans la colonne de gauche vous verrez les noms des polices qui sont graphiquement les plus proches. Vous n'avez plus qu'à mettre dans votre CSS.

    Exemple: pour "Droid Sans", on obtient:
       font-family: "Droid Sans","Noto Sans","Ascender Uni","Linotype Aroma","FF Kievit","Source Sans","Open Sans","Museo Sans","Myriad","Camphor","Corbel","Frutiger","Vectora","Calibri",sans-serif;

    Vous pouvez également compléter avec ces font-stacks: http://www.cssfontstack.com/ (même si je trouve qu'elles sont trop limitées).
    Certes c'est loin d'être idéal et je n'ai aucune garantie, mais je préfère ça.

    Si vous voulez vérifier si une police existe en standard sous Windows ou MacOSX:
    https://en.wikipedia.org/wiki/List_of_typefaces_included_with_Microsoft_Windows
    https://en.wikipedia.org/wiki/List_of_typefaces_included_with_macOS
    2016-11-23 18:17:06
    ?SOYZoA
  • astuces css
    [CSS] Optimiser le chargement des polices pour le web - Le Hollandais Volant
    Petite astuce à connaître pour éviter le chargement inutile de polices de caractères en CSS.
    2015-11-18 11:44:03
    http://lehollandaisvolant.net/?d=2015/11/16/21/09/37-css-optimiser-le-chargement-des-polices-pour-le-web
  • astuces css
    [CSS] Note centrer une image dans un bloc - Le Hollandais Volant
    2015-08-03 12:53:35
    http://lehollandaisvolant.net/?mode=links&id=20150731185744
  • astuces css
    [CSS] La spécificité des sélecteurs - Le Hollandais Volant
    2015-07-26 09:57:44
    http://lehollandaisvolant.net/?d=2015/07/29/17/37/48-css-la-specificite-des-selecteurs
  • astuces css javascript
    plainJS - The Vanilla JavaScript Repository - Le Hollandais Volant - Le Hollandais Volant
    Oh... pas mal pour placer des images de manière optimale dans une page web.
    2015-07-26 09:56:34
    http://lehollandaisvolant.net/?id=20150725153729
  • astuces css
    [CSS] Un effet label/input avec icône et flexbox - Le Hollandais Volant
    Sympa.
    2015-07-18 15:03:13
    http://lehollandaisvolant.net/?d=2015/07/17/23/46/32-css-un-effet-labelinput-avec-icone-et-flexbox
  • css
    Coder's Block Blog / Checkbox Trickery with CSS
    Pfiou... Bon le résultat est beau et sans javascript, mais quel bricolage !
    2015-06-24 11:37:06
    http://codersblock.com/blog/checkbox-trickery-with-css/
  • css
    Home · Primer
    Primer, le framework (et les règles) CSS de GitHub. Intéressant.
    2015-03-24 12:13:47
    http://primercss.io/
  • astuces css
    Gotcha CSS
    Si vous vous demandez pourquoi votre cellule n'est pas entourée en bleu malgré votre CSS:

    <style>
      .matable > tr > td { border: 2px solid blue; }
    </style>
    <table class="matable">
       <tr>
           <td>coucou</td>
       <tr>
    </table>

    C'est juste parce que vous avez oublié que le corps d'un tableau est implicitement contenu dans un <tbody>. Votre règle CSS doit donc être:

      .matable > tbody > tr > td { border: 2px solid blue; }

    Et là ça marche.   ;-)

    Pour ne pas vous faire avoir, inspectez l'élément avec les outils développeur Firefox: Vous verrez alors le code html tel que Firefox le voit (et qui peut être différent de celui de "Voir le source").

    Pour résumer:
     - "Voir le source" = code html tel que renvoyée par le serveur (et donc avant parsing et exécution du javascript)
     - Inspecteur Firefox: arbre DOM tel que Firefox l'a en mémoire (et donc *après* exécution du javascript).
    2015-02-26 17:33:28
    ?NYM3eA
  • css fun
    30 CSS Puns That Prove Designers Have a Great Sense of Humor
    De l'humour de codeur... façon CSS.
    (via Bruno J.  :-)
    2015-02-19 18:15:47
    http://www.hongkiat.com/blog/funny-css-puns/
  • css reference
    CSS Reference | Codrops
    Référence CSS (via http://shaarli.warriordudimanche.net/?l3UV6Q)
    2015-02-05 13:36:26
    http://tympanus.net/codrops/css_reference/
  • astuces css
    Les media-query et le responsive design CSS3 - Le Hollandais Volant
    Quelques conseils pour faire du responsive en utilisant les media-queries.
    2014-11-23 14:16:52
    http://lehollandaisvolant.net/tuto/responsive-css/
  • 3d css html
    Creating 3D worlds with HTML and CSS
    Oh mon dieu c'est horrible. OH MON DIEU C'EST HORRIBLE.
    Non, cette démo (http://keithclark.co.uk/labs/css-fps/) n'est *PAS* du WebGL.  
    Ce sont de PUTAINS DE <DIV> HTML SUR LESQUELS IL A APPLIQUÉ DES CSS-TRANSFORMS.
    AAAARRRGGGGGG.
    J'ai les neurones qui saignent rien qu'à y penser.
    Il faut faire enfermer ce gars.
    2014-11-06 12:16:14
    http://keithclark.co.uk/articles/creating-3d-worlds-with-html-and-css/
  • astuces css shaarli
    [tips] Icône pour liens externes - Nekoblog.org :: Marque-pages
    Petite astuce (avec une seule ligne de CSS) pour mettre dans Shaarli une petite icône quand il s'agit d'un lien externe (c'est à dire qui ne pointe par sur Shaarli lui-même).
    Vous pouvez voir le résultat là: http://links.nekoblog.org
    2014-07-02 15:01:05
    http://links.nekoblog.org/?WxuUJg
  • css EnLigne html outils
    PageSpeed Insights
    Pour analyser une page de votre site avec Google.  Notez que vous pouvez aussi utiliser http://gtmetrix.com/ qui combine Google PageSpeed avec Yahoo YSlow.
    GTMetrix est uniquement orienté performances, alors que le PageSpeed de base donne aussi des conseils pour mobiles (conseil sur la taille des éléments à l'écran, etc.)
    (via http://lehollandaisvolant.net/?id=20140621210817)
    2014-06-23 08:16:52
    https://developers.google.com/speed/pagespeed/insights/
  • astuces css
    [CSS] Note : text-overflow
    Une astuce intéressante quand un texte (titre ou autre) est amené à être tronqué.
    2014-04-20 18:33:20
    http://lehollandaisvolant.net/?mode=links&id=20140420165310
  • css LogicielLibre logiciels outils programmation
    UnCSS
    Je me met ça sous le coude: un outils pour vous aider à supprimer le code inutile de vos CSS. Il supporte même les CSS injectés par Javascript. (via http://links.la-bnbox.fr/?TxMGJQ)
    2014-04-14 10:25:38
    https://github.com/giakki/uncss
  • css
    Note : bootstrap & co suxent - Le Hollandais Volant
    2014-03-01 20:43:45
    http://lehollandaisvolant.net/?mode=links&id=20140301222125
  • astuces css
    Ombres avancées avec CSS3 et box-shadow - CSS / CSS3 | CreativeJuiz
    Quelques effets d'ombres sympa en CSS3 (via http://orangina-rouge.org/shaarli/?ADCKQw)
    2014-02-12 15:43:44
    http://www.creativejuiz.fr/blog/tutoriels/ombre-avancees-avec-css3-et-box-shadow
  • css fun jeux
    CSS Diner
    C'est fun !  Un jeu où il faut attraper les objets en entrant les bons sélecteurs CSS.  C'est pas bien difficile, mais amusant. L'idée est bonne est pourrait s'appliquer à d'autres choses.
    (via http://colibri-libre.org/liens/?wHxzFQ)
    2014-02-11 18:03:21
    http://flukeout.github.io/
Links per page: 20 50 100
◄Older
page 1 / 4
Shaarli 0.0.41 beta modifiée - 2022-08-11 - The personal, minimalist, super-fast, no-database delicious clone. By sebsauvage.net. Theme by idleman.fr. I'm on Mastodon.
shelter.moe