How can I modify text similar to this image and what is the process involved?
How can I modify text similar to this image and what is the process involved?
There are various ways to achieve this effect. One common method is using the text-shadow property, which allows you to apply multiple text shadows. However, the result may not always look great (refer to the fiddle below).
Another option is to utilize the -webkit-text-stroke-width property, but keep in mind that this is a prefixed property that may be deprecated in the future (again, refer to the fiddle below). Despite this drawback, it offers a simpler solution and produces results closer to the desired aesthetic compared to the box-shadow technique, particularly at larger sizes.
The third and perhaps most consistent option for achieving the desired visual effect while maintaining good cross-browser compatibility is through the use of SVG (as demonstrated above, see fiddle below).
In the SVG example provided, additional text is placed over the original to compensate for strokes encroaching within the text. For instance, applying a 4px stroke to the text will result in 2px being added outside and inside the text, leading to a less bold appearance. A similar effect can be achieved in the second example, which also employs strokes, by using a pseudo-element (like
<h1 data-stroke="PIN">PIN</h1>However, one downside to this approach is the increased nesting of HTML elements.
The choice of method ultimately depends on the specific context in which it will be used. Without seeing any code or examples of your current progress, it is difficult to provide a more precise answer.
body {
background: #eee
}
h1 {
font-family: Impact, sans-serif;
font-size: 4em;
color: red;
}
/* Well-supported, but looks a bit naff */
.shadow {
text-shadow:
-2px 0 0 #fff,
0 -2px 0 #fff,
2px 0 0 #fff,
0 2px 0 #fff,
2px -2px 0 #fff,
-2px 2px 0 #fff,
-2px -2px 0 #fff,
2px 2px 0 #fff,
3px 3px 4px rgba(0,0,0,0.5)
}
/* Uses prefixes, which might be dropped in the future */
.stroke {
-webkit-text-stroke-width: 2px;
-webkit-text-stroke-color: white;
text-shadow: 3px 3px 4px rgba(0,0,0,0.5)
}<body>
<!-- Using text shadow -->
<h1 class="shadow">PIN</h1>
<!-- Using webkit stroke -->
<h1 class="stroke">PIN</h1>
<!-- Using svgs -->
<svg width="100px" height="60px" viewBox="0 0 100 60">
<defs>
<style>
text {
font-family: Impact, sans-serif;
font-size: 50px;
fill: red;
alignment-baseline: middle;
}
.outline {
fill: white;
stroke: white;
stroke-width: 4;
}
</style>
<filter id="shadow" x="-20%" y="-20%" width="140%" height="140%">
<feGaussianBlur stdDeviation="2 2" result="shadow"/>
<feOffset dx="3" dy="3"/>
</filter>
</defs>
<text x="10" y="30" style="filter: url(#shadow); fill: rgba(0,0,0,0.7)">PIN</text>
<text x="10" y="30" class="outline">PIN</text>
<text x="10" y="30">PIN</text>
</svg>
</body>In the process of developing my application, I am utilizing an angular widget to construct a dynamic dashboard. Here is the snippet of HTML code along with the associated JavaScript that enables this functionality: <div class="page" gridster="gridsterO ...
I have a Vue.js setup to exhibit a collection of JSON data which consists mainly of numbers. These numbers are displayed in a table format, with one minor issue - if the number happens to be negative, the text color of its cell needs to be red. <table& ...
I am attempting to align two corners of an element so that they perfectly match the corners of another element. In simpler terms, I am aiming to synchronize the corners of one element with those of another element. Below is the code snippet: ... When y ...
I recently tried to create a scrolling marquee using code I found on lynda.com, but it isn't working properly on my HTML5 page. The main issue I've identified so far is that the code includes a reference to an XHTML 1.0 Transitional document type ...
I am using PHP to generate a HTML select option based on folders in a directory. Now, I am looking for a way to retrieve the value of the selected option in my jQuery script. I am familiar with $('#select :selected').text() and $(#select).val(), ...
Is it possible to programmatically trigger the deletion of text on an HTML web page using JavaScript or jQuery? I am looking for a way to replicate the functionality of clicking the "Delete" button without requiring users to physically click on it. Inste ...
I am currently working on achieving a specific design concept, which can be viewed at the following link: To guide me through this process, I have been following a tutorial available here: While I have successfully implemented the model and created mater ...
I'm having trouble displaying content using JavaScript DOM. Every time I try to run my code, the page comes up blank. Here is an example of my HTML file: <!DOCTYPE html> <html> <head> <title>Radiant HQ</titl ...
It seems there was some confusion in my approach. I'm working with a datatable that has an edit button at the end. Clicking on this button opens a modal, and I want to pass the data from the table to the modal. While I can send it as a single variabl ...
My goal is to dynamically pass the width value to a component's styles. Everything works fine on initial load, but when I resize the window, the component fails to re-render even though the hook is functioning as intended. I came across some informat ...
I have been working on creating anchor link scrolling and tooltip display using bootstrap, but I am encountering an issue. $(window).scroll(function(){ if ($(window).scrollTop() >= 100) { $('#header').addClass('fixed'); ...
I need help with my portfolio website. I can't seem to figure out how to make my header and navigation menu stack on top of each other when the page is small, and then go back to their normal layout when the page is larger. Below is the HTML code I&a ...
My goal is to display a full background image on a website, ensuring that the bottom of the image aligns with the bottom of the browser window without any cropping. I want the image to be positioned at the bottom left corner, cutting off anything above o ...
Within an ng-include template, I have a div that is not highlighting when hovered over. Although the cursor changes to a pointer when hovering over the text, attempting to click and drag to highlight it results in nothing happening. This issue is signific ...
Struggling with vertical centering an icon at the end of a list item. The goal is to vertically center the right arrow on the page. Using Bootstrap 3, Angular-UI bootstrap JS, and AngularJS. Current code snippet: <style> .center { display: in ...
I've been tinkering with this issue for a few hours now. I have a vertical Elementor navigation menu and I'd like to add a hover effect to it. So far, I can only select the entire column and apply the effect to that, not just the length of the t ...
I'm struggling with formatting my HTML form to have two text fields on the same line instead of stacked vertically. In the example below, I want the Size, Width, and Height fields to be aligned horizontally rather than one below the other. <form c ...
Possible Duplicate: read XML tag id from php How can I retrieve data from a specific div ID using PHP? I want to extract data from a div with the ID of <div id="content">, so that all the content within that div can be stored in a variable. Alt ...
My navigation bar is built using Bootstrap and contains multiple drop-down items. Now I have another div with the class of col-md-3. Within this div, I would like to display the items of the dropdown menu when hovered over. Currently, hovering over a dro ...
My Bootstrap toggler button is not working in ReactJS. I did not include the jQuery scripts because I imported Bootstrap at the top. The button should only appear and function on small devices. import React from 'react'; import 'bootstrap/d ...