Enclosing text with border-wrapped image shadows

Before:

After:

Using the following pair of images:

My HTML:

<table class=full>
<tr>
<td class=showTemp2>
THE CONTENT GOES HERE<br><br>
SURROUNDED BY THE TWO SHADOW IMAGES<br><br>
AND THAT'S IT
</td>
</tr>
</table>

My CSS:

.full {
width: 900px;
}
.showTemp2 {
    color: #1D2F9F;
    padding-top: 30px;
    padding-left: 30px;
    padding-right: 30px;
    padding-bottom: 0px;
    text-align: left;
    font-size: 13px;
    font-family: Verdana, 'Source Sans Pro';
    font-weight: plain;
    width: 100%;
}

The goal is to achieve the After image display, but I'm having trouble getting it right with my current CSS. The aim is for the images to expand and wrap around the text based on the width of the "full" table.

SOLUTION:

-moz-box-shadow: 0 0 10px #ccc;
-webkit-box-shadow: 0 0 10px #ccc;
box-shadow: 0 0 10px #ccc;
htmlcss

Answer №1

If you're looking to incorporate an image, consider using a combination of 3 images for added visual interest.

Start with the 1st image for the top section, followed by the 2nd image repeated along the y-axis to extend with your content length, and finally finish with the 3rd image for the bottom part.

<table class=full>
<tr>
<td class="topPart"></td>
<td class="middlepart">
INSERT YOUR CONTENT HERE<br><br>
SURROUNDED BY THE TWO SHADOW IMAGES<br><br>
AND THAT'S IT
</td>
<td class="lastPart"></td>
</tr>
</table>

This approach offers more flexibility compared to using only two images...

Answer №2

This method demonstrates how to effectively utilize 2 images while ensuring compatibility with IE8 and avoiding unnecessary markup. Keep in mind that your images may require adjustments if they do not have the same width.

<p class=full>
INSERT YOUR CONTENT HERE<br><br>
SURROUNDED BY THE TWO SHADOW IMAGES<br><br>
AND THAT'S IT
</p>

.full {
  width: 850px;
  padding: 20px;
  position: relative;
}

