How To Center a Letterpress Effect?


Tags: css,css3

Problem :

Consider this fiddle: http://jsfiddle.net/qkAJD/

HTML

<div style="width:500px;">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

CSS

body {
    background: gray;
    margin:0;
}
.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
}
.success-header:before {
    content: attr(title);
    position:absolute;
    color:rgba(255, 255, 255, 0.3);
    top:1px;
    left:1px;
}

Result

Question

How can we center the <h1> tag within its container, and still keep the letterpress effect? Assume that we don't know in advance that the container's width is 500px. That is, a solution which hardcodes the position of the header is not acceptable. It's easy enough to center the header:

<div style="width:500px;text-align:center">
     <h1 class="success-header" title="Success!">Success!</h1>
</div>

But this destroy's the letterpress effect:



Solution :

The "shadow" is positioned absolutely with relation to its nearest eligible parent. You can make the immediate parent eligible by adding position:relative to it.

Example: http://jsfiddle.net/qkAJD/5/

.success-header {
    color: green;
    display: inline-block;
    font-size: 50px;
    height: 50px;
    margin: 0;
    position: relative; /* changed line */
}

Absolute - Do not leave space for the element. Instead, position it at a specified position relative to its closest positioned ancestor or to the containing block.

Source, emphasis mine.


    CSS Howto..

    How to move all content (relative,absolute,…) down?

    How to change font color inside nav element?

    How to have multiple CSS transitions on an element?

    How to begin typing from vertical middle of textarea

    How to handle PNG image loading time in html, css

    How is a CSS “display: table-column” supposed to work?

    How to prevent this H2-tag from half disappearing?

    How to create icons like font awesome

    How to arrange elements vertically?

    How to align a div with the right of a table?

    How to create centered image slideshow behind website content

    how to write IE 8 specific css styles

    Bootstrap - how to remove hover effect from collapsed navbar only?

    How to override html property created by script (mediaelement.js)

    How to force the border color of a cell in a html table

    Javascript: How do I check a css style and then change another css style?

    Devtools audit shows unwanted/injected css rules

    How to stop image shrinking when page is resized horizontally in CSS

    CSS how to make a perfectly alligned left (or right) border?

    How can I change the entire background color of a page?

    How to show a low resolution pictures when downloading high resolution? [closed]

    How to keep DIV stretched to the bottom of the webpage with height 100% and overflow:auto using CSS only?

    How to get a table-cell aligned to the right?

    How to make my a scalable website with auto:height and overflow:auto

    how to set anchor tag text width using css?

    How to hide the first element on the page with particular css class? [duplicate]

    How to apply picture for submit button

    How can I stop an image element from taking 100% width?

    How to fix the Height for this area?

    CSS how to target background and make it transparent