Dotted Background With Pure Html/css - PeakU

• Jobs
• About Us
• For professionals
  • Home
  • Jobs
  • Courses and challenges
  • Questions
  • Teachers
• For business
  • Home
  • Post vacancy
  • Our process
  • Pricing
  • Assessments
  • Payroll
  • Blog
  • Sales
  • Salary Calculator

0

166

Views

fondo 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

javascript html frontend css over 2 years ago · Santiago Trujillo

2 answers

Answer question

0

.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

over 2 years ago · 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

over 2 years ago · Santiago Trujillo Report Answer question Cancel Submit Ask a question

Find remote jobs

Andres GPT

Recommend me some offers I have an error