0
220
Viewsfondo punteado con html/css puro
Necesito diseñar el fondo del elemento con puntos como en la imagen. Probé mucho de la web, pero necesito exactamente como en la imagen.
No entiendo todas las cosas relacionadas con el gradiente lineal encontrado, como "combinación de fondo", "gradinet radial", pero no puedo obtener exactamente lo que quiero.
background: linear-gradient( /* background color fading left to right , to blend with every others gradient bg */ to left, #fff, #fff), repeating-linear-gradient( /* horizontal white lines hidding a row of dots */ to bottom, transparent 0, transparent 32px, white 32px, white 40px, transparent 40px ), repeating-linear-gradient( /* vertical lines hidding a col of dots */ to right, transparent 0, transparent 32px, white 32px, white 40px, transparent 40px ), radial-gradient( /* dot repeated via background-size */ circle at 5px 5px, #2f4e79 1px, transparent 2px, transparent 8px ) 0 0 / 8px 8px; background-blend-mode: multiply, /* only blend the first layer to keep dots hidden */ normal, normal, normal;esto es lo que obtengo https://jsbin.com/poyoqajima/edit?html,css,output
·
Santiago Trujillo
2 answers
Answer question0
.dotted { height:500px; width:500px; background-image: radial-gradient(#ccc 10%, transparent 10%), radial-gradient(#ccc 10%, transparent 10%); background-color: #fff; background-position: 0 0, 50px 50px; background-size: 50px 50px; } <div class='dotted'></div>puedes jugar con los colores y el tamaño
·
Santiago Trujillo
Report
0
puedes usar este patrón
body{margin:0;} <div style="height: 100vh"> <svg width="100%" height="100%"> <defs> <pattern id="pattern-bg" x="0" y="0" width="80" height="80" viewBox =”0 0 80 80” patternUnits="userSpaceOnUse"> <circle fill="#bee9e8" cx="20" cy="20" r="12.5"></circle> </pattern> </defs> <rect x="0" y="0" width="100%" height="100%" fill="url(#pattern-bg)"></rect> </svg> </div>tamaño y color de los círculos que puedes cambiar
·
Santiago Trujillo
Report
Answer question