How to make the background of a div be dotted?

Asked

Viewed 956 times

2

How to make the background of an element div is dotted without using image?

inserir a descrição da imagem aqui

css3

3 answers

7


You can use a combination of background-image with gradient to achieve this:

div {
    width: 200px;
    height: 200px;
    background-image: -moz-linear-gradient(45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -moz-linear-gradient(45deg, transparent 75%, #666 75%), 
        -moz-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.25, #666), color-stop(.25, transparent)), 
        -webkit-gradient(linear, 0 100%, 100% 0, color-stop(.75, transparent), color-stop(.75, #666)), 
        -webkit-gradient(linear, 0 0, 100% 100%, color-stop(.75, transparent), color-stop(.75, #666));
    background-image: -webkit-linear-gradient(45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -webkit-linear-gradient(45deg, transparent 75%, #666 75%), 
        -webkit-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: -o-linear-gradient(45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(-45deg, #666 25%, transparent 25%), 
        -o-linear-gradient(45deg, transparent 75%, #666 75%), 
        -o-linear-gradient(-45deg, transparent 75%, #666 75%);
    background-image: linear-gradient(45deg, #666 25%, transparent 25%), 
        linear-gradient(-45deg, #666 25%, transparent 25%), 
        linear-gradient(45deg, transparent 75%, #666 75%), 
        linear-gradient(-45deg, transparent 75%, #666 75%);
    -moz-background-size: 2px 2px;
    background-size: 2px 2px;
    -webkit-background-size: 2px 2.1px; /* override value for webkit */
   background-position: 0 0, 1px 0, 1px -1px, 0px 1px;
}
 <div></div>

Added -moz and -webkit to support more browsers.

See more here in the English OS: https://stackoverflow.com/questions/13607117/css-css3-pixelate-dot-background

  • Yes @Renan, was still editing the reply but thanks for quoting!

2

A PEN BY Alejandro Prieto

div {
  text-align: center;
  font: bold 21px 'Oswald',sans-serif;
  text-shadow: 1px 1px 0 #fff, 2px 2px 0 #999;
  text-transform: uppercase;
  width:50%;
  height:50%;
}
.dotted {
  padding: 2.25em 1.6875em;
  background-image: -webkit-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -moz-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: -ms-repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  background-image: repeating-radial-gradient(center center, rgba(0,0,0,.2), rgba(0,0,0,.2) 1px, transparent 1px, transparent 100%);
  -webkit-background-size: 3px 3px;
  -moz-background-size: 3px 3px;
  background-size: 3px 3px;
  }

.stripped {
  padding: 2.25em 1.6875em;
  background-image: -webkit-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: -moz-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: -o-repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  background-image: repeating-linear-gradient(135deg, rgba(0,0,0,.3), rgba(0,0,0,.3) 1px, transparent 2px, transparent 2px, rgba(0,0,0,.3) 3px);
  -webkit-background-size: 4px 4px;
  -moz-background-size: 4px 4px;
  background-size: 4px 4px;
  }
<div class="dotted">Pontilhado</div>
<div class="stripped">Listrado</div>

by changing the px values you get interesting effects

0

I was able to make a more optimized and smooth version compatible with all browsers using the Leo Caracciolo code as a base:

backgroundPontilhado{
  background: radial-gradient(rgb(245, 245, 245), white);
  -webkit-background-image: -webkit-repeating-radial-gradient(rgb(245, 245, 245), white);
  -moz-background-image: -moz-radial-gradient(rgb(245, 245, 245), white);
  -o-background-image: -o-radial-gradient(rgb(245, 245, 245), white);

  background-size: 5px 5px;
  -webkit-background-size: 5px 5px;
  -moz-background-size: 5px 5px;
  -o-background-size: 5px 5px;
}

Browser other questions tagged css3

You are not signed in. Login or sign up in order to post.