Inicia sesión


bordes translúcidos CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite que los bordes se vean translúcido.

De manera predeterminada, el color del fondo alcanzará la capa inferior del borde, lo que indica que el efecto del borde translúcido establecido anteriormente estará cubierto. 

CSS3 nos permite cambiar el comportamiento predeterminado del fondo configurando el background-clip:padding-box para lograr lo este truco.
<style>
  .tl{
    width:70%;
    padding: 60px 80px 80px;
    background: #b4a078;
  }
  div{
    padding: 12px;
    margin: 20px auto;
    background: white;
    border: 10px solid hsla(0, 0%, 100%, .5);
  }
  label{
    color: #f4f0ea;
  }
  input[id="pb"]:checked ~ div{
    background-clip: padding-box;
  }
</style>
  <div class="tl">
    <input id="pb" type="checkbox" checked/>
    <label for="pb">padding-box(default)</label>
    <div>Esto es un un párrafo de texto de relleno. Tutoriales En Linea...</div>
</div>
Ver resultado...


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




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






Efectos jQuery - Ocultar y mostrar

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Como abrir un enlace con jQuery

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-17
  • Categorias: Diseño Web Lenguajes De Programacion html5 jQuery WebSite webmasters Noticias Tutorial

Cómo rastrear a los usuarios de Adblock usando Google Analytics

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-15
  • Categorias: Google WebSite Trucos y tips Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Cómo insertar código JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Expresiones JavaScript para especificar valores de atributos en HTML

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-10-21
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial