Using box-shadow to style an inline element

Placing a multiline text on an image with a white background resembling tape requires small padding on each side of the text. One way to accomplish this is by using box-shadow for the inline text.

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

Unfortunately, Firefox produces different results compared to Chrome when displaying the text. While this doesn't necessarily mean Firefox's behavior is incorrect, you may wonder how to achieve the same result in Firefox as you see in Chrome.

Answer №1

For optimal performance in Firefox, simply adjust the CSS property box-decoration-break: clone;. Once you make this change, everything should work smoothly :)

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    box-decoration-break: clone;
    color:black;
    background-color:white;
    display:inline;
    -moz-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    -webkit-box-shadow: 5px 0px 0px white, -5px 0px 0px white;
    box-shadow: 5px 0px 0px white, -5px 0px 0px white;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</div>

Answer №2

I trust this meets your intended goals?

div.slide {
    background-color: black;
    height:200px;
    width:600px;
}
div.show {
    position:absolute;
    top:50px;
    left:50px;
    color:black;
    width:200px;
}
h3 {
    color:black;
    display:inline;
    
    text-shadow:
    -1px -1px 0 #fff,  
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
     1px 1px 0 #fff;
}
<div class="slide">
    <div class="show">
        <h3>Lorem ipsum dolor sit amet, consetetur sadipscing elitr</h3>
    </div>
</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

Special html effects for scrolling

Recently, I've been noticing a trend of websites incorporating new and innovative scrolling effects. One great example is: As you scroll down the page, the initial section stays fixed in place (z-index of 1?) while the content scrolls over it seamles ...

Display only the md-tab that is currently active

Is it possible to display only the active tab in md-tabs on a mobile view, centering the tab and allowing the user to swipe left or right to change the tab title with full width? The tabs are currently structured like this: <md-toolbar> <md- ...

Tips for altering the icon fill color in toastr notifications

I have customized toastr success and error messages in my application by changing the background and font colors. Now, I want to update the colors of the icons displayed in these messages. Despite my thorough search, I have been unable to find a way to mod ...

Embrace the words enveloped within large quotation marks

I am seeking a way to format paragraphs with large quotation marks surrounding them. I have attempted several methods, but my line-height seems to be affected, as shown in the following image: Can anyone suggest a proper method for achieving this? (Addit ...

What is the best way to combine a custom CSS class and a bootstrap class to style an element in next.js?

In the following example, the CSS class is imported and then applied to the element: import customStyles from "./Home.module.css"; <div className={(customStyles.collection, "card")}> Although they work individually, when combined as shown above, t ...

Swap out the image backdrop by utilizing the forward and backward buttons

I am currently working on developing a Character Selection feature for Airconsole. I had the idea of implementing this using a Jquery method similar to a Gallery. In order to achieve this, I require a previous button, a next button, and the character disp ...

slow loading background slideshow in css

Creating a simple slideshow for the background using CSS has been successful, but I am facing an issue with making all backgrounds utilize background-size: cover. I want the images to fit properly on the screen. Another problem is that the pictures take a ...

Using the MUI library, implement a ternary operator to handle the PaddingLeft property

One of the challenges I am facing in my application is to dynamically change the paddingLeft of the container based on whether the side nav menu is selected open or closed. I have a variable called open that indicates the current state of the side nav. ...

Tips for displaying a section of an image similar to the style seen on the website 9gag.com

Is there a way to display only a portion of an image (in this case, to hide the watermark) similar to how it is done on 9gag.com? I attempted to use clip in CSS, but it requires the image to be positioned absolutely, which is not ideal for me. Are there a ...

Rounded corners on border images

I'm working on styling a div element with gradient borders using CSS, and I want to round the corners as well. Here's my current code: <div class = "gradborders" id="mydiv" runat="server"> <!-- various elements --> </div ...

Looking to toggle text back and forth with a simple click? Here's how!

My goal is to toggle the text ____ (a gap) back and forth with Word by simply clicking it. I prefer not to use a button, as I want the user to only need to click on the actual gap itself. I came across this page which outlines exactly what I am looking fo ...

Improperly formatted image

I need help! I'm trying to center an image split into 6 equal parts on the page, but it's coming out squashed. I think the issue is that the images are appearing square instead of rectangles, but I can't figure out why. Any assistance would ...

What is the best way to eliminate the space between two columns of a row in Bootstrap 5 grid system?

In my quest to achieve the grid layout illustrated in the image below https://i.sstatic.net/4hsjw.jpg .col_1{ background-color: bisque !important; height: 500px; } .col_2 { width: 300px; height: 287px; background-position: cent ...

Examining website design on an IOS device from a Windows computer

Is there a way for me to test HTML files from Windows on iOS8 (Local Files)? I have tried Adobe Edge Inspect, but it only works with servers. Are there any free cloud hosts that allow for HTML, CSS, and JS files? Edit: I apologize if my question was not c ...

Adjusting the size of the text input without changing the padding

How can I increase the font size to 1rem without changing the height of an input text field that has a padding of 1rem? The goal is to maintain the same height for the input field. Any ideas on how to achieve this? This is my current HTML structure: < ...

Tips for personalizing a jQuery Mobile popup

Is there a way to customize the appearance of a dialog box using CSS? I've been struggling with my attempts so far... <div data-role="dialog" id="confirm-clear" class="dialog-custom" > <div data-role="content" > <p>Some ...

Issue with MUI data grid not resizing properly within a grid container: The dimensions of the MUI data grid are not adjusting as anticipated

In my setup, I have a main grid <div> container that contains two child elements. One is the MUI <DataGrid />, and the other is a simple <div>: Here's how it looks in JSX (React): <div className="container"> <Da ...

What steps should I take to create a horizontal parallax scrolling effect on my website

I am seeking to create a unique parallax effect on my website's background that scrolls horizontally instead of vertically. I attempted to make adjustments to the jQuery code below, which was originally for vertical scrolling, but was unsuccessful in ...

What is the best way to incorporate a company logo with its name into a website while also utilizing <h1> headings effectively?

As I design a fixed navigation for my website, it will feature a logo with the company name and an icon. Since the company name is already included in the logo itself, I am debating whether to use a header tag in my HTML. However, I do want search engine ...

Fade effect button with jQuery on mouseover

I have implemented a mouseover fade effect button using jQuery. However, I am facing an issue where the image fades to white instead of "img.b" as intended. Can anyone provide suggestions on why this may be happening? $(document).ready(function(){ $(" ...