Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
ThatBlockishWay

Need css help... Again

Recommended Posts

Posted · Original PosterOP

So Im trying to make a fancy title for my page and I cant figure out how to put text over text (h1 over h1), Im doin this so I can have a text shadow and have the background be gradient to make the text look cool. It just puts the second h6 under the first so Ive got a shadow with no text and text with no shadow.

CSS

h1 {
    position: relative;
    padding-left: 37.5%;
    width: 25vw;
    top: 2vw;
    font-family: "DejaVu Sans Mono", monospace;
    text-align: center;
    letter-spacing: .6vw;
    font-size: 5vw;
    font-variant: small-caps;
    background: -webkit-radial-gradient(center, #1a1a1a, #004d80, black);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

mark.shdw {
    position: relative;
    width: 25vw;
    top:;
    font-family: "DejaVu Sans Mono", monospace;
    text-align: center;
    letter-spacing: .6vw;
    font-size: 5vw;
    font-variant: small-caps;
    text-shadow:
        -1px -1px 1vw #004d80,
        1px -1px 1vw #004d80,
        -1px 1px 1vw #004d80,
        1px 1px 1vw    #004d80,
        5px 5px 2vw #1a1a1a,
        -5px -5px 2vw #1a1a1a,
        5px -5px 2vw  #1a1a1a,
        -5px 5px 2vw #1a1a1a;
    background: none;
}

HTML

    <mark class="lrg">M</mark><mark class= "sml"><sub>a</sub><sup>k</sup>er</mark>
    <mark class="shdw"><mark class="lrg">M</mark><mark class= "sml"><sub>a</sub><sup>k</sup>er</mark></mark>

Link to post
Share on other sites

There is a property for that: text-shadow

 

h6 {
    text-shadow: 2px 2px #ff0000;
}

with the 2px 2px you define the offset, in this example it will be 2px to the right and 2px to the bottom.

Last you specify the color of the shadow.

Link to post
Share on other sites
Posted · Original PosterOP
7 minutes ago, Dujith said:

There is a property for that: text-shadow

 


h6 {
    text-shadow: 2px 2px #ff0000;
}

with the 2px 2px you define the offset, in this example it will be 2px to the right and 2px to the bottom.

Last you specify the color of the shadow.

When I use text shadow on the text that uses the background as the color the shadow covers the background and makes it unseeable, so I need to put the text that uses the background over the text that has the shadow so itll have the background text for actual words and the shadow.

Link to post
Share on other sites
On 12/6/2018 at 8:36 PM, ThatBlockishWay said:

WHoops, I meant h1

Dont know if you still need this. But you should just define the text-shadow in the h1 tag. And not create that extra tag. 

That way you just need to work around the original shadow:

 

h1 {
  text-shadow: 3px 2px red, 4px 2px blue, 3px 3px blue, 2px 2px blue, 3px 1px blue;
}

The one in red will the main shadow, the next one is 1px to the left, the next one is 1px down, next is 1px left and last is 1px up.

This will create a outline around the shadow. Adjust to your own taste.

Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Announcements


×