Change the shadow of the text to the rear side

I'm attempting to give some text a 3D effect by applying a shadow, but I am struggling to position the shadow behind the text. No matter how I adjust it, the shadow ends up either on top or completely distorted. Here is a link to a JS Fiddle with my code: https://jsfiddle.net/2azp5z36/2/
The issue is that the shadow appears in front of the text instead of behind it.

If you have a different method that could achieve the same visual effect (except for the shadow's placement), I would be interested in hearing it. However, there is one requirement: any solution provided must only involve HTML, CSS, and/or JavaScript (preferably HTML5 & CSS3).

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  z-index: 0;
}
<h1 class="CV" data-text="CV">CV</h1>

javascripthtmlcss

Answer №1

By keeping the z-index of the h1 as z-index:auto, the negative z-index should function as intended. Please be aware that this effect may only be supported in certain browsers, as indicated by the properties being used. You can view a demonstration of this effect on this page.

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position:relative;
  z-index: auto;
}
<h1 class="CV" data-text="CV">CV</h1>

Answer №2

To achieve a transparent text color, the -webkit-text-fill-color property is being utilized so that the background image can serve as the fill. By setting the 'stacking order', the text takes precedence over any elements in the background. Additionally, the text-shadow property contributes to this hierarchy by placing the text above the background elements. However, it seems unlikely that this approach will yield the desired outcome.

Perhaps incorporating an additional HTML element would provide a more effective solution— would you consider implementing this strategy?

Answer №3

Alright, I believe this should meet your requirements. My approach involved using 2 overlapping <h1> tags. You can view the result on JS Fiddle. Below is the code snippet for reference:

h1.CV:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  top: 0;
  z-index: -1;
}

h1.CV {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  z-index: 0;
  top: 20px;
}

h1.CV2:before {
  /*text-align: center;*/
  background: none;
  content: attr(data-text);
  /*left: 0;*/
  position: absolute;
  text-shadow: 5px 5px 2px rgba(0, 0, 0, 0.75); /*X,Y,BlurRadius,Color*/
  top: 0;
  z-index: -1;
}

