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

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!






Cómo conectar un cable de fibra óptica en casa

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-20
  • Categorias: Telefonia Internet Red Wifi Noticias Tutorial

Cómo usar la característica Blur en Photoshop CC

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-20
  • Categorias: Adobe PhotoShop Software Noticias Tutorial

Carga lenta de imágenes

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-01-19
  • Categorias: Diseño Web html5 javascript WebSite webmasters 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