What steps should be taken to achieve this specific text style using css3?

[Can someone assist me in achieving this effect using CSS3][1] I have experimented with multiple tools to create the desired effect, but haven't had any success

If you would like to see an image of what I am trying to achieve, please click on this link: https://ibb.co/kn1aKa

Below are snippets from my CSS file:

@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');

}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; }
<div class="headline-wrap">
  <h1>Some Text</h1>
</div>

htmlcssbordereffect

Answer №1

If you're searching for it, the CSS3 property you need is called text-shadow, and to apply it all around the text, you'll have to use it multiple times.

The text shadow property requires values for x-offset, y-offset, blur-radius, and color.

          /* offset-x | offset-y | blur-radius | color */
text-shadow: 1px        1px        2px           white;

It doesn't have a spread value, but you can create the desired effect by applying multiple shadows with different offsets as a comma-separated list.

text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;


@font-face { font-family: 'UTM Cookies'; font-style: normal; font-weight: 400; src: local('UTM Cookies'), local('UTM Cookies'), url(../fonts/UTM-Cookies_0.woff) format('woff');
}

.headline-wrap {
  background-color: lightblue;
}

.headline-wrap h1 { font-size: 20px; text-transform: uppercase; margin: 0px 0px 15px 0px; color: #000; font-family: UTM Cookies; padding: 6px 0px 6px 0px; color: #FF972F; text-align: center; 
  font-weight: bolder;
  text-shadow: 2px 2px white, -2px -2px white, 2px -2px white, -2px 2px white;
}
<div class="headline-wrap">
  <h1>Some text</h1>
</div>

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

Maintain the background div while scrolling horizontally

I am facing an issue with my wide bar chart where I use iScroll to enable horizontal scrolling. Behind the bar chart, there are horizontal lines that should move along in the background as the user scrolls horizontally. The challenge is to keep the lines v ...

htmlcss

Strategies for improving the efficiency of HTML and styles in a generated document

Generating the invoice printing form layout using dynamically created Razor views through RazorEngine can result in messy and hard-to-read code. The repetitive use of words like top, left, width, and height makes it challenging for human inspection and deb ...

htmlcssasp.net-mvcrazorstylesheet

Are there any other options similar to PhantomJs that offer support for CSS 3D effects?

I am working on capturing a webpage using NodeJs. My current setup involves using PhantomJs to capture screenshots of the page and ffmpeg to convert them into videos. However, I have encountered an issue where the page contains 3D transform CSS, which is n ...

javascripthtmlnode.jsphantomjsrecord

Struggling to customize Vuetify styles with my own stylesheet

In my current project, I am utilizing Vue2 and Vuetify. One of the main challenges I am facing is that my Vuetify styles are always imported after my own custom styles. I attempted the following: App.vue <template> <v-flex> <v-c ...

cssvue.jsvuejs2vuetify.js

Implementing background color changes based on a database value (sex) using JavaScript

Visualization: [IMG]+[HIDDEN INPUT]-—-[TEXT]-—-[ICON] [IMG]+[HIDDEN INPUT]-—-[TEXT]-—-[ICON] [IMG]+[HIDDEN INPUT]-—-[TEXT]-—-[ICON] (For each individual) I am looking to match the background color of the icon on the right with the IMG on the ...

javascripthtmlcssfunctionif-statement

jQuery: Select the parent element of a focused form input and apply styling

Recently, I encountered a situation where I have a form containing a DIV along with 3 INPUTS, each enclosed within a LABEL element. My goal is to alter the background image of the DIV whenever an INPUT receives focus. Due to limitations in navigating up t ...

jquerycssfocusbackgroundselector

Leverage the power of effekt in your AngularJS development

Can anyone demonstrate how to implement animation effects with AngularJS? Has someone created an example using Effeckt.css? ...

cssangularjsangularjs-animation

The size of the dropdown adjusts according to the changes in the page size