h1.CV2 {
  /* http://jsfiddle.net/2GgqR/258/ */
  text-align: center;
  font-size: 10em;
  background-image: -webkit-linear-gradient(red, orange, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: absolute;
  z-index: 0;
  top: 20px;
}
<h1 class="CV2" data-text="CV">CV</h1>
<h1 class="CV" data-text="CV">CV</h1>

Answer №4

Thank you to all who offered their suggestions, they have proven to be incredibly valuable!

The ultimate solution I will be implementing was provided by Michael
in this discussion: How do I combined CSS text-shadow and "background-image: -webkit-gradient"
A big shoutout to Stephen C as well
for bringing that thread to my attention.

A special mention of appreciation goes out to Joseph Marikle & Sankarsh Makam
for their intriguing code solutions.

The finalized solution recommended by Michael is displayed in the following link:
https://jsfiddle.net/2azp5z36/6/

h1 {
    position: relative;
    font-size: 100px;
    text-align: center;
}

h1 div {
    background-image: -webkit-gradient(linear, left top, left bottom, from(teal), to(black));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    position: absolute; 
    width: 100%;
}
h1:after {
    text-shadow: 5px 5px 2px #000000;
    color: transparent;
}

.gradient-shadow:after {
    content: attr(title); /* Pulls the text from the 'title' attribute to make the shadow */
}
<h1 class="gradient-shadow" title="Hello World">
  <div>Hello World</div>
</h1>

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

Error: Attempting to access the first element of a null property is not allowed

Currently, I am working on a NodeJS Project that utilizes Sails.js as the framework. The goal is to implement a permissions system where each group's permissions are set using Check Boxes within a form powered by AngularJS. However, upon clicking th ...

javascriptangularjsnode.jssails.jstypeerror

Angular unable to send object to HTML page

Struggling with learning angular, encountering new challenges when working with objects in different components. In two separate instances, try to implement two different mechanisms (microservice or service component serving an object directly). This speci ...

javascriptangulartypescriptrxjs

Achieve jQuery effects without resorting to the use of display: none

I am currently working on a website project that involves the use of jQuery and jQuery UI. One of the key features I have implemented is elements fading in when they enter the viewport, which is functioning well. However, I have encountered a specific issu ...

jqueryhtmlcssjquery-ui

Is there a way to retrieve values from a list using jQuery without item IDs?

My list contains many items as shown below: <ul id="usersList"> <li><FORM><INPUT class="eButton" type="button" value="robot669394444" onClick="openWin('robot669394444',1280,720)"></FORM></li> <li> ...

javascriptjqueryhtmlarrayshtml-lists

Prevent Click Event in JQuery

I have a requirement to disable all click events on my webpage. However, even after using the appropriate code to prevent these events from firing, some of them are still getting called. Let me explain with an example. <div id='parent'> ...

javascriptjqueryhtml

Sorting in an Angular mat table can be customized to consider two properties within a single

Trying to implement a table with MatSort, I've encountered an issue where every column sorts except for the third one: <ng-container matColumnDef="nbreEnregistrementTotal"> <th mat-header-cell *matHeaderCellDef mat-sort-header ...

htmlangulartypescriptsortingangular-material

Is there a way to adjust this callback function in order to make it return a promise instead?

This script is designed to continuously attempt loading an image until it is successful: function loadImage (url = '', callback = () => {}) { utils.loadImage(url, () => { callback() }, () => { loadImage(url, callback) }) } ...

javascriptpromise

CSS allowing for numerous background positions

I'm working on a creative resume website and running into an issue with the backgrounds. I have three background images - one showing a mountain and sky, another with just the mountain, and a hidden Easter egg. The front and back layers are scrollable ...

htmlcssbackground-imageparallax

Leveraging the content within <h4> tags in a React application

Child import React, {Component} from 'react' class Card extends Component { render() { let props = this.props; return( <div className="card-main"> <img src={`http://image.tmdb.org/t/p/w342/${props.path}`} alt="P ...

javascriptreactjs

Transitioning opacity and visibility in iOS CSS styling

Check out this test on a desktop browser by visiting the following link (JSFiddle): a { background: gray; display: block; margin: 100px; padding: 100px; } a span { opacity: 0; -webkit-transition: 0.5s; visibility: hidden; } a:hover span { ...

cssiosmobilesafaricss-transitions

Verify whether a variable is empty or not, within the sequence flows in Camunda Modeler

When working with a sequenceFlow in a process instance, I need to check a condition that may involve a variable that has not been defined yet. I want the flow to proceed even if the variable is not defined, rather than throwing an ActivitiException. I hav ...

javascriptbpmncamundacamunda-modelerjuel

Ways to focus on TinyMCE editor for customization

Would it be possible to target the entire TinyMCE editor in order to apply some styling, such as adding 10px of padding around it? I'm using TinyMCE 4 and starting with the HTML code shown below results in TinyMCE generating additional HTML. I would ...

javascriptjquerycsstinymce

Having difficulty customizing the background color of a navbar using CSS in Bootstrap 5

I've been attempting to customize the color of the navbar using a custom CSS code, but unfortunately without success. I've searched through various resources and tried different class names like navbar, navbar-custom, and more, but none seem to w ...

htmlcssbootstrap-5

Having trouble in React.js when trying to run `npm start` with an

Upon initially building a todo app in react.js by using the command: npx create-react-app app_name When I proceeded to run the command npm start, it resulted in displaying errors: https://i.sstatic.net/BxYFu.png https://i.sstatic.net/EqU1j.png In furth ...

javascriptnode.jsreactjsnpmnpm-start

Object C UIWebView adapting to HTML

How can I get a responsive HTML page to display correctly in a UIWebView in Xcode? The page adjusts properly in other iPhone browsers, but not in the UIWebView. I would prefer not to use PhoneGap for this. Any suggestions for making the HTML responsive i ...

iphonehtmlobjective-ciosuiwebview

MudGrid: Ensuring precise vertical cell alignment

I'm a newcomer to MudBlazor and struggling with a basic task. My goal is to create a structured layout resembling a table with a fixed number of cells, like this: Mountains 5 Lakes 3 The names on the left should be regular size while the numbers ...

cssmudblazor

Other options for setting a background image in HTML emails aside from utilizing the background-img URL and avoiding the use of divs

I am struggling with creating the header section for an HTML email that is currently under construction. I am using background-img url for the image with content overlay, but unfortunately Outlook 2007, 2010, and 2016 do not support background-images on ta ...

htmlcsshtml-tablehtml-email

Retrieve the <style> tag response and inject it into the head section of the HTML using React

Although I am aware that this may not be the best practice, it seems to be the most suitable solution for this particular case. The server response contains something like this: <style id="styles">.color_txt{color:green;}</style> I am attempt ...

javascriptcssreactjs

Creating a full-screen background with an rgba overlay using CSS

I recently encountered an issue with a fixed, fullscreen background image on my website. I initially applied the background image to the HTML's CSS instead of the body's CSS. To add a black overlay with lowered opacity, I included the following c ...

htmlcssbackgroundoverlayfullscreen

Positioning images within a relatively positioned div using absolute positioning

I have come across multiple discussions on this topic, but I am still struggling to make the following code snippet function correctly: .container { position: relative; width: 100%; } .left { position: absolute; left: 0px; } .right { positio ...

htmlcsscss-position