Effetto sfocatura con css

**luca9** · 12-02-2014, 13:47

Ciao.
E' possibile fare un effetto di sfocatura come questo che si vede su icloud con i css?
Se no, come si può fare?

https://www.icloud.com/

**Prill** · 12-02-2014, 19:02

una cosa così http://tympanus.net/Tutorials/ItemBlur/ ?

**luca9** · 21-02-2014, 21:02

Si ma non proprio.
Il link che mi hai mandato è per la sfocatura degli oggetti.
Io vorrei proprio un div con sfondo e alcune immagini inserite che siano sfocate, dopo sopra un altro div con style absolute che si veda invece bene.
Vorrei avere proprio la sfondo del div tutto opaco sfumato.
Avete qualche idea?

**Prill** · 22-02-2014, 12:07

ti basta riprendere quell'esempio per la sfocatura e poi lo modifichi.
Un esempio di partenza, senza jquery e con un javascript che potrebbe esser scritto meglio:

codice HTML:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento senza titolo</title>

<style type="text/css">
<!--
body {
    background-color: #ccf; color:#000000
}
#cover { width:100%; height:100%; position:absolute; top:0; bottom:0; left:0; right:0; background-color:rgba(255,255,255,0.5); z-index:1; display:none}
#cover div{ width:300px; height:300px; margin:50px auto; border:10px solid #fff; border-radius:10px; background-color:#fff; padding-top:30px}

.wrapper { 
background-color:#fff;
width:90%; margin:0 auto;
    box-shadow: 
        0px 0px 0px 10px rgba(255,255,255,1), 
        1px 1px 3px 10px rgba(0,0,0,0.2);
    -webkit-transition: 
        opacity 0.4s linear, 
        -webkit-transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out;
    -moz-transition: 
        opacity 0.4s linear, 
        -moz-transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out;
    -o-transition: 
        opacity 0.4s linear, 
        -o-transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out;
    -ms-transition: 
        opacity 0.4s linear, 
        -ms-transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out;
    transition: 
        opacity 0.4s linear, 
        transform 0.4s ease-in-out, 
        box-shadow 0.4s ease-in-out;

}
.blur{
    box-shadow: 0px 0px 20px 10px rgba(255,255,255,1);
    -webkit-transform: scale(0.9);
    -moz-transform: scale(0.9);
    -o-transform: scale(0.9);
    -ms-transform: scale(0.9);
    transform: scale(0.9);
    opacity: 0.7;
    background-color:#fff
}
.blur *{
    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.9);
    color: rgba(0, 0, 0, 0);
    opacity: 0.5;}

-->
</style>
<script type="text/javascript">
function sfocatura () {
document.getElementById('cover').style.display='block';
var sfoca = document.getElementById("wrapper")
sfoca.className="blur"
} 
function ripristina () {
document.getElementById('cover').style.display='none';
var sfoca = document.getElementById("wrapper")
sfoca.className="wrapper";
} 
</script>
</head>

<body onload="sfocatura()">
<div id="cover" onclick="ripristina()">
 <div>clicca qui per chiudere il div che copre il contenuto e visualizzarlo senza sfocatura</div>
    </div>
<div id="wrapper"><p>questo div ha inizialmente un effetto sfocatura</p>
 <p><img src="immagine.gif" width="300" height="300" /></p>
</div>
</body>
</html>

**Prill** · 22-02-2014, 13:52

guarda anche http://demosthenes.info/blog/534/Cro...ser-Image-Blur e questo https://github.com/AbdiasSoftware/Realtime-Blur-JavaScript/

**mietitore85** · 27-02-2014, 11:50

ciao, ma non ti conviene caricare già un'immagine sfocata?

**luca9** · 27-02-2014, 15:31

Ci sto pensando seriamente e credo che mi convenga.

Discussione: Effetto sfocatura con css

Strumenti discussione

Ricerca discussione

Visualizza

Effetto sfocatura con css

Permessi di invio