Attempting to align the text perfectly while also adding a subtle drop shadow effect

Trying to center text with a drop shadow without using the CSS property. I'm utilizing span and :before for cross-browser compatibility. Here is what it currently looks like:

The HTML:

<h3 title="Say hello to Stack Overflow"><span>Say hello to Stack Overflow</span></h3>

And the CSS:

h3 {
        margin: 0 auto;
        font-size: 29pt;
        color: #fefefe;
        letter-spacing: 1px;
        position: relative;
        color: blue;
    }

    span {
        position: absolute;
        top: 0;
    }

    h3:before {
        display: block;
        padding: 4px;
        content: attr(title);
        color: rgba(0, 0, 0, .15);
    }

The issue arises when attempting to center the h3 (with text-align), only the shadow part centers (here is a jsFiddle)

Looking for a solution to this problem.

htmlcss

Answer №1

I made some modifications to the original h3 styles by removing the unnecessary <span> and adding a :before element. The updated code is as follows:

h3:before,
h3 {
    text-align: center;
    margin: 0 auto;
    font-size: 29pt;
    color: #fefefe;
    letter-spacing: 1px;
    position: relative;
    color: blue;
    width:100%; /* Essential for the :before content */
}

h3:before {
    display: block;
    position:absolute;
    padding: 4px;
    content: attr(title);
    color: rgba(0, 0, 0, .15);
}

Check out the demonstration here: http://jsfiddle.net/zLAcA/3/

Note: To ensure cross-browser compatibility, avoid using rgba. Additionally, keep in mind that :before may not be fully supported in all browsers. For progressive enhancement, you can explore options like CSS3 PIE, which enables the use of the text-shadow property in IE.

Edit: While CSS3PIE is beneficial, it does not support the text-shadow feature. If shadows are crucial, alternative solutions may be necessary. The current approach works effectively in IE8 due to the absence of support for :before in older versions. Consider exploring filters for IE, although finding an aesthetically pleasing one might be challenging.

