Inicia sesión




Efecto de vidrio esmerilado en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de efecto de vidrio esmerilado - frosted glass effect en CSS3...
Background:hsla/rgba

<style>
  main{
    width: 100%;
    margin: auto;
    padding: 59px 29px;
    border-radius: .3em;
    text-shadow: 0 1px 1px hsla(0, 0%, 100%, .3); 
    box-shadow: 0 0 0 1px hsla(0, 0%, 100%, .3) inset, 0 .3em 1em rgba(0, 0, 0, 0.12);
    font: 150%/1.6 Baskerville, Palatino, serif;
  }
  main, main > div::before {
    background: url("https://tutorialesenlinea.es/uploads/posts/2019-03/1552231390_trucos_y_efectos_en_css3_-tutoriales_en_linea.jpg") fixed 0 / cover;
  }
  main > div::before{
    content: "";
    position: absolute;
    top: 0; right: 0; bottom: 0; left: 0; 
    z-index: -1; 
    filter: blur(10px);
    margin: -30px;
  }
  main > div{
    font-style: italic;
    color: #000;
    padding: 30px;
    hyphens: auto;
    background: hsla(0,0%,100%,.5);
    overflow: hidden;
    position: relative;
  }
  main > div cite{
    font-style: normal;
  }
  main footer {
    text-align: right;
  }
</style>

<main class="main">
    <div>
      "Oh Dios, podría estar limitado en pocas palabras y considerarme un rey del espacio infinito, si no es que tengo malos sueños.."<br>
      <footer>——
        <cite>William Shakespeare</cite>
      </footer>
    </div>
</main>
Ver resultado

Te sugiero seguir leyendo...



  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-03-10
  • Categorias: Diseño Web CSS3 html5 WebSite Noticias Tutorial




Información
Usuarios que no esten registrados no pueden dejar comentarios, te invitamos a que te registre!






Como posicionar mi página web

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: WebSite Marketing SEO Noticias Tutorial

¿Cómo usar una impresora láser A3?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: hardware Noticias Tutorial

Como hacer algoritmo

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-24
  • Categorias: Lenguajes De Programacion Algoritmos Software Noticias Tutorial

Curso de CSS avanzado

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 html5 Html Cursos Noticias Tutorial

Curso de Introducción a CSS

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-18
  • Categorias: Diseño Web CSS3 WebSite webmasters Cursos Noticias Tutorial

Curso básico de Javascript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-17
  • Categorias: Diseño Web javascript Cursos Noticias Tutorial