CSS Opacity Trick

One of the most underrated ways of defining color using css is rgba. Majority of the crowd defines colors directly by providing the Hex values (#000 etc). Not many know the actual power of rgba.

Alpha and Opacity, they’re totally different!

Yes, you read that right. Using opacity affects all children elements as well. Therefore, if you want to make sure only the opacity of a specific element is changed, it’s best to use the rgba values for the background property.

The syntax for rgba is as follows:

rgba(0,0,0,0.5);

As you might be knowing:
r – Red
g – Green
b – Blue
a – Alpha ranging between 0.0 (fully transparent) to 1.0 (fully opaque)

All that’s the nerdy stuff for the beginners who probably don’t know what any of that means. The main fun lies in the trick I got for you. It looks amazing for website headers –

What we’ll be using for the basic HTML skeleton:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Opacity Trick</title>
</head>
<body>
<nav>
<a href="#">A Common Developer</a>
<form class="form1">
<input type="text" name="" value="">
<input type="submit" name="" value="SEARCH">
</form>
</nav>
</body>
</html>

This is really simple HTML to understand. The real magic happens with the CSS:-

<style>
body{
margin: 0px;
}
nav{
background: #006064;
padding: 30px;
position: relative;
}
.form1{
display: inline-block;
position: absolute;
right: 35px;
top: 15px;
}
.form1 [type="text"]{
background: rgba(255,255,255,0.3);
color: rgba(0,0,0,0.6);
padding: 15px;
font-family: sans-serif;
font-size: 18px;
border-radius: 4px 0px 0px 4px;
transition: 0.1s linear;
border: none;
}
.form1 [type="text"]:active, [type="text"]:hover{
background: rgba(255,255,255,0.5);
transition: 0.1s linear;
}
.form1 [type="submit"]{
background: rgba(255,255,255,0.3);
color: rgba(255,255,255,0.5);
padding: 17px;
margin-left: -4px;
font-family: sans-serif;
font-size: 15px;
border-radius: 0px 4px 4px 0px;
transition: 0.1s linear;
border: none;
border-left: 1px solid rgba(255,255,255,0.1);
cursor:pointer;
}
a{
text-decoration: none;
font-weight: bold;
background: rgba(255,255,255,0.7);
color: rgba(0,0,0,0.6);
padding: 15px;
font-family: sans-serif;
font-size: 18px;
border-radius: 4px;
}
</style>

As you could see, we’ve used just normal properties. Nothing too fancy at all, yet it renders such beautiful results. This is just one such application of rgba that you could apply in your websites. There are lots of other ways you could take advantage of what it can do for you.

The HTML Skeleton
The HTML Skeleton

 

Happy coding 😉

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

Create a free website or blog at WordPress.com.

Up ↑

%d bloggers like this: