Create a Colorful Glass Wall

Colorfull glass wall

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.

Written by Sandeep Likhar

Sandeep Likhar is from India, where he is a blogger, eBook designer, and founder of LetsDnD. He has 6 years of experience in the industry as a Digital Publishing Expert and eBook Converter, providing services to authors, publishers, and distributors worldwide. He is proficient in converting books into various formats, such as HTML, epub, mobi, word, PDF, including all major online platforms like iTunes, Kobo, Kindle, CreateSpace, B&N, Smashwords, and more.

24 Comments

Leave a Reply
  1. 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.

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

  3. 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.

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

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

  6. 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.

  7. 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!

  8. 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

  9. 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!

  10. 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.

  11. 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

  12. 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.

  13. 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

  14. 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. . . . . .

  15. 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.

  16. 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!

  17. 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.

Leave a Reply

Your email address will not be published. Required fields are marked *