h3 { filter: DropShadow(Color=#d9d9d9, OffX=4, OffY=4, Positive=1); }

Answer №2

According to a tweet, you can find the code snippet at: http://jsfiddle.net/zLAcA/2/


    h3 {
        text-align: center;
        margin: 0 auto;
        font-size: 29pt;
        color: #fefefe;
        letter-spacing: 1px;
        position: relative;
        color: blue;
        position:relative;
    }

    span {
        position: absolute;
        top: 0;
    }

    h3:before {
        display: block;
        padding: 4px;
        content: attr(title);
        color: rgba(0, 0, 0, .15);
        position:absolute;
    }

A slight adjustment has been made to add positioning to the shadow effect.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Utilizing the GROUP BY clause within an INNER JOIN operation, and presenting the results in an HTML dropdown menu

My database includes the following tables: Workers (id, total_pay, date_of_pay, projects_id) Payments (id, payment, date, projects_id) building_materials(id, pay_of_materials, date, projects_id) additional(id, add_pay, date, projects_id) All tables have p ...

phphtmlmysql

Stop form from submitting on bootstrap input, still check for valid input

Encountering a dilemma here: Employing bootstrap form for user input and utilizing jQuery's preventDefault() to halt the form submission process (relying on AJAX instead). Yet, this approach hinders the input validation functionality provided by boots ...

javascriptjqueryhtmlformstwitter-bootstrap

Ensuring continuous execution of JS EventListener

The other day, I received a solution from someone on this platform for a script that changes the color of a div when scrolling. Here is the code I implemented: const x = document.getElementById("menuID"); window.addEventListener("scroll", () => { ...

javascripthtmlcss

Designing a responsive navigation bar with slide functionality for both web and mobile interfaces utilizing Bootstrap

I have integrated Bootstrap 4.5.0 with the necessary CSS and script from the CDN on my webpage. I am attempting to create a responsive navigation bar header similar to the one on the Bootstrap website, which functions effectively on both desktop web browse ...

htmlcsstwitter-bootstrapbootstrap-4header

What is the method for incorporating this effect into the final sentence of a text?

I am trying to create a unique design effect by applying a custom border to only the last line of text. You can see an example here. In this scenario, the target text is "2000 years old." (with that specific length) and not the entire width of the parent ...

htmlcss

Is there a way to align the input fields vertically?

Here is the link to my code on jsFiddle input { vertical-align: top; /* Not working */ } I am struggling to align the submit button under the input fields. Can someone provide assistance with this issue? ...

htmlcss

ways to remove a specific category from a search

Recently, I came across some code that displays the title headings of the latest 10 WordPress posts from a database. However, I need to modify this code to exclude a specific category. Can anyone provide assistance with this? <?php require_once 'n ...

phphtmlwordpress

Angular styling for input elements that are in the pristine state

Hey there, I'm working with a CSS class that applies a red border to an input field when it is required and invalid, and changes to green when it becomes valid. CSS .ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green ...

cssangular

How can you use only CSS (without jQuery) to hide a div and display another?

Is there a way to keep Collapse 2 directly under Collapse 1 when Content 1 is displayed? I attempted to reorganize the code, but it resulted in chaos. :D .collapse{ cursor: pointer; display: block; background: #cdf; } .collapse + input{ displa ...

csshideshow

Is it possible to extract data from a table by adjusting Javascript in the inspector tool? The page is only showing today's data, but I'm interested in retrieving historical data by going back

My Desired Action: I am interested in extracting data from the 2nd and 3rd tables on this page. However, the data displayed is specific to the current 'day'. I wish to access readings from September 1st and import them into a Google Sheet. Speci ...

javascripthtmlweb-scraping

Unable to completely conceal the borders of Material UI Cards

Despite my efforts to blend the card with the background, I am still struggling with the tiny exposed corners. I've spent hours searching for a solution, but nothing seems to work. I've tried various methods such as adjusting the border radius in ...

javascriptcssmaterial-ui

"All my online spaces are chaotic and cluttered beyond belief, overflowing with content in high-definition

One issue that frequently arises for me when developing websites is related to media queries and resolution. I have utilized the following code using a max-width of 1920px: @media only screen and (max-width : 1920px) {} However, I am facing challenges in ...

htmlcssmedia-queries

Design a sophisticated background using CSS

https://i.sstatic.net/yILwL.png I am wondering if there is a way to create a CSS3 background similar to the one shown in the image link above. The gradient should smoothly transition from white to black, spanning across a header div, and remain consistent ...

htmlcss

Issue with overlapping sticky dropdown and sticky navigation in Bootstrap 4

My issue revolves around getting the dropdown button menu to display in front of the vertical menu. When I click on the dropdown, the vertical (blue) menu takes precedence. This problem arose suddenly after applying the sticky-top class to both menus. Whil ...

htmlcssbootstrap-4

Guide on creating a function in PHP that takes a string input and outputs it in JSON format

Here is an illustration of a data structure that specifies the color of different fruits: array( "red" => array("apple, strawberry"), "yellow" => array("lemon", "ripe mango") ) Create a function called getFruits, which takes a color as input ...

phphtml

Using a SASS watcher to keep an eye on every folder and compile them into a single CSS

I'm interested in setting up a folder structure like this: assets - scss - folder file.scss anotherfile.scss anotherfile.scss anotherfile.scss - anotherfolder file.scss anotherfile.scss anotherfile.scss ...

cssnpmsasswatch

When running the `npm run dev` command, Tailwind does not seem to function

I have been given a task to create forms using tailwindcss, but when I try to run `npm run build`, it doesn't work. Can anyone assist me with this? npm ERR! code ELIFECYCLE npm ERR! errno 9 npm ERR! <a href="/cdn-cgi/l/email-protection" class="__cf ...

javascripthtmlcssdom

Unforeseen outcomes discovered by stacking one div over another, all without relying on z-index

My current project involves two stacked divs, each measuring 100px by 100px. The bottom div includes a black border on top, as shown in this example. <div id="top"></div> <div id="bottom"></div>​ div { width: 100px; height ...

csscss-floatpositionz-index

Include a blank area on the right side and a duplicated image on the bottom right using Bootstrap

Let's set the scene: This screenshot showcases www.dreamstreetentertainment.com, a site that is still a work in progress but is already live. Don't inquire about it. The client insists on this setup. Essentially, I have an empty space to the rig ...

htmltwitter-bootstrapcssflexbox

Exploring the latest features in Bootstrap 4 Alpha and enhancing your

Rumors have it that Bootstrap 4 will make its debut during the year 2016. When duty calls for an upgrade, is a complete re-write truly the best solution? Tackling such a project from Boostrap 2 to 3 was no small feat, and I find myself hesitant to take on ...

csstwitter-bootstraptwitter-bootstrap-4bootstrap-4