Cool Opacity Text Question

Discussion in 'HTML and CSS' started by nakloss, Apr 11, 2018.

  1. nakloss

    nakloss

    Joined:
    Apr 11, 2018
    Messages:
    1
    Likes Received:
    0
    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!
     
    nakloss, Apr 11, 2018
    #1
    1. Advertisements

  2. nakloss

    TazzyT

    Joined:
    Nov 28, 2019
    Messages:
    3
    Likes Received:
    0
    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!
     
    TazzyT, Nov 28, 2019
    #2
    1. Advertisements

  3. nakloss

    independent

    Joined:
    Nov 23, 2019
    Messages:
    63
    Likes Received:
    1
    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.
     
    Last edited: Dec 24, 2019
    independent, Dec 24, 2019
    #3
  4. nakloss

    sunfighter

    Joined:
    Nov 27, 2019
    Messages:
    115
    Likes Received:
    17
    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.
     
    sunfighter, Dec 25, 2019
    #4
  5. nakloss

    independent

    Joined:
    Nov 23, 2019
    Messages:
    63
    Likes Received:
    1
    hello sunfighter ,welcome.

    this paragraph is written in the mentioned reference.


    but of course you are better than me now in this issue. so we can follow your wordings.
     
    independent, Dec 25, 2019
    #5
    1. Advertisements

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments (here). After that, you can post your question and our members will help you out.