Inicia sesión




Línea de un píxel en CSS3

En este Tutoriales En Linea les traemos este truco de efecto que permite una línea de un píxel - One pixel line y borde de un 1px -  achieve 1px independent border en CSS3·...
box-shadow + transform lograr una línea de píxeles
<style>
  main {
    width: 100%;
    padding: 52px 29px;
    display: flex;
    justify-content: center;
  }
  span.one-pixel-line {
    width: 229px;
    position: relative;
  }
  span.one-pixel-line::after {
    content: '';
    width: 229px;
    position: absolute;
    bottom: 0; left: 0;
    box-shadow: 0 0 0 1px #b4a078;
    transform-origin: 0 bottom;
    transform: scaleY(.5) translateZ(0);
  }
  @media (min-resolution: 2dppx) {
    span.one-pixel-line.shadow::after {
      box-shadow: 0 0 0 .5px #b4a078;
    }
  }
  @media (min-resolution: 3dppx) {
    span.one-pixel-line.shadow::after {
      box-shadow: 0 0 0 .333333px #b4a078;
    }
  }
</style>

<main class="main">
    <span class="one-pixel-line shadow"></span>
</main>
Ver resultado
border + pseudo-element + transform lograr 1px frontera independiente
<style>
  main {
    width: 100%;
    padding: 52px 29px;
    display: flex;
    justify-content: center;
  }
  span.one-pixel-line {
    display: block;
    width: 229px; height: 229px;
    position: relative;
  }
  span.one-pixel-line.right,
  span.one-pixel-line.bottom,
  span.one-pixel-line.left {
    margin-left: -229px;
  }
  span.one-pixel-line::before,
  span.one-pixel-line::after {
    content: "";
    display: block;
    position: absolute;
    transform-origin: 0 0;
  }
  /* top line */
  span.one-pixel-line.top::before {
    width: 100%;
    top: 0; left: 0;
    border-top: 1px solid #b4a078;
    transform-origin: 0 top;
  }
  @media (min-resolution: 2dppx) {
    span.one-pixel-line.top::before {
      width: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.one-pixel-line.top::before {
      width: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
  /* right line */
  span.one-pixel-line.right::after {
    height: 100%;
    top: 0; right: 0;
    border-right: 1px solid #b4a078;
    transform-origin: right 0;
  }
  @media (min-resolution: 2dppx) {
    span.one-pixel-line.right::after {
      height: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.one-pixel-line.right::after {
      height: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
  /* bottom line */
  span.one-pixel-line.bottom::after {
    width: 100%;
    bottom: 0; left: 0;
    border-bottom: 1px solid #b4a078;
    transform-origin: 0 bottom;
  }
  @media (min-resolution: 2dppx) {
    span.one-pixel-line.bottom::after {
      width: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.one-pixel-line.bottom::after {
      width: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
  /* left line */
  span.one-pixel-line.left::before {
    height: 100%;
    top: 0; left: 0;
    border-left: 1px solid #b4a078;
    transform-origin: 0 left;
  }
  @media (min-resolution: 2dppx) {
    span.one-pixel-line.left::before {s
      height: 200%;
      transform: scale(.5) translateZ(0);
    }
  }
  @media (min-resolution: 3dppx) {
    span.one-pixel-line.left::before {
      height: 300%;
      transform: scale(.333333) translateZ(0);
    }
  }
</style>

<main class="main">
    <span class="one-pixel-line top"></span>
    <span class="one-pixel-line right"></span>
    <span class="one-pixel-line bottom"></span>
    <span class="one-pixel-line left"></span>
</main>
Ver resultado

Te sugiero seguir leyendo...


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

Línea de un píxel en CSS3
Línea de un píxel en CSS3 Línea de un píxel en CSS3...
Tutoriales en linea




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






No pierdas tiempo con las web de Pago por clic

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-06
  • Categorias: PTC WebSite Internet Trucos y tips Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Como descargar videos de YouTube, Instagram, Facebook y Twitter

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-04
  • Categorias: YouTube Audio Video Redes Sociales Facebook Twitter Instagram WebSite Noticias Tutorial

¿Por qué no eres un famoso diseñador gráfico?

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-08-05
  • Categorias: Cursos Noticias Tutorial

Curso de iniciación de JavaScript

  • Autor:
  • Editor: Tutoriales En Linea
  • Fecha:2020-07-26
  • Categorias: Lenguajes De Programacion javascript Cursos Noticias Tutorial

Curso de CSS avanzado

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