Cool Opacity Text Question

[nakloss]

I am a novice and a student of web development at a university. I'm very inquisitive and really interested in knowing all the little cool tricks and figuring them out as I go along or find something interesting on a webpage.

I recently visited an art portfolio here (http://www.baubauhaus.com/).

I'm interested to know how they got the site logo to have that opacity so that the elements of the page are visible underneath it as they scroll up underneath the fixed navbar. I've tried this myself in various ways to no luck. I first thought it was an image with the opacity in the lettering. However, it's not. It's text sitting on a black navbar or black div that is 100% opacity.

HOW DO YOU DO SOMETHING LIKE THIS?! I'm not even sure what to call this to research it further online to find out how to code it?! I'd love to know since I think it's so cool yet it's killing me!!!!

PLEASE HELP! THANKS!

 

[TazzyT]

Depending on the browser you are you using you can "inspect element" to what all the CSS is that is applied. All browsers have some form of this.

Right click on the spot you want to inspect and select "Inspect Element".

This will bring up an inspection bar where you can see the code, CSS, etc.
You can also Right click on the page and view source code.

It is a nice effect. looks like it is a transparent png background image, text and I see some JS applied.

From here you have 2 options: 1) Pick it apart using the tools I just gave you above and experiment until you figure it out or 2) sometimes if you ask really politely and explain you are a student wanting to learn more, the site designer may explain it to you.

Good luck!

 

[independent]

for modern browsers (which are in common in my opinion) use :

{color: hsla(t,x%,m%,k);
background-color: hsla(same with above); }
here

t: indicates hue, in colloqial meaning it is color and it should be between 0 and 360 degree/value.
x: indicates :saturation and it is a percentage (between 0-100 as you see above)
m: indicates lightness here, 0 means that it is full white color ,50% is normal and 100% is full black.
k : k is opacity or transparency more correctly and it takes a value between 0 and 1.

for old browsers

{background-color: rgba(s,p,i,a); }

r: shows the value of red color (each value should/can be between 0 and 255)
g: green
b: blue
a: a value of opacity..should be between 0 and 1.(1=100% opacity e.g.0.75=75%opacity)

you do not have to use opacity, in such cases you can sue only hsl or rgb as shown above.



have good days.

 

[sunfighter]

The distention in the methods [hue, saturation, lightness OR red, blue, green] does not have anything to do with the age of the browsers, but on how you wish to use or understand colors. I believe both methods were adopted at the same time. Pick one method and stick with it, The R-G-B seems to be the most popular.

 

[independent]

hello sunfighter ,welcome.

this paragraph is written in the mentioned reference.

Because older browsers do not
recognize HSL and HSLA values,
it is a good idea to add an extra
rule which specifies the color
using a hex code, RGB value, or
color name. This should appear
before the rule that uses the HSL
or HSLA value.[1]

[1] Duckett J.HTML & CSS Design And Build Websites ch.11 p:256,John Wiley & Sons.ISBN: 978-1-118-00818-8

but of course you are better than me now in this issue. so we can follow your wordings.