As you can see, it is easy to change the appearance of the overlay dots by doing one or both of the following:
Since the dots image is positioned absolute, it can be placed anywhere on the image including covering the image fully. See the examples coming below.
The dots can be styled to have any color and size as necessary. The background of the dots image can be similarly changed as required.
Using Fancy Borders with CSS
Among many ways to create fancy borders let me show you a couple of examples here.
In the first 2 examples we’ll use the box-shadow property, while the third one will be by using border linear-gradient.
It is important to note that in order to have equal amount of box-shadow on all sides of an element, the code snippet will be something like this:
box-shadow: 9px 18px 18px blue,
-9px 18px 18px blue,
9px -18px 18px blue,
-9px -18px 18px blue,
18px 9px 18px blue,
-18px 9px 18px blue,
18px -9px 18px blue,
-18px -9px 18px blue;
Here are 2 examples of fancy borders with box-shadow property. Each is followed by the HTML code used. You can also check out the dotted overlay examples covering the same image, but using different values for the style elements.
Example-1: Dotted Overlay with Box-Shadow
<div style="width: 767px; height: 431px; position: relative;
background-size: cover; box-shadow: 9px 18px 18px blue, -9px 18px 18px blue, 9px -18px 18px blue, -9px -18px 18px blue, 18px 9px 18px blue, -18px 9px 18px blue, 18px -9px 18px blue, -18px -9px 18px blue;">
<div style="position: absolute;
background: rgba(55, 155, 255, 0.25);
background-image: radial-gradient(#3f3 5%, transparent 50%);
background-size: 3px 3px;">
<h4 style="margin: 20% 25%; text-align: center; color: #2d2d2d; font-size: 60px; font-weight: 600; text-shadow: 1px 1px 1px #fff;">Example 1</h4></div></div>
Dotted Overlay on Image with Fancy Border & Text Outline
If you’re an amateur web designer like me, each of the three CSS tricks above can become handy at some point in your work.
It is important to note you don’t have to be a web designer pro to do them. The main point is, you have to know how to use readily available CSS codes to create good designs.
This I’ve been doing for a long time, and I’ve seen it’s not difficult to get the desired result once you’ve some basic idea of how the things work.
Your suggestions & tips are welcome. Share your mind in the comments below.
NOTE: I’ve used browser-independent CSS3 versions to define values for properties like text-shadow, box-shadow, etc. It is however considered good practice to specify the vendor-prefixed version first and then the non-prefixed (or browser-independent) version. The usual vendor-prefixed versions are -webkit for Chrome and Safari, -moz for Firefox, and -o for Opera. For more, refer this post.