Ver ❯
Herramientas SEO
Tamaño del resultado:
668 x 574
×
Cambiar Orientacion
Cambiar tema, Oscuro/Luz
<!doctype html> <html lang="es"> <head> <meta charset="utf-8"> <title>Trucos y efectos de CSS3 - Tutoriales En Linea</title> </head> <body> <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> </body> </html>