What is the method for creating text outlines using html5/css3?

I have been experimenting with using shadows to outline text, which is a solution I came across in various Stack Overflow threads. However, support for text-outline and text-stroke features is currently limited.

I am encountering an unusual issue with one of the letters when trying to implement the shadow hack.

Here's how I incorporated the shadow hack:

<div id="background">
 <h1 id="buzz-joy">BU<span id="small-raised-z">Z</span>Z-JOY</h1>
</div>

and

#background {
    height 100px;
    text-align: center;
    background-color: grey;
}
#buzz-joy {
    font-family:"Arial Black";
    color: Yellow;
    font-size:4em;
    display: inline-block;
    text-shadow: 2px 2px 0 black, 2px -2px 0 black, -2px 2px 0 black, -2px -2px 0 black;
    padding: 0;
    margin: 0;
}

to achieve this effect

http://jsfiddle.net/abalter/e3QUp

However, there seems to be a strange issue with the letter "Y".

Can someone provide suggestions on how to resolve this problem?

Answer №1

A technique that involves setting 4 shadows in the 4 diagonal directions is quite effective.

While this method works well for straight edges and square corners, it may not be as successful for the upper braces of the letter Y due to their unfavorable angle.

To address this issue, one possible solution is to increase the number of shadows, each pointing in different angles until the desired outcome is achieved.

The length of the shadows is approximately 3 pixels (calculated using the formula: square root of 2+2 + 2*2), but experimenting with other values like 3*cos(a) 3*sin(a) can also yield interesting results.

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

Determining the Height of a Navigation Bar Automatically with CSS

My website is built using React and react-strap. I set up my .header-overlay to cover the entire background within the .header. However, due to the presence of the .navbar, the .header-overlay extends beyond the boundaries of the .header vertically. I tho ...

How can I link an HTML anchor to a calendar?

Is there a way to create a universal link that generates a calendar event using HTML? For example, we can create an email link with <a href="mailto:<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="ff9e9b9b8d9a8c8cbf9a879e928f9 ...

Using Angular template to embed Animate CC Canvas Export

Looking to incorporate a small animation created in animate cc into an angular template on a canvas as shown below: <div id="animation_container" style="background-color:rgba(255, 255, 255, 1.00); width:1014px; height:650px"> <canvas id="canv ...

Can you see the visible area tag?

Is there a way to make an HTML element visible at all times, not just on focus? It seems like it should be as easy as this: HTML: <img src="image.png" width="100" height="100" usemap="#Map" /> <map name="Map" id="Map"> <area shape="circl ...

Adding to the beginning of a list in JQuery mobile

Having trouble figuring out how to prepend my list in jQuery mobile while keeping the divider on top of the most recent item added. I attempted to prepend the newly added item, but it ended up shifting the divider to the bottom instead. function loadScan ...

Using multiple foreach loops within each other

After struggling with this issue for days, I've decided to seek some assistance :) I'm currently working on a project management tool that includes an edit-page where admins can modify project members and their roles within the project. My goal ...

Achieving Flexbox alignment in a responsive layout

Struggling with achieving a responsive layout using Flexbox. Picture a page filled with panels. The main objective is to display a certain number of panels per row, aligned both horizontally and vertically like the rest. The main issue I am encountering ...

Alignment Woes in Bootstrap Designs

I'm seeking assistance regarding the alignment of content on my webpage. The content is not aligning properly with the sidebar and footer, and I'm unsure how to proceed. The page should have a left margin to avoid touching the sidebar, and the fo ...

What methods are available to modify HTML content using Node.js?

I am looking to modify the contents of my HTML file (index.html) below: <html> <body> <div id="greeting">Hello world</div> </body> </html> I want to change this using Node.js in the backend. Below is the Node.js cod ...

Is there a way to fade just the div element without affecting the text?

Is there a way to apply fade in/out effect only to the background of the div, without affecting the text inside? You can view my code snippet here: https://jsfiddle.net/tc6fq235/3/ <div class="fade">Hover over me.</div> .fade { background- ...

Grayscale to color image slider using JQuery, HTML, and CSS

Seeking assistance from the talented individuals here. Currently in the process of constructing a website for a client, and one of the key components on the index page is an image slider/fader that showcases a series of images. The client has requested a u ...

What is the reasoning behind the repetitive use of @media (max-width: 767px) in the Twitter Bootstrap

Why is the media query @media (max-width: 767px) repeated in the bootstrap-responsive.css file? To find out, you can view the file by visiting ...

Ways to adjust a specific div within an ng repeat using the value from JSON in AngularJS

When I select a different option from the dropdown menu, such as cities or states, the values are populated from a JSON file. My specific requirement is to hide a button only when the value 'No data' is populated upon changing the dropdown select ...

Sending a post request to a Spring controller with ajax: Step-by-step guide

I am having trouble sending a post request to the spring controller using ajax. It seems that something is not working correctly. If anyone can help me figure out what I did wrong, I would greatly appreciate it. $("#myprofile").on('submit&ap ...

Enhance your search experience with AJAX-powered search boxes

I need to implement multiple textboxes on my webpage, each with its own search query to retrieve data from the database. While I have successfully implemented this for one textbox, I am facing difficulties getting it to work for two or more textboxes. He ...

How to Utilize JQuery for Sticky Elements

I am experimenting with a unique twist on the classic Sticky Element concept. Check out for a typical sticky element example. Instead of the traditional sticky behavior, I am looking to have an element initially anchored to the bottom of the user's ...

Tips for verifying the presence of a value within an array using checkboxes

My firestore database contains a collection named world with a sub-collection called languages I have developed two functions: one to retrieve all documents from the sub-collection languages, and another function to fetch every language if the userUid val ...

Place the social media division at the center of the webpage

I've been struggling to center the social media icons on my website, but haven't had any luck. Here's the code I've been working with: https://jsfiddle.net/2ahgL130/1/ CSS: .table1{ margin:0; padding:0; min-width:100% } ...

"When using FireFox, you can easily create a hyperlink that scrolls to a specific section of a webpage,

I have created a style for image button: .sticky { position: fixed; top: 50px; width: 120%; z-index: 1; } @media screen and (min-device-width : 100px) and (max-width: 600px) { .sticky{ display:none; } } and also implemented a script for it: ...

Ways to change columns into rows with CSS

Hey there! I'm looking for a way to convert columns into rows and vice versa. In my table, I have both column headers and row headers on the left side. The row headers are simply bold text placed next to each row to describe its content. I want to op ...