Articles tagged with “css”

Today we’re talking about how transparent iframes, dark mode, unreadable text and varying levels of browser support are doing my head in. But don’t worry, there’s light at the end of the tunnel.

html css browsers

J’ai donné une petite interview pour le site alsacreations.com, un site communautaire autour des technologies web.

alsacreations.com css frontend

Learn how to create an accessible button style which can be used with the correct semantic element: <a> or <button>.

html css accessibility

It’s definitely possible! But it’s not as easy as using linear-gradient in CSS. We explore a few techniques for using gradient fills on SVG icons in a web page.

svg css

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.

css svg

Styling HTML elements as if they were plain Markdown text.

html css

Pass several colors and styles to a SVG symbol instance, using CSS Custom Properties. This requires preparing SVG icons to accept specific names.

svg css

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 typography rwd

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.

css talk

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.

css typography

When using “object-fit: contain”, the painted image may be smaller than the actual <img> element. Styling this image becomes challenging.

css

Some demos of how em-based media queries and px-based widths can become mismatched, and should be avoided.

css rwd

A series of tests for inserting content in “::before” and “::after” pseudo-elements.

css

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 …

html css

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 …

css

How to build a video background that fully covers an element using iframes and media queries.

html 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 …

css

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.

html css

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. …

css

html css outdated

What can you put in a ::before?

css

Une page de test pour la propriété CSS font-size-adjust, qui permet d’ajuster la taille du texte en visant un ratio entre hauteur des minuscules (x-height) et taille du texte (font-size).

css browsers

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 …

alsacreations.com css

css outdated

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.

alsacreations.com css

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 …

alsacreations.com css outdated

Cet article s'adresse à ceux qui ont déjà quelques notions de positionnement CSS, mais qui se demandent s'ils l'utilisent correctement, ou qui galèrent pour mettre en pratique leurs connaissances …

alsacreations.com css outdated

alsacreations.com html css outdated

J’ai créé les 11 gabarits de mise en page suivants en 2008 pour la formation Elephorm Apprendre XHTML et CSS. Ils correspondent aux types de mise en page de site web courants à l’époque, utilisent …

html css outdated

css outdated

css outdated

html css outdated

css test outdated

css outdated

Beaucoup de sites web présentent une mise en page sur trois colonnes, avec une colonne centrale de contenu et des colonnes latérales. Ce tutoriel très complet montre comment on peut utiliser les …

alsacreations.com css outdated

css outdated

html css outdated

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 …

alsacreations.com css accessibility typography

css outdated

css outdated

css outdated