CODEWITHSUNDEEP
htmlcss
Michael Queue
Michael Queue

Reputation: 1400

center text in box with opacity and make text solid

I am trying to do two things.

center text horizontally and vertically in a responsive manner so that it stays within the box

Have opacity apply to the box but not the text. i.e. solid white words centered, horizontally and vertically (responsively), in a box with some transparency. I am not sure if i'm on the right path or barking up the wrong tree. Thx!

#homeBoxShadow{
    text-align:center;
    width: 300px;
    margin: 0 auto;
    height: 100px;
    background-color: black;
    opacity: .5;
    box-shadow: 10px 10px 5px #888888;
    color: white;
    font-size:3em;
    text-shadow: 3px 4px 5px #000; 

}
<div id="homeBoxShadow">some text</div>

Upvotes: 0

Views: 614

Answers (3)

Peter Girnus
Peter Girnus

Reputation: 2739

just use rgba values instead.

#homeBoxShadow{
        text-align:center;
        width: 300px;
        margin: 0 auto;
        height: 100px;
        background-color: black;
        opacity: .5;
        box-shadow: 10px 10px 5px #888888;
        color: white;
        font-size:3em;
        text-shadow: 3px 4px 5px #000; 
        line-height: 90px;
    }

Give it a line height of 90px, its responsive as well.

CODEPEN DEMO

Upvotes: 1

Sergio Andrade
Sergio Andrade

Reputation: 324

See the example:

#homeBoxShadow{
    text-align:center;
    width: 300px;
    margin: 0 auto;
    height: 700px;
    background-color: rgba(0,0,0,0.5);
    box-shadow: 10px 10px 5px rgba(136,136,136,0.5);
    color: white;
    font-size:3em;
    text-shadow: 3px 4px 5px #000; 

}
.table{
    display:table;
    width:100%;
    height:100%;
}
.table-cell{
    display:table-cell;
    vertical-align:middle;
}


<div id="homeBoxShadow">
    <div class="table">
        <div class="table-cell">
            some text centered forever change the height
        </div>
    </div>
</div>

Your element is centered, forever.

Upvotes: 0

RockMyAlgorithm
RockMyAlgorithm

Reputation: 538

Try this (use of rgba):

#homeBoxShadow{
    text-align:center;
    width: 300px;
    height: 100px;
    margin: 0 auto;
    background-color: rgba(0,0,0,0.4);
    box-shadow: 10px 10px 5px #888888;
    color: white;
    font-size:3em;
    line-height: 90px;
}
<div id="homeBoxShadow">some text</div>

Upvotes: 1

Related Questions