[Support request] Styling Headlines CSS – tool?

[Rolf]

Sorry, this is not GP related!
Can you recommend a tool for playing around (browser-based) with designing a headline with CSS?

my goal would be to create something like this: http://take.ms/F1xGN

Is that even possible without using images?

thanks for tips!
-rolf

[David]

Hi there,

can’t really think of a tool that would let you do that – and needs some HTML and CSS knowledge. Try this for your markup:

<h2 class="super-headline">Headline<br><span class="sm-text">small </span>Closing</h2>

The <br> tag forces a line break. the <span> allows that text to remain inline but be styled differently. Then add this CSS:

h2.super-headline {
    text-transform: uppercase;
    font-weight: 900;
}
.sm-text {
    vertical-align: super;
    font-size: 0.6em;
    margin-right: 0.2em;
    border-bottom: 10px solid #f00;    
}

Then you just need to tweak the settings.

[Rolf]

this is perfect support, works!
thanks!

[David]

Awesome. Glad to be of help 🙂

[Author]

Posts