Words with emphasized border and drop shadow effect

I am trying to achieve a specific font style. If it's not possible, I would like to get as close as possible to the desired style. However, due to IE support requirements, I am unable to use text-stroke.

https://i.sstatic.net/JwQyb.png

The closest approach I have found so far is using multiple text-shadow attributes, for example:

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff,
      1px -1px 0 #fff,
     -1px 1px 0 #fff,
      1px 1px 0 #fff,
     -2px -5px 0px #ff7c7c;
}

body {
    background: #2e536f; 
}
<h1>Zwei</h1>

Although this method accomplishes multiple tasks, I am struggling with making the color transparent to reveal the text shadow beneath.

How can I overcome this challenge?

htmlcsssvg

Answer №1

For those needing compatibility with IE, opting for SVG is the way to go. You can effortlessly add stroke and/or shadow to text to achieve the desired style. While this method works well for titles, it may pose challenges for multiline text.
Here's an example using inline SVG:

body {
  background: #2e536f;
}
svg {
  font-weight: bold;
  font-family: sans-serif;
}
<svg viewbox="0 0 10 3">
  <text font-size="3" x="1.5" y="2.5" dx="0" dy="0" fill="#FF7C7C">ZWEI</text>
  <text font-size="3" x="1.5" y="2.5" dx="0.1" dy="0.15" fill="transparent" stroke="#fff" stroke-width="0.08">ZWEI</text>
</svg>

It should be noted that utilizing SVG (even for titles) has no negative impact on SEO, as Google has been indexing SVG since 2010

Answer №2

body {
    background: #2e536f; 
}

h1 {
   color: #2e536f;
   font-weight: bold;
   font-family: sans-serif;
   font-size: 7em;
   text-transform: uppercase;
   text-shadow:
     -1px -1px 0 #fff, 1px -1px 0 #fff, 1px 1px 0 #fff, 1px 1px 0 #fff, 2px -5px 0px #ff7c7c
}
<h1>Zwei</h1>

Is this the desired result you are looking for?

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

How can I ensure that my HTML form inputs are consistently displayed in the browser when using jQuery/AJAX and SQL queries without needing to

My goal is to show all textarea inputs in the browser even after a page refresh, as currently when I send data from homepage.php using jQuery/AJAX, it disappears upon refresh. The information is sent from homepage.php to data.php via the #textarea input an ...

phphtmlajax

What could be the reason why my JavaScript code for adding a class to hide an image is not functioning properly?

My HTML code looks like this: <div class="container-fluid instructions"> <img src="chick2.png"> <img class="img1" src="dice6.png"> <img class="img2" src="dice6.png" ...

javascriptcss

Retrieve the content outside of the quotation marks in an HTML document through web scraping

I need help extracting specific information from a web page using Python. The data I want is not within quotation marks, as shown below: nummber = page_soup.findAll("span", {"id": "referenznummer"}) nummber # result [<span ...

htmlseleniumweb-scrapingbeautifulsoup

Creating CSS styles to ensure text takes up the largest size possible without wrapping or extending beyond the screen borders

Looking for a way to display text at its maximum size without any wrapping or overflowing the screen? I attempted using @media and adjusting font-size, but things got too complex. My goal is to have the text on example.com displayed at the largest possible ...

htmlcssmaxfont-size

Expanding using CSS3 to ensure it doesn't take up previous space

Currently, I am working on an animation for my web application. More specifically, I am looking to scale certain elements using CSS3 with the scaleY(0.5) property. These elements are arranged in a vertical list, and I want to ensure that they do not take u ...

javascripthtmlcss

extracting characters in php

Here's the HTML code I'm working with: <p style="color:red;font-size:12px;">This budget-friendly car offers great value, complete with air conditioning making it perfect for couples and small families. There is a ?500 excess, but it can be ...

phphtmlsubstring

Updating the appearance of a non-declared HTML child component on-the-fly using Angular

