web-dev-qa-db-fra.com

Comment créer un effet de verre dépoli en utilisant CSS?

Je voudrais créer un div qui est fixé dans une position et le rendre translucide - rendant le contenu derrière lui partiellement visible et flou. Le style que je recherche est similaire au div des vignettes 'See All' dans le site Apple .

La seule chose que je peux faire est de régler opacity: 0.9 mais je ne peux pas brouiller le contenu qui passe sous div.

Remarque: le div a une position fixe et le fond défile. L'arrière-plan qui défile est un mélange de texte et de photos.

htmlcssimage-processingtransparencycss-filters
11
user2463516

CSS

CSS 3 a un filtre de flou ( ( uniquement webkit pour le moment novembre 2014 ):

-webkit-filter: blur(3px); /*chrome (Android), safari (ios), opera*/

IE 4-9 prend en charge un filtre non standard

filter:progid:DXImageTransform.Microsoft.Blur(PixelRadius='3')

Voir une belle démo pour le flou et les autres filtres ici.

webkit CSS filter blur example

Pour référence future voici le tableau de compatibilité pour le filtre CSS . Firefox semble obtenir la fonctionnalité de la v35 + alors que même IE11 ne semble pas avoir de compatibilité.

SVG

Une alternative utilise svg ( sans danger pour IE9 et supérieur ):

filter: url(blur.svg#blur);

SVG:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg">
   <filter id="blur">
       <feGaussianBlur stdDeviation="3" />
   </filter>
</svg>

démo jsFiddle

Javascript

Vous obtiendrez la compatibilité de navigateur la plus élevée avec javascript, mais généralement les performances les plus lentes et la complexité ajoutée à votre js.

23
patrickf

Vous pouvez utiliser un filtre d'image CSS.

-webkit-filter: blur(2px);
filter        : blur(2px);

Plus d'informations sur les filtres d'image CSS:

Démo: JSFIDDLE Blur filter exemple

Mais en fait, ils utilisent du JPG prétraité et l'utilisent simplement comme superposition dans la bonne position.

#background {
    position: absolute;
    left: 10px;
    top: 10px;
    width: 600px;
    height: 600px;

    background-image: url(http://images.Apple.com/home/images/osx_hero.jpg);
    background-position: 0 0;
}
#blur {
    position: absolute;
    left: 50px;
    top: 50px;
    width: 120px;
    height: 500px;

    background-image: url(http://images.Apple.com/home/images/osx_hero_blur.jpg);
    background-position: -50px -50px;
}

<div id="background">
    <div id="blur"></div>
</div>

Démo: JSFIDDLE CSS blur technique

8
Vitim.us

Vous m'avez donné envie d'essayer, alors je l'ai fait, consultez l'exemple ici:

http://codepen.io/Edo_B/pen/cLbrt

En utilisant:

  1. Filtres CSS accélérés HW
  2. JS pour l'affectation de classe et les événements de touches fléchées
  3. Images Clip CSS, propriété

C'est tout.

Je crois également que cela pourrait être fait dynamiquement pour n'importe quel écran si vous utilisez un canevas pour copier le dom actuel et le brouiller.

2
Edo Ben Shitrit

Cela devrait arriver dans les navigateurs à l'avenir sous la forme d'un filtre CSS appelé backdrop-filter. Il n'y a pratiquement aucun support pour le moment. Pour la prise en charge du navigateur, voir: http://caniuse.com/#feat=css-backdrop-filter

Ce filtre CSS fera le verre dépoli sans affaires drôles ou hacks. Ça va juste le faire.

Quelqu'un en a enregistré une démo sur Vine, et ça a l'air vraiment bien. Ils utilisaient Safari tous les soirs pour accéder au filtre CSS. https://Vine.co/v/OxmjlxdxKxl

2
wle8300

Il suffit de mettre la même image (ou des parties de celle-ci) avec l'opacité .9 quelques pixels gauche/droite/haut/bas - voilà

1
Humer IT

Certains navigateurs prennent en charge la nouvelle propriété CSS backdrop-filter. Cette propriété vous permet d'ajouter un effet "semblable à du verre dépoli" sur un élément sans utiliser les pseudo-classes.

Exemple:

element {
    background: rgba(255, 255, 255, .5);
    backdrop-filter: blur(10px);
}

https://developer.mozilla.org/en-US/docs/Web/CSS/backdrop-filter

0
Vladimir Jovanović