Recreate etched effect in IE9 using CSS for text styling

Is there a way to achieve the look of engraved text with a text-shadow in IE9?

In Chrome and Firefox, I have used the following CSS (http://jsfiddle.net/YbyzF/):

text-shadow: 0px 2px 0px rgba(255,255,255,.3), 0px -2px 0px rgba(0,0,0,.3);

Unfortunately, IE9 does not support text-shadow.

I have tried using :after and :before pseudo-elements, but the :after element is not positioned correctly in this example (http://jsfiddle.net/chxfs/6/)

How can I move the :after element to the right position to mimic the effect of two text-shadows in IE9?

internet-explorer-9css

Answer №1

If you're encountering compatibility issues with IE9 and the text-shadow property, a workaround is to utilize the filter property:

text-shadow:0px 2px 0px black;

can be substituted with

filter: Shadow(Color=black, Direction=45, Strength=1);

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

Apply a CSS class to specific text inputs with an "onclick" attribute

Need help with text inputs that have onclick functions. Looking to assign a specific CSS class to text inputs with a certain onclick function. Attempted to use this jQuery code: $(document).ready(function(){ $('input').each(function() { ...

jquerycss

Open the overflow div within a table data cell

My goal is to create a drag-and-drop schedule tool similar to Fullcalendar. I have decided to use a table layout with a rectangular div inside each TD cell to represent tasks. <table onDragEnd={dragend}> <tr> <th>0</th> ...

javascripthtmlcssreactjs

An unusual 1px variance appears in the background-image on Internet Explorer

Having trouble with a sprite of two images showing a 1px difference in ALL versions of Internet Explorer, yet working perfectly in Firefox. Check out the demonstration here: http://jsfiddle.net/bHUs3/6/ I'm feeling frustrated. What could be causing ...

jquerycssinternet-explorer

What could be the possible reason for the controls in my element getting disabled due to adding a JavaScript background

First and foremost, I want to share a link with you to a page that I am currently developing so you can better understand the situation: Additionally, here is a link to the background effect: https://github.com/jnicol/particleground If you visit the page ...

javascripthtmlcsswordpress

Resizing anchor element using CSS

Hey there, I'm having trouble scaling my anchor tag when hovering over it. Here's the code I'm using: a { color: red; text-decoration: none; transition: all 0.5s; } a:hover { ...

htmlcssanchor

The Bootstrap carousel indicators are not automatically switching because they are placed outside of the main div

I have integrated the latest Bootstrap framework into my website, featuring a visually appealing carousel. The unique aspect of my carousel design is that the indicators are positioned outside the main carousel div. Here is a snippet of my carousel code: ...

jqueryhtmlcsstwitter-bootstrapcarousel

Jquery .load function leading to problems with button clicks

In an attempt to utilize the .load function to bring a separate .php file into my single page, I encountered a problem. After loading the page, I wanted to add a class (resulting in a change in background-color) to a button. When including the button code ...

javascriptphpjqueryhtmlcss

The visibility of the Bootstrap 4 collapse button seems to be missing

I am currently working on optimizing the responsiveness of my navigation bar. However, I encountered an issue where the button that collapses the nav bar is not visible when I resize my browser for testing purposes. Even after attempting to set a dark back ...

htmlcsstwitter-bootstrapbootstrap-4

Tips for arranging images of varying heights on separate lines so they appear cohesive as a group

I've been working with masonry.js but I'm still not achieving the effect I want. Javascript:` var container = document.querySelector('#container'); var msnry = new Masonry( container, {columnWidth: 200, itemSelector: '.item' ...

htmlcssimage

Crafted using rope-inspired animation, completely CSS-based

My current project involves creating an animation that mimics the action of a rope being cut. Imagine an object suspended by two ropes, with one being cut followed by the other. Although I have made progress in achieving the desired effect, my animation la ...

css

JSON retrieved images are failing to appear in a grid layout

Hey there, I'm facing an issue with the layout of images on my website. I am fetching data from a JSON file to create a grid of images, but unfortunately, all the images are displaying in a single column instead of a grid. I am aiming for a 4 wide ima ...

cssjsonbootstrap-4

What is the best way to position a div in the center of the page?

Is there a way to properly center a div in the middle of a webpage? I attempted using float: center; in my CSS file, but unfortunately it did not have the desired effect. Any suggestions for achieving this? ...

htmlcssxhtml

Automatically scroll to the top of a pop-up div that is scrollable with the help of jQuery

One of the first things to note is that there is a popup div containing a form. Below is the structure of the div: <div class="addnewrule" id="add_message_0"> <form method="post" action="" id="frmadd"> <input type="hidden" n ...

javascriptjqueryhtmlcssajax

The act of truncating text on an iPhone

Having issues with textarea and input type text on iOS devices. The bottom of the text is being cut off. Any suggestions on how to make sure the full text is displayed properly? Below is the CSS code: textarea { width: 97%; padding: 5px 1.5%; ...

htmlioscssiphonetext

iPhones display HTML forms in a distinct manner compared to traditional desktop browsers

I have embarked on creating a basic website, designed as a private admin panel with responsive features and built using HTML5. The login page showcases the customary Username and Password form fields that I meticulously styled to meet my precise vision. U ...

iosiphonehtmlcss

Sticking Table Headers in Bootstrap 4

I'm struggling with making the header of my Bootstrap 4 table fixed/sticky so that it doesn't scroll along with the content. I've tried adding custom CSS but haven't been successful so far. Here's a snippet of the code for my tabl ...

htmlcssbootstrap-4

What is the best way to create floating content over a fixed video using HTML?

On the webpage, there is a background video set with position: fixed. Below the video, there is a <div> containing the main content. How can I make this content float over the video? Check out my experimental page at oleg-s-fresh-site-8f277a.webfl ...

htmlcss

In MUI React, the opacity of the placeholder is customizable and can be easily adjusted. This allows for the placeholder to be hidden

Currently, I am facing an issue with a filled variant TextField from Mui React. I have tried to modify it using theme components, but the placeholder text becomes hidden when the field is not focused. See here for Before Focus And here for On Focus I hav ...

cssreactjstypescriptmaterial-uiplaceholder

Create concise information in a single line with Twig

So, I basically need to display the following information inline on my website: Just like this: Family: Open Sans - Variant: Regular Italic Size: 15px - Line Height: 25px - Paragraph: 15px Color: grey_3 This is the code snippet: {% include "../compone ...

htmlcsstwig

What is the most effective way to attain maximum height for this particular element?

Is there a way to make the height of the left-div 100% of the window's height? <div id="left-div"></div> <div id="content"> <div class="thumbnail"></div> <div class="thumbnail"></div> ...

css