Bold font border

I am looking to enhance the appearance of text with a thick outline. After coming across a trick, I found the following code snippet:

text-shadow:
    -1px -1px 0 #00f,
    1px -1px 0 #00f,
    -1px 1px 0 #00f,
    1px 1px 0 #00f;

However, I noticed that this only creates a 1px outline, which may not be sufficient. Additionally, the outline appears jagged and broken, especially on larger fonts. I am seeking advice on how to achieve a thicker, smoother outline of 2 or 3px. Any suggestions involving CSS, JS, or jQuery plugins would be greatly appreciated.

javascriptjqueryhtmlcss

Answer №1

UPDATE: All permutations must be used, including variations such as -1px 3px 0px #00f or 3px -2px 0px #00f.

text-shadow:
  -1px -1px 0 #00f,
  1px -1px 0 #00f,
  -1px 1px 0 #00f,
  1px 1px 0 #00f,

  -2px -2px 0 #00f,
  2px -2px 0 #00f,
  -2px 2px 0 #00f,
  2px 2px 0 #00f,

  -3px -3px 0 #00f,
  3px -3px 0 #00f,
  -3px 3px 0 #00f,
  3px 3px 0 #00f;

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

Currently troubleshooting an issue with the CSS that is affecting the table header alignment

At first, I posed this Question and developed my own plugin to accomplish the task. However, I am encountering an unusual CSS issue with the table. Once I applied the plugin, the borders of table cells became disorganized. Here is a jsFiddle showcasing ...

javascriptjqueryhtmlcss

The variable 'xxx' is not defined in this context

I am attempting to incorporate a dark theme into ngx-charts, and I'm relatively new to using less. Here is the code snippet: My IDE is showing an error message "Cannot find variable 'color-bg-darker'" which leads to compilation failure. Err ...

cssangularlessngx-charts

What could be causing the Gruntfile to throw an error?

Getting an unexpected error while trying to run grunt $ grunt Loading "Gruntfile.js" tasks...ERROR >> SyntaxError: Unexpected token : Warning: Task "default" not found. Use --force to continue. Execution terminated due to warnings. Here is my ...

javascriptcommand-linenpmgruntjs

Update the URL using JQuery and Ajax without having to reload the page, ensuring compatibility with Internet Explorer versions 8 and 9

Upon the initial loading of my webpage, it directs to the following URL: /default/ After clicking the "nextPost" button on the screen (which includes an attribute named data-nextPostNumber), the corresponding code is as follows: event.preventDefault(); ...

javascriptjqueryajaxurlget

Retrieve the value of an attribute within a controller function that is not a directive

Here is some HTML content, <button data-href="helloworld">Show href Value</button> And here is some Javascript content, $("body").on('click', 'button', function(){ console.log($(this).attr("data-href")); }); When exe ...

javascriptangularjs

Fuel Calculation - Unable to pinpoint the error

My JavaScript Code for Calculating CO2 Emissions I'm working on a program that calculates how much CO2 a person produces per kilometer. This is part of my school project and I'm still learning, so please bear with me... I also just signed up on ...

javascripthtmlbootstrap-4

Retrieve JSON object based on its unique identifier from a different JSON file

I am working with 2 API resources: and it returns JSON data like this: { "id": 771, "title": "Call to Alyce Herman - Engine Assembler", "assigned_with_person_id": 317, } provides ...

javascriptjsonlaravelvue.jsaxios

What is the best way to retrieve the value of a textbox with a dynamic ID?

Within this section, you will find two input elements: one button and one textbox. The purpose of the qty-input is to input the quantity of products, and upon clicking the button via jQuery, the shopping cart is updated. While hardcoding as 1 works fine, I ...

javascriptjqueryangularjsasp.net-mvc

Obtaining the translated text from the script in Vue JS using Vue Translate

My code currently looks something like this: <template> <div> {{ text }} </div> </template> <script> export default { data: () => ({ text: 'Hello world' }) } </script> I am tryin ...

javascriptvue.jsvuejs2

Encountering a Laravel Nova issue where attempting to override a Vue component leads to a Vue warning: Error

Recently, I decided to incorporate a user guide into my nova using the following Vue Shepherd library. To make this work, I made some adjustments in the files within the nova directory. One of these changes involved renaming the file "webpack.mix.js.dist" ...

javascriptlaravelvue.jsvue-componentlaravel-nova

Utilizing the power of Datatables through AJAX calls with HTML Forms

Hello, I am currently working on incorporating djangorestframework-datatables with the datatables' JQuery plugin. My task involves loading a large table (consisting of approximately 15000 entries, paginated) with the serverSide option enabled. Enabli ...

javascriptjquerydjangoajaxdatatables

accessing HTML form via XMLHttpRequest (XHR)

One challenge I'm facing is retrieving form content using XmlHttpRequest, but it doesn't seem to post anything on the subsequent page. If I include the form within the same page where my script is used, it does post data. However, the informatio ...

javascriptphphtmlajaxxmlhttprequest

After manipulating the array, Vue fails to render the input fields generated by the v-for directive

After setting the value externally, Vue component won't re-render array items. The state changes but v-for element does not reflect these changes. I have a component that displays items from an array. There are buttons to adjust the array length - &a ...

javascriptvue.js

What techniques can I implement with puppeteer to efficiently warm up the cache?

I have a lengthy txt document containing around 1000 URLs that need to be accessed in order to warm up the Varnish cache. Since Puppeteer is required, it's crucial that there is important content loaded through AJAX calls. This is my initial attemp ...

javascriptnode.jsweb-scrapingpuppeteer

What is the best way to dynamically fill an HTML select box with data using jQuery in the C# code-behind?

Trying to populate a dropdown on an HTML front end and C# code behind from a blank ASPX page acting as a local server, using jQuery/AJAX. As a newcomer to this, any assistance is greatly appreciated. After attempting various methods without success, here ...

c#jqueryasp.netajaxvisual-studio

AngularJS - Smoothly navigate to the top of the page by swiping left or right

I'm currently working on a project in angularJS and ionic that involves a slidebox with three slides, each containing different content. My goal is to scroll back to the top every time I switch between slides. Initially, I thought using on-swipe-left ...

javascriptangularjsionic-framework

Tips for capturing an error generated by a child component's setter?

I've created an App component that contains a value passed to a Child component using the @Input decorator. app.component.html <app-child [myVariable]="myVariable"></app-child> app.component.ts @Component(...) export class AppC ...

javascriptangulartypescript

The component name 'Hidden' is not valid for use in JSX

Currently, I'm immersed in a personal project focused on creating a responsive website utilizing Material-UI. In this endeavor, I've leveraged React and kickstarted the project with create-react-app. To enhance the design, I incorporated code fro ...

javascriptreactjsmaterial-ui

JavaScript will only recognize the first two elements of an array when used in an if statement

I have recently rebuilt my game in HTML/CSS/JS from scratch, based on an old question. Everything seems to work fine when there is only one player and one brick present. However, as soon as I introduce multiple bricks, things start to go wrong. I used an ...

javascriptarraysfor-of-loop

Revolutionizing Zen Cart with slimMenu

Is there a smarter person out there who can help me understand why the slimMenu is breaking when I add these files to the bottom of the page? <link href="includes/templates/westminster_new/css/age-verification.css" rel="stylesheet"> <script src=" ...

phpjquerycssjquery-cookie