Jump to content

Recommended Posts

I Want to try and achieve this in CSS.  

Rigth now i have the full title in a H2 tag, with the final word in a Span.

I know how to apply the styling to the word, but how do I:

a) get it to be lower that the previous words and;

b) make it go under the preview word (notice the b beneath the e).

I don't really want to apply one word in Absoute Positioning, as on a phone etc it will be a nightmare. 

horizontal-1024x289.png

I know this isn't a CSS solution but, when in doubt, cheat. I used an SVG image. Fonts will differ I I don't know which you used.

<body>
<header style='text-align: center'>
    <svg width='90%' viewBox='0 0 500 100' style='max-width: 800;'>
        <defs>
            <style type='text/css'>
                #main {
                    font-family: "arial black";
                    font-size: 20pt;
                    font-weight: 800;
                    fill: #000;
                }
                #better {
                    font-family: "segoe script";
                    font-size: 40pt;
                    font-weight: 600;
                    fill: #80FF80;
                 }
            </style>
        </defs>
        <text x='338' y='65' id='better'>better</text>
        <text x='12' y='60' id='main'>Making every day taste</text>
    </svg>
</header>
</body>

screen width: 1024

image.thumb.png.faa36f8df967f1f2b031359fca1e276b.png

screen width: 450

image.png.161d9745ff094f2e5344ba6e2c8a6d17.png

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.