Box-Shadow for Inline Element

box-shadow for inline element

Firefox requires box-decoration-break: clone; just change that and you are good to go :)

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>

Is it possible to create box-shadow effect for inline text?

Here's a method of achieving a multi-line, padded, highlight behavior for text using just CSS.

This is based on the box-shadow method found elsewhere however as of Firefox 32 the traditional box-shadow solution no longer renders correctly.

Reviewing the changes made I found the addition of a new property: box-decoration-break, that was responsible. This property defaults to 'split' but needs to be specified as 'clone' to achieve the desired multiline padding effect.

For more info see:
https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break

.box {  width: 50rem;  margin: 1rem auto;  font-family: arial, verdana;}
h1 {  color: white;  font-size: 2.5rem;  line-height: 4rem; /* reduce size to remove gap between text */  margin: 0px;}
h1 span {  background-color: #A8332E;  padding: 0.5rem 0;  -webkit-box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;  box-shadow: 1rem 0px 0px #A8332E, -1rem 0px 0px #A8332E;  -webkit-box-decoration-break: clone;  -ms-box-decoration-break: clone;  -o-box-decoration-break: clone;  box-decoration-break: clone;}
<div class="box">  <h1>    <span>Multi-line, padded, highlighted text working in latest Firefox using box-decoration-break: clone</span>  </h1></div>

How to set continuous box-shadow through all inline-block centered li elements

http://jsfiddle.net/Ft7DP/

<div id="menu"><ul><li>First</li><li>Second</li><li>Third</li></ul></div>

That's sorta the same stuff you had in your fiddle. Below is a simplified version of the CSS, the minimum amount to make it work as you requested:

#menu { text-align: center; }
ul { display: inline-block; box-shadow: 0px 8px 6px -6px yellow; }
li { display: inline-block; }

Make the whole UL an inline-block, this way it's width depends on it's contents instead of just going the whole way across. Now instead of putting text-align: center on the UL, put it on the div that's wrapping the UL. Then move the box-shadow from the LI to the UL and done :)

How can I use an inline style to add a shadow around the used portion of my page?

I don't quite grok why it works (and other attempts didn't), but this works for me (adding the shadow style to the html element, but still adding margin rules to the body element). This shows it in a fair amount of context, but the key lines are for "html", "body", and "hr":

builder.Append("<html style='margin-top:20;margin-left:60;margin-right:60; -webkit-box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .25);box-shadow: -1px 0 5px 0 rgba(0, 0, 0, .5);padding-left: 1px;padding-right: 1px;padding-bottom: 15px;'>");
builder.Append("<head>");
builder.Append("<title>");
builder.Append(string.Format("Available Reports For {0}", _unit));
builder.Append(_unit);
builder.Append("</title>");            
builder.Append("<script src='https://code.jquery.com/jquery-1.12.2.min.js' integrity='sha256-lZFHibXzMHo3GGeehn1hudTAP3Sc0uKXBXAzHX1sjtk=' crossorigin='anonymous'></script>");
builder.Append("<link href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css' rel='stylesheet' />");
builder.Append("<script src='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js'></script>");
builder.Append("<link href=\"~/Content/Site.css\" rel=\"stylesheet\" />"); 

