Fondo borroso en CSS3 2g3o6b

  27672z

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales de fondo de despertar borroso - blurry waken background en CSS3. Una vista previa del nuevo elemento de dialog

<style>
  main {
    width: 100%;
    -select: none;
    font: 14px / 1 Helvetica, sans-serif;
  }
  main {
    position: relative;
    padding: 30px 50px;
    hyphens: auto;   
    text-align: justify; 
    transition: .6s filter;
  }
  article.de-emphasized{
    filter: blur(5px);
  }
  article .btn{
    padding: 6px 1em;
    border-radius: 3px;
    outline: none;
  }
  dialog{
    width: 400px; height: 120px;
    text-align: center;
    line-height: 84px;
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 .1em .2em rgba(0,0,0,.5), 0 0 0 50vmax rgba(0,0,0,.3);
    z-index: 99;
  }
  dialog:not([open]){
    display: none;
  }
</style>

<main>
    <article ref="article">
      <button class="btn" id="show">Mostrar dialogo</button>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p>
      <p>Tutoriales En Linea es un portal web de tutoriales, cursos, manuales, trucos, tips, novedades, video tutoriales, formas de ganar dinero online, entretenimiento y demás. También es un sistemas instructivos de autoaprendizaje que pretenden simular al maestro y muestran al  el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...
      </p>
    </article>
    <dialog ref="dialog" id="dialog">
      Hi~ I'm a dialog. Click to close.
    </dialog>
</main>

<script>var dialog = document.getElementById('dialog');
var showBtn = document.getElementById('show');
var closeBtn = document.getElementById('close');

// Setup an event listener for the show button.
showBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Show the dialog.
  dialog.show();
});

// Setup an event listener for the close button.
closeBtn.addEventListener('click', function(e) {
  e.preventDefault();

  // Close the dialog.
  dialog.close();
});</script>

Ver resultado