Web Development

Create a Colorful Glass Wall

Colorfull glass wall
Written by Sandeep Likhar

Create a Colorful Glass Wall is the section 24 of Beginner’s Guide to CSS.

We guess you already know how to add an image to a HTML web page. Also we taught you how to change it’s alignment, change it’s position and make it as background kind of tricks. In this section we are going to look at changing it’s transparency and make it look like glass.

Creating transparent images with CSS is easy. We use the CSS opacity property for this purpose.

Obiwan Kenobi

This is the original image we are going to change.

Obiwan Kenobi

 

Seriously!!! This is not Photoshop. This is the same original image with an additional CSS style. See the code snippet.

[code language=”css”] img {
opacity: 0.4;
}
[/code]

The opacity property can take a value from 0.0 – 1.0. A lower value makes the element more transparent. See the same image with different values.

Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi Obiwan Kenobi
0.0  0.1  0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1.0

Usage of Opacity Property

Hover Effect with CSS Opacity

Here is a nice trick. If you add following code snippet to your image you will see something cool when you put your mouse cursor on the image. Try and see.

[code language=”css”] img {
opacity: 0.4;
}

img:hover {
opacity: 1.0;
}
[/code]

What we did was, we turned the transparency on in the image by default and remove it when the mouse cursor on the image and again turned on the transparency when the mouse cursor goes.

Star Wars

Glass Text with CSS Opacity

Now we are going to write something on a colorful glass. To do this first we need to create a division tag with a background image on it. Inside of it we create another small division tag where we place our text. Look below how it our glass looks like.

Star Wars is an American epic space opera franchise centered on a film series created by George Lucas. The franchise’s storyline contain with strong influences from philosophy and religion. It depicts a galaxy described as far, far away in the distant past, and it commonly portrays Jedi as a representation of good, in conflict with the Sith, their evil counterpart.

See how this was done.

[code language=”css”] div.background {
width: 500px;
height: 250px;
background: url(klematis.jpg) repeat;
border: 2px solid black;
}

div.transbox {
width: 400px;
height: 180px;
margin: 30px 50px;
background-color: #ffffff;
border: 1px solid black;
opacity: 0.6;
filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
margin: 30px 40px;
font-weight: bold;
color: #000000;
}
[/code] [code language=”html”]

Star Wars is an American epic space opera franchise centered on a film series created by George Lucas. The franchise’s storyline contain with strong influences from philosophy and religion. It depicts a galaxy described as far, far away in the distant past, and it commonly portrays Jedi as a representation of good, in conflict with the Sith, their evil counterpart.

[/code]

In this section we learned the usage of opacity property in CSS. Combining the opacity with hover effect we can come up with cool tricks which make the users more attractive and your web page looks alive. In the next section we are moving back to selectors again.

WHAT’S NEXT?

Let’s explore Media Types as Selectors.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW

About the author

Sandeep Likhar

Sandeep Likhar from Indore India, Blogger, eBook Designer and Founder of LetsDnD. Having five years of experience in industry as a Digital Publishing Expert and eBook Converter providing services to Authors, Publishers and distributors worldwide. Proficient in converting books into various formats HTML, epub, mobi, word, PDF including all major online platforms iTunes, Kobo, Kindle, Createspace, B&N, Smashwords and more.

Leave a Reply

24 Comments on "Create a Colorful Glass Wall"

Notify of
avatar
Sort by:   newest | oldest | most voted
Takisha
Guest

Excellent post. I was checking constantly this blog and I’m impressed!
Extremely useful info particularly the last part :
) I care for such info a lot. I was seeking this particular information for a very long time.
Thank you and best of luck.

Joie
Guest

Thanks very interesting blog!

Margaret
Guest

When some one searches for his required thing, thus he/she desires to be available that in detail, thus that thing is maintained over here.

Tessa Hash
Guest

These are really wonderful ideas in about blogging.
You have touched some fastidious factors here. Any way keep up writing.

Melaine Lillico
Guest

Recently I have been looking on Bing hoping to come across websites with stories relating to free tutorials and wound
up on letsdnd.com. Thank you for writing this valuable post.

I really want to say thanks – this post is exactly what I wanted.

Serena
Guest

Оh my goodness! Amazing article dude! Thanks!!

Stanley Buzzard
Guest

If some one needs expert view concerning blogging afterward i suggest him/her to pay
a visit this weblog, Keep up the nice work.

Modesto
Guest

It’s fantastic tat you are getting ideas from this piece of writing as well as from oour argument
made at this place.

Elma Saville
Guest

Hi, its good post regarding media print, we all know media is
a wonderful source of information.

Christopher
Guest

Excellent post. I was checking constantly this blog and I’m impressed!
Extremely helpful info specially the last part 🙂 I care for such info much.
I was looking for this certain info for a very long time.
Thank you and good luck.

Derrick
Guest

As the admin of this web page is working, no doubt verry rapidly it will be famous, due to its quality
contents.

Sabina Richart
Guest

I’m truly enjoying the design and layout of your website.
It’s a very easy on the eyes which makes it much more
enjoyable for me to come here and visit more often. Did you hire out a developer to
create your theme? Exceptional work!

hamish
Guest

This page definitely has all the information and facts I wanted concerning this subject and didn’t
know who to ask.

jaimedunningham
Guest

Sweet blog! I found it while browsing on Yahoo News.
Do you have any suggestions on how to get listed in Yahoo News?
I’ve been trying for a while but I never seem to get there!
Appreciate it

Gus Jeffries
Guest

Hello there, just became aware of your blog through Google, and found that it is
tryly informative. I am going to watch out for Brussels.
I’ll appreciate if you continue this in future.
Lots of people will be benefited from your writing. Cheers!

Margaret
Guest

Great post.

katherina
Guest

Hello my loved one! I wish to say that this article is awesome, great written and come with approximately
all significant infos. I would like to peer extra posts like this.

Merissa
Guest

Great blog here! Also your web site loads up very fast!
What web host are you using? Can I get your affiliate link to your host?
I wish my site loaded up as fast as yours lol

Jermaine
Guest

Hello! Someone in my Myspace group shared this site with us so I came to look it over.
I’m definitely loving the information. I’m book-marking and will be tweeting this to my followers!
Fantastic blog and fantastic style and design.

Rodolfo
Guest

I delight in, cause I found exactly what I was taking a
look for. You have ended myy flur daay long hunt!
God Blss you man. Have a great day. Bye

Jeramy
Guest

Hello very nice website!! Man .. Excellent ..
Wonderful .. I will bookmark your web site and take the feeds additionally?
I’m satisfied to search out so many helpful information right here in the publish, we want work out more techniques in this regard, thank you
for sharing. . . . . .

Geneva
Guest

Excellent աay of telling, and nice piece οf writing to obtain data оn the topic of my presentation topic, which і am going to convey in school.

LAKEISHA
Guest

I’m really enjoying the design and layout of your blog. It’s a very easy on the eyes which makes it much more pleasant for me to come here
and visit more often. Excellent work!

Rod
Guest

It’s really a great and helpul piece of info.
I amm satisfied that you simply shared this useful information with
us. Please stay us informed like this. Thanks for sharing.

wpDiscuz
DON’T MISS OUT!
Subscribe To Newsletter
Be the first to get latest updates and exclusive content straight to your email inbox.
Stay Updated
Give it a try, you can unsubscribe anytime.

Join Our Newsletter Today

Stay updated with all latest updates.
Give it a try, you can unsubscribe anytime.
Subscribe
SUBSCRIBE NOW