Inicia sesión


Contenido fijo de fondo completo en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite efectos visuales en estructura y diseño en contenido fijo de fondo completo - full background fixed content en CSS3.
Background:calc()
Establezca el relleno izquierdo y derecho del elemento al 50% del ancho del elemento padre menos la mitad del contenido del ancho igual. No es necesario establecer el ancho ~
<style>
  main{
    width: 100%;
  }
  h2.title {
    color: white;
    margin-top: 1em;
    margin-bottom: 1em;
  }
  header{
    background: #7890b4;
    color: white;
  }
  footer{
    background: rgba(180,160,120,.05);
  }
  .main > header,
  .main > section,
  .main > footer{
      padding: .1em calc(50% - 329px);
      text-align: justify;
      hyphens: auto;
  }
</style>

  <main class="main">
    <header>
      <h2 class="title">Trucos y efecto en CSS3 - Tutoriales En Linea</h2>
    </header>
    <section>
      <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 usuario el desarrollo de algún procedimiento o los pasos para realizar determinada actividad...</p>
    </section>
    <footer>
      <p>&copy; 2019 TL</p>
      <p>Trucos de CSS3 que necesita saber para el desarrollador web.</p>
    </footer>
 </main>
Ver resultado


  • 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!






Crecimiento mundial en el mercado de software de diseño PCB para el 2020 - 2029

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-13
  • Categorias: Desarrolladores Lenguajes De Programacion Software Noticias Tutorial

Historia de los sistemas operativos

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Microsoft Windows Apple Ordenador Noticias Tutorial Informatica

Vacía tu mente, no tengas forma, ni figura

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2019-11-12
  • Categorias: Estilo 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