Muy buenas shurs,
he estado estos días intentado hacer unas cosillas con csss y html pero no me han salido como yo esperaba, y pues he probado de mil maneras pero con ninguna funciona.
En principio os paso los códigos html y css:
HTML Código HTML:
<div class="container">
<span class="pull-left logo-container">
<img class="logo" src="{$my_base_url}/templates/bootstrap/img/logo-pic.png" width="100%" height="100%">
</span>
</div> CSS
Código:
.logo-main {
margin:32px 0 20px 0;
padding: 10px;
background-image: url(../img/logo-pic);
}
.logo-container {
margin:32px 0 20px 0;
padding: 10px;
-webkit-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
box-shadow: 0px 0px 10px 5px rgba(0, 0, 0, 0.2);
}
.logo-blur {
margin:32px 0 20px 0;
padding: 10px;
-webkit-filter: blur(5px);
}
.logo {
display:block;
background:no-repeat url(../img/logo3.png);
background-size:100% auto;
}
Lo que quiero hacer es desenfocar el rectángulo generado con "logo-container" pero sin desenfocar la imágen, es decir el logo. He probado de mil formas y siempre pasa igual, o se descuadra todo o se desenfoca el logo también.
Un saludo!