Can anyone help me with an issue I'm facing in my form? Whenever I zoom in or out on my browser, the select element within the form gets resized and changes its position. Any suggestions would be greatly appreciated. Below is the code snippet for refe ...

htmlcssbootstrap-4

Issue with different domains causes GET requests to be changed to OPTIONS requests

In my recent request and response interaction, I encountered an issue with the Access Allow Control Origin being set to *. Remote Address:xx.xxx.xxx.xxx:xx Request URL:http://api-test.example.com/api/v1/sample Request Method:OPTIONS Status Code:405 Method ...

jqueryajaxhtmljquery-mobilecors

Unable to touch the PHP-included part on mobile device

On my HTML page, I have included a form section like so: <?php include 'templates/register-form.php'?> Everything works fine in a web browser, but on mobile, I can see the section but cannot interact with it. The inputs and buttons are u ...

phphtml

Bootstrap responsive breakpoints for different sizes

As I was optimizing my webpage, everything was going smoothly until I had the idea to incorporate the srcset and sizes attributes into my <img> tags. I developed a php function that generates an img object and populates the srcset attribute with newl ...

htmltwitter-bootstrapmedia-queriesbootstrap-4srcset

Moving draggable items out of a div and placing them into a designated droppable area

I'm facing an issue with dynamically creating draggable "divs" within a "table" and trying to make them drop into multiple droppable areas. The problem is that when I drag the element, it leaves a gap and upon dropping, it lands in multiple places ins ...

jqueryhtmljquery-uijquery-ui-draggablejquery-ui-droppable

What are some methods for extracting content from a webpage that loads after the initial load?

Currently, I am facing an issue while attempting to retrieve stock option data from Yahoo Finance (using Google as a reference) using requests.get. It appears that not all the information is being downloaded successfully. Despite trying to access the dropd ...

pythonhtmlpython-3.xxpathweb-scraping

Troubleshooting HTML and JavaScript

Currently grappling with a coding challenge for a website in HTML/Javascript. Managed to put together a significant portion of code that seems functional, yet the roadblock I've hit now is around handling multiple line strings within Javascript. < ...

javascripthtmlfunction

Tips for increasing the spacing in information on a Python-based website

I am facing an issue with my code that is intended to format the data like this: Searching for: 5456 Child Unit ID: 32455 Unit Location: Test Despite writing the code to create this indentation, it doesn't seem to be working when I view it on ...

pythonhtmlpython-3.x

Is it possible to maintain image quality across different img element widths?

I have variations of the same image at different widths, such as balloon-35.webp, balloon-40.webp, balloon-90.webp. I also have several img tags with varying widths, like <img width="35"/>, <img width="40"/>, <img width="90"/>. Is it po ...

htmlimageresponsive-imagessrcset

Aligning multiple spans vertically within a div: Diverse display outcomes across various web browsers

Inside a single div, I have 3 spans. When viewed in Chrome, all three spans are vertically aligned in the center. However, in Firefox, the alignment is different. Below is the code for the div containing the quantity label, - button, text field, and + but ...

htmlcssdrupal-7

Using Bootstrap's collapse class with a smooth linear transition

I've been attempting to implement Bootstrap collapse with a linear effect, but have been encountering challenges. After trying different versions of Bootstrap, I found that the transitions were quite similar. I decided to go with the latest version av ...

htmlcssbootstrap-4

If the window width is less than the specified value, hide the DIV and replace it with a

I came across a discussion about hiding a div if the screen is narrower than 1024px, and I'm looking to implement something similar based on the quoted code below. Essentially, I want to hide one div (id="krug_wide") if the window width is less than 1 ...

javascriptjqueryhtmlcss

Tips for creating a clickable ::before image

I'm trying to create a hover effect where an image appears and is clickable when hovering over an element, similar to what is seen on many websites. For example, I want to display a bin icon when hovering over an element by using the ::before pseudo-e ...

csspseudo-element