.full:before {
  position: absolute;
  content: ' ';
  display: block;
  height: 172px;
  width: 100%;
  top: -40px;
  left: -20px;
  background: url(https://yourimage1url.png) no-repeat;  
}

.full:after {
  position: absolute;
  content: ' ';
  display: block;
  height: 172px;
  width: 100%;
  bottom: -40px;
  left: -20px;
  background: url(https://yourimage2url.png) left bottom no-repeat;
}

Answer №3

.shadow-box{
    -o-shadow-box:0 1px 4px rgba(0,0,0,.2);
    -moz-shadow-box:0 1px 4px rgba(0,0,0,.2);
    -webkit-shadow-box:0 1px 4px rgba(0,0,0,.2);
    shadow-box:0 1px 4px rgba(0,0,0,.2);
    /* IE */
    *zoom:1;
    filter:progid:DXImageTransform.Microsoft.Shadow(color=#aaaaaa,direction=135,strength=10);
}

If your browser is IE version less than 9 and does not support cssLevel3, you will need to utilize Microsoft filters.

Otherwise, you may need to divide your texture into three parts - left, centerBottom, right. Then, you can adjust your HTML in order to apply the texture within a container (as suggested by cimmanon).

To learn more about 'msFilter', refer to my tests conducted here:

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

Adjust column content to fit width, instead of setting width to 100%

To create columns for the ul, I used flex-direction: column and flex-wrap: wrap. When the elements within the ul are split into multiple columns, each column takes on the width of the widest content in that column. However, if there is only one column, it ...

htmlcssflexbox

Attach a Material-UI Popper component to a customized edge label in a React Flow

After finding inspiration from this particular example in the react-flow documentation, I decided to create my own customized version. It showcases a Material Ui Popper that appears when the edge is selected. However, my problem arises when attempting to z ...

javascriptcssreactjsmaterial-uireact-flow

Having trouble adding a custom font with override to MuiCssBaseline in react-admin, the @global @font-face seems

I am attempting to integrate the NotoSansSC-Regular.otf font from Google into my react-admin application as the default font for simplified Chinese text. I have managed to make it work by including the fonts in the root HTML file using CSS, like this: ty ...

cssreactjsmaterial-uifont-facereact-admin

Tips for showcasing array values on an HTML webpage

Having trouble displaying the "latitude" and "longitude" in html. I attempted to use a forEach loop, but it was not successful https://i.sstatic.net/FnLMP.png this.otherService.getList().subscribe( (response: any) => { this.atm = response; H ...

htmlangularangular8

Upon completing the upload, dropzone.js displays checkmark and x icons for confirmation

It seems like there may be a CSS problem. When I programmatically create a dropzone box, I notice that the checkmark and x icons, along with other text, appear after the upload (see image link). <div id="header-dropzone"></div> $("#header-drop ...

javascriptcssdropzone.js

using javascript to change a link's state with a click action

I have a question that is related to the topic discussed here: Making a link stay active displaying hover effect upon click using javascript. I am looking for a way to disable the active class when the same link is clicked again. Any assistance on this mat ...

javascriptjqueryhtml

Using both CakePHP and jQuery to create a semicircle chart

I need a pie chart that visually represents two dynamic values. When the red value is 90%, the pie chart should be filled with red color up to 90% and the remaining 10% should be filled with green color. I also require the pointer to change dynamically b ...

phpjqueryhtmlcakephpcakephp-1.3

refresh html table data without refreshing the entire web page

I am looking for a way to update the cell colors in my 1-120 table without having to refresh the entire page. Currently, the colors are dependent on MySQL values pulled in through a PHP file and an AJAX request in the HTML. Is there a way to only update th ...

javascriptphphtml

Store the contents of the textarea into the database

Here's the issue I'm facing: I need to save the contents of a textarea from an HTML page Send it via an $.ajax call to a PHP file Write the textarea contents to the database Retrieve the text from the DB usin ...

phpjqueryhtmlajaxtextarea

Eliminate JavaScript comments with Regex in PHP

Looking to reduce the size of HTML code with the help of PHP and Regex. Here is the minify function: public static function sanitize_output($buffer) { $search = array( '/ {2,}/', '/<!--.*?-->|\t|(?:\r?& ...

javascriptphphtml

Expanding Side Panel feature in Bootstrap 4+

Attempting to create a collapsible sidebar using Bootstrap 4+. I managed to find code for Bootstrap 3.7.3 from here, but after converting it to Bootstrap 4+, the layout doesn't appear as intended. I'm not well-versed in HTML styling and would gre ...

jquerycssbootstrap-4sidebar

Size attribute set to 0 for an HTML input element

When an input element is rendered, it should have a width of 0. However, when there is no text in the input, the width should remain 0. To achieve this, you can use the following jQuery code: $('input').on('input', function () { $(th ...

javascripthtmlcss

There seems to be a white space problem located beneath the header photo and the initial

I'm a beginner at coding and working on this project for fun. I'm almost done, but I can't get rid of a white space that's dividing my header from the first section. See the screenshot below: https://i.stack.imgur.com/a1flt.png Even af ...

htmlcss

The impact of placing a method in the constructor versus outside it within a class (yielding identical outcomes)

These two code snippets appear to produce the same result. However, I am curious about the differences between the two approaches and when it would be more appropriate to use one over the other. Can someone provide insight into this matter? Snippet 1: c ...

javascripthtmltypescriptfunctionecmascript-6

Modify the color of a particular character in a CSS text box when hovered over

I am facing a challenge in changing the color of two specific characters when hovering over them inside a textbox that is styled purely with CSS. As the content is created using only CSS, I am unable to use style tags to accomplish this and feel stuck. M ...

javascriptjqueryhtmlcss

Updating style in Javascript can sometimes be a bit tricky

What's preventing this from working? localStorage.fontSize contains the correct value, but the initial document.body.style.fontSize = localStorage.fontSize + "pt"; doesn't update the style. <script type="text/javascript> if(!localStorage. ...

javascripthtmlcss

configure dynamic content within the slider element

Currently, I am experimenting with two jQuery plugins (awkward/Coda Slider 3) to implement a sliding effect for DIV content. Everything seems to be working smoothly until I attempt to set dynamic content (using JavaScript) after creating the plugin object. ...

javascriptjqueryhtml

What is the best way to determine which button was clicked in Django?

My HTML has two buttons - one for accepting and the other for rejecting requests. I am trying to figure out how to determine which button was pressed along with the email of the applicant (tutor_application.tutor.chalkslateuser.email). Despite multiple a ...

pythonhtmldjango

Interactive website that transitions to a fresh page as we scroll further

As a beginner in web design, I've noticed a trend of companies using websites that automatically transition to the next page when scrolling down. An example of this is . What is this type of template called and are there any open source designs availa ...

cssscroll

Obtain and showcase the index of the checkbox that has been selected

Is there a way to display the position of a checkbox when it is checked using JQuery? For instance, if Monday is checked, it should display position 0 and if Sunday is checked, it should show position 6. I have tried using .index() but it keeps returning 0 ...

javascriptjqueryhtmlcheckbox