builder.Append("</head>");
builder.Append("<body style='margin-top:20;margin-left:20;margin-right:20;'>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("<img src=\"http://www.proactusa.com/wp-content/themes/proact/images/pa_logo_notag.png\" alt=\"PRO*ACT usa logo\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append(string.Format("<h1 style='font-family:Candara, Calibri, serif;'>Available PRO*ACT Reports for <span style='color: #000080;'>{0}</span></h1>", _unit.ToUpper()));
builder.Append("</div>");

builder.Append("<div class=\"col-md-3\">");
builder.Append("</div>");
builder.Append("<div class=\"col-md-9\">");
builder.Append("<label  style='font-family:Georgia, Tahoma, sans-serif;'>(Click any link below to download the Excel spreadsheet file to your computer)</label>");
builder.Append("</div>");

builder.Append("<div class=\"row\">");
builder.Append("<div class=\"col-md-12\">");
builder.Append("<hr style='border:0;height:1;background:#333;color:navy;margin-left:-20;margin-right:-20;' />");

Only show box-shadow on part of a side

Here is box-shadow syntax,

box-shadow: offset-x | offset-y | blur-radius | spread-radius | color

Try reducing it's spread-radius and increase it shadow towards y-axis.

* {  padding: 0;  margin: 0;}
div {  height: 50px;  width: 100%;  background: white;  box-shadow: 0px 0px 5px #000000;}
a {  display: inline-block;  margin-left: 30px;  padding: 10px;  height: 60px;  background: white;  position: relative;}
a:before {  content: "";  position: absolute;  left: 0;  top: 0;  width: 100%;  height: 100%;  box-shadow: 0px 0px 5px #000000;  z-index: -1;}
img {  height: 100%;}
<div>  <a href="#">    <img src="https://via.placeholder.com/200x100">  </a></div>

box-shadow' on a custom component with only a shadow root attached applies as if component is 0x0px

Your custom component will have an inline display and you are adding a block element inside it. You are facing the behavior of "block element inside inline element"

Make your element inline-block to avoid dealing with such case

customElements.define('my-comp', class extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({
      mode: 'open'
    })
    const div = document.createElement('div')
    div.setAttribute('style', 'height: 100px; width: 100px; background: lime')
    this.shadowRoot.append(div)
  }
})
<my-comp style="box-shadow: 0px 0px 10px 10px brown;display:inline-block"></my-comp>

Different radius to box-shadow and div

Can't your problem be solved with overlapping multiple shadows?

body{  background-color:pink;  padding-left:20px;}div{    display:inline-block;    margin-top:30px;    margin-right:10px;    margin-left:8px;    height: 100px;    width: 100px;    border: 3px solid black;    max-width: 100%;    max-height: 100%;    box-shadow:       -27px -27px 0 -9px blue,      -27px 27px 0 -9px blue,      -9px -9px 0 9px blue,       -9px 9px 0 9px blue,       9px -9px 0 9px blue,       9px 9px 0 9px blue;   border-radius: 10px;}div:first-child {  box-shadow:      -9px -9px 0 9px blue,       -9px 9px 0 9px blue,       9px -9px 0 9px blue,       9px 9px 0 9px blue;}
<div></div><!-- no space between inline-blocks to make gaps predictable--><div></div><!----><div></div><!----><div></div>

Border-radius and box-shadow attributes doesnt affect the code

Edits:

  • body: deleted overflow and top properties. added align-items: center; and height: 100vh;
body {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
  • card: overflow: hidden; to hide the corners plus box-shadow and border-radius.
.card {
  box-shadow: 0 0 10px 10px lightskyblue;
  overflow: hidden;
  border-radius: 30px;
}

The Code:

* {
  box-sizing: border-box; 
}

body {
  background-color: #8F91A2;
  font-size: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  height: 100vh;
}

.card {
  width: 45rem;
  height: 17rem;
  background-color: #1E1E24;
  display: flex;
  flex-direction: row-reverse;
  box-shadow: 0 0 10px 10px lightskyblue;
  overflow: hidden;
  border-radius: 30px;
}

.card__img, .text-box {
  background-color: white;
  width: 40%;
  height: 100%; 
}
  
.card__img img, .text-box img {
  width: 100%;
  height: 100%; 
}

.text-box {
  width: 60%;
  background-color: #1E1E24; 
}
  
.text-box__up {
  width: 80%;
  height: 75%;
  padding: 1rem; 
}

.text-box__up__header {
  width: 100%;
  height: 45%;
  margin-top: .3rem;
}

.text-box__up__header h1 {
  display: inline-block;
  padding: 0.3rem;
  margin-left: 3rem;
  font-family: 'Staatliches', cursive;
  color: white;
  margin-top: 0px;
  font-size: 1.6rem;
  text-align: center; 
}

.text-box__up__text {
  width: 80%;
  height: 25%;
  margin-left: 3rem;
  margin-top: .7rem;
  padding: .2rem;
  font-family: 'Montserrat', sans-serif;
  color: #FFD046;
  text-align: center;
  font-size: .6rem; 
 }

.text-box__down {
  width: 80%;
  height: 25%;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: .2rem;
  margin-left: 2rem; 
}

.text-box__down__element {
  display: inline-block;
  color: white;
}

.text-box__down__element h2 {
  margin-top: 0px;
  margin-bottom: 0rem;
  font-family: 'Staatliches', cursive; 
}

.text-box__down__element span {
  font-family: 'Montserrat', sans-serif; 
}
<div class="container">
    <div class="card">
        <div class="card__img"><img
                src="https://images.unsplash.com/photo-1623654517565-d9886645bb8a?ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&ixlib=rb-1.2.1&auto=format&fit=crop&w=1525&q=80"
                alt="Sample Image"></div>
        <div class="text-box">
            <div class="text-box__up">
                <div class="text-box__up__header">
                    <h1>Get insights that help grow your business</h1>
                </div>
                <div class="text-box__up__text">
                    <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Minima a sapiente consequuntur
                        aliquid
                        minus labore magni aspernatur, nam, aperiam.
                    </p>
                </div>
            </div>
            <div class="text-box__down">
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
                <div class="text-box__down__element">
                    <h2>10K+</h2>
                    <span>Companies</span>
                </div>
            </div>
        </div>
    </div>
</div>

Related Topics

Different Timing Functions for Different Parts of CSS3 Keyframe Animation? (Accurate Bounce)

Bootstrap Thumbnail Grid Not Starting a New Row Correctly

Change the Color of Mui Autocomplete Option

Chrome and Media Queries Bug

Make CSS Shimmer Effect Work an Already Loaded Image

Matrix 3D Transform for Obtaining Trapezoid

Global CSS Variables VS Local Variables in Terms of Efficiency

Distorted Spacing Between Div Elements After Sorting with Jqui_Sortable

Flexbox Vertical Align Child Top, Center Another

CSS Media Queries for Iphone

User Generated Custom CSS

CSS of Specific Table Row

Margin Behavior of "Overflow:Hidden" Div After Floating Div on Webkit

Convert Internal Stylesheet to Inline CSS

Change All Variable Value Based on Body Class

Chrome Cut Off Oswald-Light Font

Set Width of Ng-Multiselect-Dropdown

Stretch Horizontal Ul to Fit Width of Div


Leave a reply



Submit