Dotted Background With Pure Html/css - PeakU

Trang chủ » Html Css Dotted Background » Dotted Background With Pure Html/css - PeakU

Có thể bạn quan tâm

  • Jobs
  • About Us
  • Jobs
    • Home
    • Jobs
    • Courses and challenges
  • Businesses
    • Home
    • Post vacancy
    • Our process
    • Pricing
    • Assessments
    • Payroll
    • Blog
    • Sales
    • Salary Calculator

0

202
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.

ingrese la descripción de la imagen aquí

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

frontend javascript html css over 3 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 3 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 3 years ago · Santiago Trujillo Report Answer question Cancel Submit Ask a question
Find remote jobs

Andres GPT

Show me some job opportunities There's an error!

Từ khóa » Html Css Dotted Background