How to add a outline/contour font in slider?

  • Anonymous

    #10456

    Hi!

    At first – sorry for my english.

    Normally font in slider is just white, so it’s unreadable when on baskground is some bright picture.

    My question is: how can I add some line around font in slider (without changing font in posts or upper/side panel)?

    My site is: http://www.hajduk.info

    Mod

    Kenneth John Odle

    #46180

    You can add a text shadow to the .carousel .slide-title class, I believe:

    .carousel .slide-title {
    text-shadow: 2px 2px 0 #fff, -2px -2px 0 #fff, 2px -2px 0 #fff, -2px 2px 0 #fff;
    }

    Will add a 2px white (#fff) shadow on all four sides to the slide title, with no fuzziness.

    You need to use multiple text-shadow values to target all sides.

    Anonymous

    #46181

    Kenneth – I’m very grateful for your help but I have one more ask for you.

    Can you explain me how to do it step by step? Seriously, I’m noob in that stuff so I don’t wanna destroy all site by making something wrong.

    Mod

    Kenneth John Odle

    #46182

    You can copy and paste the above code in Franz Josef’s custom css option. It should work, once you save your options and refresh the page.

    There is a good introduction to the text-shadow property here:

    https://css-tricks.com/almanac/properties/t/text-shadow/

    w3schools has a not-quite-as-good introduction, along with a sandbox you can experiment with here:

    http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

    You can also play around with a generator here:

    http://css3gen.com/text-shadow/

    (If you like what you come up with there, you can copy/paste the code from there quite easily, as well. There are a lot of other CSS3 things to play with there as well.)

    Anonymous

    #46183

    Thank you Kenneth! You rock! Now it works 🙂

    Do you also know which part od that style.css file should I change if I want to add shadow to text just below post title in slider (quote from the beginning of the post)?

    Ex.

    ARM HOLDINGS <– already have text-shadow

    ARM Holdings, one of the UK’s biggest technology companies, is set to announce… <– already without text-shadow

    [Read more button]

    Anonymous

    #46184

    Ok, got it.

    Quote:
    .carousel .slide-title {

    text-transform: uppercase;

    font: bold 100px Montserrat, “Open Sans”, sans-serif;

    font-size: 100px;

    font-size: 5.2vw;

    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

    }

    .carousel .excerpt {

    font: 300 32px/54px ‘Open Sans’, sans-serif;

    font-size: 32px;

    font-size: 1.67vw;

    line-height: 2.9vw;

    text-shadow: 1px 1px 0 #000, -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000;

    }

    That code set 1px black shadow on all four sides to the slide title and quote, with no fuzziness.

    The topic is resolved 🙂

Viewing 6 posts - 1 through 6 (of 6 total)

  • You must be logged in to reply to this topic.