CSS - CSS3 Pixelate Dot Background

CSS - CSS3 pixelate dot background

Here's the best I could come up with to match your image. It's adapted from the example here by Lea Verou What will be your fallback for non css3 browsers?

body {
    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;
}

jsfiddle example

Make table cell(TD) have dotted background

Yes, you can e.g. create an image with a dotted background and set it as background image on a td element. This is possible even in HTML using the background attribute on a td tag; it works well, though it is formally non-conforming. So people usually recommend using CSS instead (specifically, the background-image property or the background shortcut property).

CSS3 scale() causes divs to become pixelated

The solution is to start your center circle as big as it needs to be, then scale it down as the reference starting point.

Then, on the hover event you scale up to 1, which will preserve the unpixelated center circle.

Reference: jsFiddle

Note other settings such as positioning are done due to compensate for these changes.

Status Update:

Consider instead of using border-radius to make circle, use ASCII Character of circle or outline
circle:

• ○ ☺ ☻ ☼

Reference: jsFiddle (Note positions are not calibrated.)

The above characters are essentially TEXT, hence use ANY CSS2 or CCS3 text or font property!

As certain characters become really big they do pixelate so use "reverse scale" method for these characters as previously answered but note, at least in Firefox, the transitions become expensive when super large fonts are used. Works best with medium to large fonts.

Tip: This ASCII based method may need the width and height properties for positioning to be realized correctly, so use that if positioning seems broken.

Dotted background overlay effect in CSS

Here's one way of doing it.

<body>
 <div id="overlay">
     image
</div>

<div id="page">
 <div id="content">
  ....

Basically, you add a container outside your page container.
Add a fixed position for it, and add a pseudo element :after to it and give it a background image.

Create leading dots in CSS

Taken from this article on Leader Dots with CSS:

The field label is wrapped in a div which has a small image of a dot applied repeatedly in the x direction as a background. This alone would cause the dots to flow under the text. So to nullify that effect, the text itself is then wrapped in a span where the background color is set to match the color of the background of the containing element.

Here is the CSS:
.dots { 
  background: url('dot.gif') repeat-x bottom; 
}
.field {
  background-color: #FFFFFF;
} 
To apply this to the example form, you would just use it as:
<div class="dots">
    <span class="field">LastName</span>
</div>

Here's a image to use for the dot: https://i.stack.imgur.com/otJN0.png

Demo in Stack Snippets

.dots {   background: url('https://i.stack.imgur.com/otJN0.png') repeat-x bottom; }.field {  background-color: #FFFFFF;}.link {  width: 150px;  display: inline-block;}

<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 1  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 2  </span></div>
<div class="row">  <div class="dots link">      <span class="field">Link</span>  </div>  <span class="chapter">      Chapter 3  </span></div>

How to apply a CSS blur filter to a background (not image)

  function myFunction() {    var Textfield  = document.getElementById("Textfield");       if (Textfield.value == "")      document.getElementById("back_div").classList.remove("blur");    else      document.getElementById("back_div").classList.add("blur");
  }

 .blur {      /* Add the blur effect */      filter: blur(2.5px);      -webkit-filter: blur(2.5px);    }

  <input id="Textfield" onkeyup="myFunction()" type="text">  <div id="back_div">test text</div>

I want to blur only the image but it affects everything

Using the code given in the question, and assuming it's the body that the background is required on, you can add a pseudo before element to the body and put the background on that and blur it.

That way only the image gets blurred, not everything else.

body {
  font-size: 15pt;
  width: 500px;
  height: 500px;
}

body::before {
  background-image: url("https://picsum.photos/id/1015/1024/768");
  filter: blur(8px);
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: inline-block;
  content: '';
  z-index: -1;
}

.trbp {
  width: 500px;
  height: 40px;
  border: black;
}

.trb {
  position: relative;
  left: 440px;
  width: 60px;
  background-color: cyan;
  border-radius: 5px;
  display: inline-block;
}

.btp {
  position: relative;
  top: 120px;
  left: 30px;
}

.bth {
  position: relative;
  top: 100px;
  left: 30px;
}

.blb {
  position: relative;
  top: 80px;
  left: 60px;
  border-radius: 4px;
  background-color: #0731D2;
}

<div class="trbp"><button class="trb">sign up</button></div>
<div class="aio">
  <h2 class="btp">welcom to</h2>
  <h2 class="bth">our site</h2>
  <button class="blb">about us</button></div>
<script src="main.js"></script>

CSS - CSS3 Pixelate Dot Background