Ways to combine text styling with images, stroke effects, and shadows all at once

I am looking to enhance my text with a background image, a text-stroke, and a text-shadow. The issue I am facing is that the text-shadow appears on top of the background image. Does anyone have a solution for placing the shadow behind the image?

If you test the snippet, you will notice that the text-shadow overlaps the image. Remove the text-shadow declaration to observe the difference.

Thank you for your assistance.

.letsgo {
  font-family: Catamaran, sans-serif;
  font-size: 10em;
  background-image: url(https://files.cargocollective.com/c2106023/Unavngivet.png);
  background-size: contain;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-stroke: 1px #fff;
  text-decoration: none;
  text-shadow: 2px 2px 6px #CE5937, 8px 10px 6px #3D79CE, 8px 3px 2px #D782A5;
}
<!DOCTYPE html>
<html>
<head>
<a class="letsgo">here is my text</a>

</html>
csstextbackground-imagetext-shadow

Answer №1

One way to enhance your text is by utilizing CSS pseudo-elements such as ::before and ::after. By incorporating the text image into the original text and applying a shadow effect using ::after, you can create a visually appealing design.

For instance, consider the following example:

.letsgo {
  font-family: Catamaran, sans-serif;
  font-size: 10em;
  position: relative;
  text-decoration: none;
  background-image: url(https://files.cargocollective.com/c2106023/Unavngivet.png);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.letsgo::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  -webkit-text-stroke: 1px #fff;
  text-shadow: 2px 2px 6px #CE5937, 8px 10px 6px #3D79CE, 8px 3px 2px #D782A5;
}
<a class="letsgo" data-text="here is my text">here is my text</a>

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

The CSS "mask" property is experiencing compatibility issues on Google Chrome

Hey there! I've recently developed a unique progress bar component in React that showcases a stunning gradient background. This effect is achieved by utilizing the CSS mask property. While everything runs smoothly on Firefox, I'm facing a slight ...

cssreactjstypescriptgoogle-chrome

Necessary CSS selector input equivalent in Reactive Forms

Is there a similar CSS method like input:required {CSS} to style all the reactive form fields in Angular that are set as required using Validators.required in their formControl? Or is there another approach to achieve this with CSS? ...

angularcssangular-reactive-forms

Can the CSS be used to conceal the PNG image while still preserving the drop shadow effect?

I recently applied the "Filter: drop-shadow" effect to my png photo and it worked perfectly. However, I am now interested in hiding the actual png image while retaining the shadow effect. My initial attempt involved adjusting the translate and drop-shadow ...

htmlcss

What is preventing me from choosing the complete table?

I am currently working on a method to export tabular data from an HTML page to Excel using DocRaptor. My approach involves using PHP to pass the necessary data through their API for conversion into an Excel Spreadsheet. However, I have encountered an issu ...

jqueryhtmlcss

Splitting up website content dynamically across various pages

I am interested in developing a webpage that showcases different versions of my code in a tabular format, arranged in reverse chronological order. An example of how I want it to look is provided below. Number Release Date End Date Requires ...

htmlcssweb

Why does my text keep aligning to the left when I adjust the width, causing my background to remain attached to the text?

When I add a width attribute to my #information h1 id, it seems to override the text-align: center; property and aligns the text/background to the left instead of center. Basically, I need assistance in centering the headers with the appropriate backgroun ...

htmlcsscentering

Is it possible to adjust the height of the navbar in Bootstrap?

Currently, I am in the process of replicating the mac OS navbar and am seeking guidance on resizing the navbar height and adjusting text size to around 12px. This is my first time working with bootstrap, so any assistance would be greatly appreciated. Addi ...

htmlcssmacosbootstrap-4navbar

Enhancing User Experience on Android Devices: Automatic Website Zoom-In Feature for Responsive Design

For the first time, I am delving into creating a responsive website design. I seem to be encountering difficulties when it comes to smartphones. I have been using the following meta-tag to ensure that the website loads "zoomed in". (I found this method on ...

androidhtmlcssviewstate

Position the text alongside the Facebook emblem

I am having trouble getting the text Follow Us to align on the far right next to the Facebook Icon. I added the float:right property, but it is not working as expected. Here is the code snippet: <a href="#" target="_blank" style="font-family: Arial, ...

htmlcss

The subdirectory containing the Rails assets is causing loading issues in the production environment

My event CSS is currently located in app/assets/stylesheets/pages/events.scss. Surprisingly, everything looks perfect in development mode with all the assets loading properly. However, the real issue arises when I switch to production as it seems like thes ...

cssruby-on-railsproduction-environment

Guide on how to vertically and horizontally center a heading text with dash-bootstrap

I have implemented the Bootstrap dash layout for my web application, but I want to place the text in the red area instead of at the top of the page. Can anyone guide me on how to achieve this? https://i.sstatic.net/RcNhy.png I have already tried using "a ...

cssplotly-dashplotly-python

Changing the background color of .pane and .view elements in an Ionic web application using JavaScript

Looking to modify the background-color of two css selectors, .pane and .view, that are located within the ionic.css file. Despite multiple attempts to do so using JavaScript directly in the index.html file, the changes are not reflected. The code snippet ...

javascripthtmlcssangularionic-framework

IE9 fails to display li::before element correctly

I have created a utility navigation bar using an unordered list and I am attempting to use li::before to add a pipe "|" symbol between each link in the navigation. Below is my utility navigation... <div class="horizontalnavlinks"> <ul> ...

htmlcsspseudo-elementcss-content

Chrome failing to recalculate the width of an element as required

When attempting to size an element's width based on its height, I discovered what seemed like a clever solution using the transparent img trick: http://jsfiddle.net/6yc8a2yj/ The pink div displays correctly at a 1:2 ratio, but it fails to resize whe ...

htmlcssgoogle-chrome

Footer not sticking to the bottom of the page with Material UI

View Page Screenshot My challenge is with the Footer using AppBar when there is no content. It doesn't properly go to the end of the page, only to the end of the content. I want it to stick to the bottom of the page if the content doesn't reach ...

htmlcssreactjsmaterial-ui

For my Bootstrap website, it's a constant struggle to balance between having a responsive menu item and ensuring its correct visual appearance

I need help with creating a unique menu design for my website. On the desktop site, I want to display "username/password/sign in" buttons, while on the mobile responsive version I only want to show a single "sign in" option that redirects users to the sign ...

htmlcsstwitter-bootstrap

Utilizing absolute positioning with a rotated div element

The situation I am facing involves a parent div and child div. The child div is positioned absolutely with respect to the parent div and has been rotated by an angle of 90 degrees. Due to the fact that the origin is located at the center of the child div ( ...

javascriptjquerycssgeometrytransform

Tips for maintaining the webcam video in the center of the screen even when the height is set to 100% and the window is being resized

When using React, I encountered an issue with centering a webcam video while maintaining its height at 100% of the screen. Although the video fills the screen vertically correctly, adjusting the width of the window causes the video to lose its centered pos ...

htmlcssreactjs

Dropdown arrow on triangle point not appearing correctly

My goal is to create enough space between the parent and dropdown menu using a triangle shaped pointer. This is what I am aiming for: This is what I have achieved so far: The CSS code for the triangle shape: .sf-menu ul li:first-child a:after { c ...

htmlcss

Trouble getting custom CSS media queries to function properly alongside Bootstrap 3

I've encountered an issue while using bootstrap 3 with jquery UI to implement search and select fields for the user. The CSS code seems to be working fine on larger screens, but it's completely non-functional on smaller screens. I tried applying ...

jqueryhtmlcsstwitter-bootstrap