How to Style an Image with Dotted Overlay & Fancy Border Using CSS3

Style is something each of us already has, all we need to do is find it. Diane von Furstenberg

In a previous post we have seen how to create highly attractive CSS3 buttons with simple-to-use codes.

Now in this article we will do some more CSS3 tricks –

  1. overlaying an image with small dots of any color,
  2. using fancy borders around image, and
  3. creating text outline or text border.

So, there is quite a few on the plate. Let’s begin.

The first task is to create a dotted overlay on an image.

 

Dotted Overlay on Image

Dotted Overlay on Image

Take a look at the above example.

There are 2 factors to consider for creating dotted overlay on an image –

  1. creating the dots which will be an ‘image’ by itself, and
  2. positioning the ‘dots image’ exactly as needed on the background image.

To create the dots, we’ll take the help of CSS radial-gradient property as outlined here. The relevant code snippet is as under:

background: rgba(150, 150, 150, 0.6);
background-image: radial-gradient(black 33%, transparent 33%);
background-size: 3px 3px;

Next, to position the 2 images exactly over one another, we’ll take the help of CSS position property as explained here.

The suggestive HTML code is like this:

<div style="position: relative; width: 600px; height: 400px;">
<div style="position: absolute; top: 60px; left: 20px; width: 400px; height: 200px;">
<p>Any content goes here..</p>
</div></div>

Let’s now take a look at the full HTML code for the above example:

<div style="margin: 40px auto; width: 355px; height: 336px; position: relative;
background: url('https://hubskills.com/wp-content/uploads/online-teaching-guide-ebook-cover.png');
background-size: cover;">
<div style="position: absolute;
top: 108px;
left: 46px;
width: 260px;
height: 120px;
background: rgba(255, 255, 255, 0.8);
background-image: radial-gradient(#fcf 55%, transparent 35%);
background-size: 3px 3px;">
<p style="padding-top: 10px; text-align: center; font: normal normal 32px/26px 'Arial Black'; letter-spacing: -1px; color: #A6F; text-shadow: 1px 1px 1px #111;">Dotted Overlay on Image</p></div></div>

Let us study the HTML code for a moment.

As you can see, it is easy to change the appearance of the overlay dots by doing one or both of the following:

  1. 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.
  2. 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

Example 1

<div style="width: 767px; height: 431px; position: relative;
background: url('https://hubskills.com/wp-content/uploads/dotted-overlay-bg-image.png');
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;
border-image-slice: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
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>

 

Example-2: Dotted Overlay with Box-Shadow

Example 2

<div style="width: 767px; height: 431px; position: relative;
background: url('https://hubskills.com/wp-content/uploads/dotted-overlay-bg-image.png');
background-size: cover; box-shadow: 5px 10px 10px brown, -5px 10px 10px brown, 5px -10px 10px brown, -5px -10px 10px brown, 10px 5px 10px brown, -10px 5px 10px brown, 10px -5px 10px brown, -10px -5px 10px brown;">
<div style="position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 40, 30, 0.25);
background-image: radial-gradient(#fff 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 2</h4></div></div>

 

Example-3: Dotted Overlay with Border Linear Gradient

Let us finally use actual borders for the following dotted overlay image.

In this example we will use the border-image property to create linear-gradient of 2 colors in the diagonal direction from top-left to bottom-right. For more explanation refer this post.

The HTML code for this example is given after the following image.

Example 3

<div style=" width: 767px; height: 431px; position: relative;
background: url('https://hubskills.com/wp-content/uploads/slider-bg-2.jpg');
background-size: cover; border: 15px solid transparent; border-image: linear-gradient(to bottom right, #963 0%, #9F9F9F 100%);
border-image-slice: 1;">
<div style="position: absolute; border: 1px solid #FFF;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 155, 55, 0.25);
background-image: radial-gradient(#000 5%, transparent 35%);
background-size: 3px 3px;">
<h4 style="margin: 20% 25%; text-align: center; color: #1e1e1e; font-size: 60px; font-weight: 600; text-shadow: 1px 1px 1px #fff;">Example 3</h4></div></div>

 

Creating Text Outline with CSS3

There is no doubt, borders can enhance the appearance of any element on the webpage. In the 3 examples above we have seen the use of borders to images.

Unfortunately there is no border property for plain text. However, we can still have borders around texts by cleverly using the text-shadow property as can be seen in the image below.

I’ve used the following code snippet to create white outline for the texts on the image.

text-shadow: 1px 0 0 #FFF,
-1px 0 0 #FFF,
0 1px 0 #FFF,
0 -1px 0 #FFF,
1px 1px #FFF,
-1px -1px 0 #FFF,
1px -1px 0 #FFF,
-1px 1px 0 #FFF;

Dotted Overlay on Image with Fancy Border & Text Outline

 

Conclusion

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.

2016-10-13T11:30:19+00:00 Web Design|

Leave A Comment

Monetize the teacher in you, teach globally