Blog de François Becker

Aller au contenu | Aller au menu | Aller à la recherche

dimanche 5 janvier 2014

Nice personal websites

Some pretty personal websites. minimalistic & clean

jeudi 16 août 2012

HTML&CSS container of a maximized image

When developing a web gallery, it can be usefull to maximize the image to the screen, so that

  • the proportions are preserved
  • the whole image fits the screen.

Here is a method for that, in pure HTML & CSS.

#imagewell {
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
<div id="imagewell" style="background-image: url('');">

samedi 19 mai 2012

CSS Tricks

Here are some CSS tricks I use.

Reset the style:

* { margin:0; padding:0; }
h1, h2, h3, h4, h5, h6 { line-height: 100%; margin: 0.15em 0 0 0; }
li { line-height: 133%; }
p { margin: 0.5em 0; }

Always have a scrollbar, at right-hand side (otherwise centered colums "move" when switching between pages which do or don't overflow the screen):

html {
        overflow: scrollbars-vertical;
        overflow: -moz-scrollbars-vertical;
        overflow: -webkit-scrollbars-vertical;
        overflow-y: scroll;

Style the quote tag <q></q>:

q:before { content: "« "; color:grey; }
q:after { content: " »"; color:grey; }

See also other quotation mark glyphs.

Other nice CSS tricks:



This page will be updated with more tricks in the future.

dimanche 23 octobre 2011

Ma boîte à outils pour le webdesign

A toutes fins utiles, voici des outils très pratiques pour les webmasters et les webdesigners :

Et quelques outils curieux/amusants :