Trying to dynamically adjust the style of an unspecified div is causing some trouble. Using Angular and PrimeNG, invisible divs are being generated that I cannot access through inline styles. The objective is to allow a user to input a width as a string (5 ...

htmlcssangularsassprimeng

The hover selector in Material UI and React is not functioning as expected

My code is experiencing an issue where the hover selector does not appear to be working. Although all other styling aspects function correctly, the hover effect is not visible. import React from "react"; import Paper from '@material-ui/core/Paper&apo ...

cssreactjshovermaterial-ui

Design a circular text element using Tailwind CSS

Just starting out as a web developer and running into some issues with Tailwind CSS. Here's what I'm trying to achieve: https://ibb.co/KL8cDR2 This is the code I have right now: <div class="w-1/2 h-10 rounded-full bg-gray-400" style ...

csstailwind-css

If the <option> "anyTableName" </option> is chosen, then display the column names of the selected table (PHP, MySQL)

Hey there, I'm a newbie on stackoverflow so feel free to correct me if I'm off base ;) Here's my current dilemma: I have a text.php file that contains 2 <select> elements. The first one allows me to choose a table (like "accounts", "c ...

javascriptphphtmlmysqlajax

Using Javascript, dynamically animate the text in the hero unit with fading in and out effects

I currently have a "Hero" unit with the following code: <div class="hero-unit"> <div class="container"> <h1>Dapibus Euismod Mollis</h1> <p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis ...

javascriptjqueryhtmltwitter-bootstrap

jQuery - Event cannot be triggered on the 'deselect' or 'focusout' of <option> tag

Check out the demo here Hello there, I have a situation where I need an input box to appear below a select option, only if the user selects "Other". The code currently uses the .click() function on the option, but now I am trying to make the input box di ...

javascriptjqueryhtml

What is the best way to retrieve the DOM of a webpage that uses MP4 file extension?

I'm attempting to access the DOM within a page that has an MP4 extension. The page isn't a video or audio file, it's just HTML with an MP4 extension "". I've included the code I'm using to try and access it using Simple HTML DOM. T ...

phphtmldom

The struggle of positioning two divs in alignment

In my HTML code, I have a div container named row3red3. Inside this container, there are two divs: left (.row3red3slika) and right (.row3red3info). I am facing an issue where I cannot position the right div .row3red3info on top, inline after the image. I ...

htmlcss

CSS background: seeking a fresh background for the rest of my pages

When I use CSS background: url(stuffhere.jpeg) for the background, it remains unchanged when clicking on other videos categorized as "projects," not pages. I have attempted using <body id="home"> and <body id="projects">, creating two backgrou ...

cssbackground

Design a CSS floating div with a captivating bubble effect

My current setup includes a DIV element styled as follows: <div class="modal"></div> .modal { position: fixed; z-index: 999999; right: 310px; top: 67px; width: 431.6px; height: 550px; border-radius: 25px; box-s ...

css

Troubles with aligning and floating three divs in the center of a container div – a CSS conundrum illustrated with code snippets and a basic diagram

I'm struggling to center 3 divs within a "container." Here's a rough idea of what I'm going for: ______________________ | ___ ___ ___ | | |___| |___| |___| | |______________________| The issue I'm facing is g ...

csslayouthtmlcss-floatcentering

Troubleshooting Nested Handlebars Problem

After creating a customized handlebar that checks for equality in this manner: Handlebars.registerHelper('ifEquals', (arg1, arg2, options) => { if (arg1 == arg2) { return options?.fn(this); } return options?.inverse(t ...

htmltypescripthandlebars.js

Utilizing HTML5 to import content from text files

Currently, I am experiencing an issue with HTML 5. I am struggling to find a way to load data into a web page statically from locally saved files. So far, my only successful method has been using < input type="file" id="fileinput" / >, but I am inter ...

html

Getting rid of the upper boundaries and outlines of the Bootstrap table

React code: <div style={{paddingLeft: '8px', paddingRight: '8px'}}> <div className="-subtitle"> <div className="pull-right" style={{marginBottom:'5px' ...

cssreactjsbootstrap-table