Articles tagged with: “css”
- Styling buttons, the right way
Learn how to create an accessible button style which can be used with the correct semantic element: <a> or <button>.
- Gradient fills for SVG icons
Using gradients on SVG icons is not as easy as using linear-gradient in CSS, but it can still be done. Let’s explore a few techniques.
- Printing background colors with CSS and SVG
Web browsers do not print background colors by default. Here’s a trick for printing a flat color, e.g. if you have a white logo or graphic.
- ReMarkdown.css
Styling HTML elements as if they were plain Markdown text.
- Using CSS variables in SVG icons
Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.
- The math of CSS Locks
CSS Locks are a Responsive Web Design technique that lets you transition smoothly between two property values when the screen gets smaller or bigger.
- CSS Selector Wars (KiwiParty 2016)
Support de présentation de ma conférence à la KiwiParty 2016 à Strasbourg. On y parle de stratégie pour gérer ses styles CSS sans provoquer des conflits dans tous les sens.
- Alternatives to the “em” CSS unit
You don’t have to use the “em” for everything. Pixels are probably better for media queries and layout, and “rem” can be useful for text.
- Image decorations for “object-fit”
When using “object-fit: contain”, the painted image may be smaller than the actual <img> element. Styling this image becomes challenging.
- Possible issues with em-based media queries
Some demos of how em-based media queries and px-based widths can become mismatched, and should be avoided. All content sized in pixels Some content sized in pixels All content sized in pixels, demo…
- Namespaced HTML classes
Let’s say you’re releasing some library or library-ish code which makes use of HTML classes. You want to allow users of your code to just put a given class somewhere and get a specific result. How do you…
- Markdown heading in CSS comments
I use Markdown-inspired headings in my CSS comments, to structure my code and make it easier to parse visually and maintain. I tend to use two, sometimes three levels of headings. For the first two…
- Full page video background with media queries
How to build a video background that fully covers an element using iframes and media queries.
- Fade-in / fade-out effects with CSS
A common webdesign need is to show and hide elements with fade-in and fade-out effects. This is commonly done using JavaScript to manipulate the value of the opacity CSS property of elements over…
- Basic styling of button elements
You will want to use <button> elements for e.g. buttons triggering JavaScript actions, and not <a href="#">…</a> which has different semantics. Here’s how to reset button styles efficiently.
- Simple base stylesheet
This is a base stylesheet that I use in some of my projects as an alternative to CSS Resets. I don’t just copy it and go on writing other CSS styles, but tend to modify the rules to fit each project. G…
- Empêcher les flottants de dépasser de leur conteneur
Par défaut dans les navigateurs, les éléments positionnés grâce à la propriété CSS float (aussi appelés flottants, ou en anglais floats) sortent du flux de leur conteneur. Autrement dit, les flottant…
- La fusion des marges en CSS
D’où viennent les écarts étranges que l’on observe parfois entre certains blocs d’une page? Comment se fait-il que des marges disparaissent? Et pourquoi cette marge-là semble-t-elle s’appliquer à mon conteneur et pas à mon titre ou mon paragraphe? La fusion des marges pourrait bien être derrière tous ces mystères.
- HasLayout et bugs de rendu dans Internet Explorer 6-7
Le HasLayout est un mécanisme internet d'Internet Explorer 6 et 7, qui provoque de nombreux problèmes de rendu (bugs d'affichage) ou à l'inverse permet d'en éviter ou corriger. Cet article présente ce m…
- Guide de survie du positionnement CSS
Cet article de début 2009 concerne le positionnement CSS compatible avec Internet Explorer 6 et 7. Il mentionne seulement les possibilités supplémentaires de CSS 2.1 (IE8+), et ne mentionne pas ce…
- Gabarits HTML et CSS simples
J’ai créé ces 11 gabarits pour la formation Elephorm Apprendre XHTML et CSS, en partenariat avec Alsacréations, site francophone de référence sur CSS et les standards du Web. Ils correspondent aux types …
- Design fluide en trois colonnes avec “float”
Cet article décrit une technique obsolète, qui peut être facilement remplacée par des techniques plus modernes :CSS Grid Layout, CSS Flexbox Beaucoup de sites web présentent une mise en page sur t…
- Gérer la taille du texte avec les “em”
Pour améliorer sensiblement l’accessibilité d’un site web, il faut permettre le redimensionnement du texte, afin qu’il s’adapte aux résolutions et aux paramètres des utilisateurs. Pour cela, on utilisera l…