Overlay de boîte de dialogue en 1 ligne (Lea Verou)

Une astuce pour créer un overlay, cette couleur souvent sombre qui recouvre toute la fenêtre lors de l’ouverture d’une boîte de dialogue (lightbox, shadowbox, peu importe le nom qu’on lui donne – je crois qu’on n’a pas d’équivalent en français), en une seule ligne de css, toute simple, très… très leaverouéenne :3

Une petite démo ici : http://dabblet.com/gist/5861450

À noter qu’on ne peut pas mettre de box-shadow à la boîte de dialogue, attention : en effet, le outline prendra effet après le box-shadow, et pas dessous. On peut y remédier en utilisant un box-shadow gigantesque en lieu et place de l’outline, mais les performances s’en trouveront très fortement dégradées : le calcul d’une ombre est plus demandeur que celui d’un outline.

Laisser une réponse

Your email address will not be published. Required fields are marked *

To create code blocks or other preformatted text, indent by four spaces:

    This will be displayed in a monospaced font. The first four 
    spaces will be stripped off, but all other whitespace
    will be preserved.
    
    Markdown is turned off in code blocks:
     [This is not a link](http://example.com)

To create not a block, but an inline code span, use backticks:

Here is some inline `code`.

For more help see http://daringfireball.net/projects/markdown/syntax