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 –
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 –
To create the dots, we’ll take the help of CSS
radial-gradient property as outlined here. The relevant code snippet is as under:
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:
Let’s now take a look at the full HTML code for the above example:
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:
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
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:
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-2: Dotted Overlay with Box-Shadow
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.
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.
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.
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.