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.

http://www.nullpointer.co.uk

http://29a.ch

http://cedricvillani.org: minimalistic & clean

https://swiftcoder.wordpress.com

http://www.aladyinlondon.com

http://jenifferdake.net

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.

<style>
#imagewell {
    position: absolute;
    top:0;left:0;bottom:0;right:0;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}
</style>
<div id="imagewell" style="background-image: url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0f/Grosser_Panda.JPG/300px-Grosser_Panda.JPG');">
</div>

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:

Resources:

  • http://youmightnotneedjs.com/

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 :