The designer applied a button’s box shadow in Figma with 1rem blur-radius multiple times, to render it stronger.
I figured out that I can approximate the same box shadow with a single one, using a smaller blur-radius and a spread-radius.
So I’m wondering: How do repeated box-shadows get combined, and how could one calculate the single shadow to replace the repetition?
body {
background: #000f4d;
}
button {
display: block;
color: white;
background-color: #000f4d;;
border: .1rem solid white;
border-radius: 2.5rem;
padding: .8rem 1.3rem;
margin: 2rem;
}
.multiple {
box-shadow: 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7, 0 0 1rem #0dc0f7;
}
.equivalent {
box-shadow: 0 0 .625rem .4rem #0dc0f7;
}
.single {
box-shadow: 0 0 1rem #0dc0f7;
}
<button class="multiple">Multiple shadows</button>
<button class="equivalent">Equivalent single shadow</button>
<button class="single">Single shadow</button>
Related
This code below for the most works. But when I type inside the lines, and suppose the cursor is in the middle of the word, if I play around and press enter and backspace, two numbers will show up on a line. Is there a CSS-only way of fixing this so only one number per line, and the line numbers still match up?
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
}
pre span {
display: inline-block;
line-height: 1.5rem;
counter-increment: line;
}
pre span:before {
content: counter(line);
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>
UPDATE: Just tested on Firefox, different layout so the snippet below does not number the lines. (FF just puts in <br> rather than any further HTML structure).
Will leave this answer up for a bit in case it helps someone get to a general answer for all common browsers.
ORIGINAL ANSWER:
At least on Edge/Chrome the extra lines seem to be encased in div elements.
This snippet numbers the first line, which is just a span, in the same way that you have done but then numbers using the counter called line on the div immediate children of the pre rather than on the encased spans.
pre {
background: #303030;
color: #f1f1f1;
padding: 10px 16px;
border-radius: 2px;
-moz-box-shadow: inset 0 0 10px #000;
box-shadow: inset 0 0 10px #000;
counter-reset: line 1;
}
pre>span::before {
content: '1';
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
pre div {
line-height: 1.5rem;
counter-increment: line;
}
pre div::before {
content: counter(line);
display: inline-block;
padding: 0 .5em;
margin-right: .5em;
color: #888;
}
<pre contenteditable="true" spellcheck="false">
<span>lorem ipsum</span>
</pre>
I am working on a design where I would like to have the background of text be as a block of text specific to the word themselves (As per example 1). When I decrease the leading. That is, make the line-height tighter and closer together it runs into issues and crops the letters above it.
Searching for a better approach so that I can have tight leading and a maintain the nice block background.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
You need to add style display: inline-block; on span element.
Wrap your text in another <span> and give it position: relative;.
Edit: Yudiz_Webdesign's solution is better, but I'll leave this here as an alternative.
.example1 {line-height: 1.4}
.example2 {line-height: 1.1}
.box { margin: 0 0 50px 0; padding: 0; font-family: helvetica, arial; font-weight:bold; font-size: 40px; width: 550px; }
.box > span { background-color: #060055; color: #ffffff; box-shadow: -10px 0px 0 10px #060055, 10px 0px 0 10px #060055, 0 0 0 10px #060055; box-decoration-break: clone; }
.box span.inner { position: relative; }
<div class="box example1"><span>Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></div>
<div class="box example2"><span class="outer"><span class="inner">Testing anything<br> here. Testing anything here. <br>Testing anything here.</span></span></div>
Does anyone know if it's possible to draw this red shape for title background in CSS only ?
I need to have this with different width for different title lenght.
Thank you !
Manue
If border-radius seems fine to you, you may tune each corners in 2 ways to get a shape alike :
see for more information : https://developer.mozilla.org/en-US/docs/Web/CSS/border-radius
example possible below
h1 {
display: table;
margin: 0.1em auto;
font-size: 45px;
font-family: cursive;
text-transform: uppercase;
padding: 0.25em 0.5em;
background: #D71E19;
color: white;
/* below the values you want to tune to round and cut off corners */
border-radius: 0.75em 0.5em 0.65em 0.5em / 25px 22px 100px 50px;
}
h1 + h1 {
/* borders or shadow will follow the shape edge */
margin-top:10px;
box-shadow:0 0 0 4px pink, 0 0 4px 3px black, inset 0 0 2px black;
text-shadow:1px 1px 2px gray, -1px -1px 2px #333;
}
<h1>Title experiment</h1>
<h1>shadow & border</h1>
Is it possible to create a button that look like this in CSS:
Of course I don't mean using an image as background, I can easily do that. I'm talking about the webkit type of solution.
The short answer is yes, it can be done. I went ahead and gave it a shot.
These are the steps I took:
I opened your bitmap in Sketch, my favorite graphical tool for all things web
I zoomed in to your bitmap, traced the outline with a rounded rectangle and gave it the correct color
I started adding box-shadows, both outside and inset, to replicate the bitmap as close as possible. Note that I only used black and white (with varying alpha values) for the box shadows. This way you can easily change the color of the button by just changing the background-color.
I also added two extra shapes for the bottom shadow and the top glow, as I did not manage to get this right with just box shadows. As long as it are just 2 elements that should not be a problem however, you can use the :before and :after pseudo elements to include these in your css.
The resulting image looks something like this (not exact, but pretty close I think):
And then I translated the drawing to css, by choosing 'copy css attributes' and manually adding the :before and :after elements and doing some fine tuning. This is the (unprefixed) css I came up with:
.button {
display: inline-block;
color: #fff;
text-shadow: 0 0 2px rgba(0,0,0,.3);
font-family: sans-serif;
box-shadow:
inset 0 0 2px 0 rgba(255,255,255,.4),
inset 0 0 3px 0 rgba(0,0,0,.4),
inset 0 0 3px 5px rgba(0,0,0,.05),
2px 2px 4px 0 rgba(0,0,0,.25);
border-radius: 4px;
padding: 8px 16px;;
font-size: 12px;
line-height: 14px;
position: relative;
}
.button.red { background: #EA3D33; }
.button.green { background: #7ED321; }
.button.blue { background: #4A90E2; }
.button:before, .button:after {
content: '';
display: block;
position: absolute;
left: 2px;
right: 2px;
height: 3px;
}
.button:before {
top: 0;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
background: rgba(255,255,255,.6);
box-shadow: 0 1px 2px 0 rgba(255,255,255,.6);
}
.button:after {
bottom: 0;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
background: rgba(0,0,0,.15);
box-shadow: 0 -1px 2px 0 rgba(0,0,0,.15);
}
and a fiddle to demonstrate: http://jsfiddle.net/pn4qk3wL/
This question already has answers here:
Two color borders
(12 answers)
Closed 1 year ago.
With Photoshop, I can put two different border to an element with two different color. And with that, I can make many dynamic shade-effect with my elements. Even with Photoshop effects, I can manage that with Drop Shadow and Inner Shadow.
On the Web Design concern, if I have design like the image below, how can I achieve that with CSS? Is it really possible?
NOTE: I'm giving two borders to the white element: the outer border is white, and the inner border is greyish. Together, they create a dynamic look so that it feels like an inset element, and the white element is pillow embossed. So thing is a bit:
div.white{
border: 2px solid white;
border: 1px solid grey;
}
But you know it's a double declaration, and is invalid. So how can I manage such thing in CSS?
And if I put border-style: double then you know I can't pass two different color for the singe double border.
div.white{
border: double white grey;
}
Additionally, I'm familiar with LESS CSS Preprocessor. So if such a thing is possible using CSS Preprocessor, please let me know.
Alternatively, you can use pseudo-elements to do so :) the advantage of the pseudo-element solution is that you can use it to space the inner border at an arbitrary distance away from the actual border, and the background will show through that space. The markup:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
padding: 2em;
width: 16em;
height: 16em;
position: relative;
margin: 0 auto;
}
.double-border:before {
background: none;
border: 4px solid #fff;
content: "";
display: block;
position: absolute;
top: 4px;
left: 4px;
right: 4px;
bottom: 4px;
pointer-events: none;
}
<div class="double-border">
<!-- Content -->
</div>
If you want borders that are consecutive to each other (no space between them), you can use multiple box-shadow declarations (separated by commas) to do so:
body {
background-image: linear-gradient(180deg, #ccc 50%, #fff 50%);
background-repeat: no-repeat;
height: 100vh;
}
.double-border {
background-color: #ccc;
border: 4px solid #fff;
box-shadow:
inset 0 0 0 4px #eee,
inset 0 0 0 8px #ddd,
inset 0 0 0 12px #ccc,
inset 0 0 0 16px #bbb,
inset 0 0 0 20px #aaa,
inset 0 0 0 20px #999,
inset 0 0 0 20px #888;
/* And so on and so forth, if you want border-ception */
margin: 0 auto;
padding: 3em;
width: 16em;
height: 16em;
position: relative;
}
<div class="double-border">
<!-- Content -->
</div>
I use outline a css 2 property that simply works. Check this out, is simple and even easy to animate:
.double-border {
display: block;
clear: both;
background: red;
border: 5px solid yellow;
outline: 5px solid blue;
transition: 0.7s all ease-in;
height: 50px;
width: 50px;
}
.double-border:hover {
background: yellow;
outline-color: red;
border-color: blue;
}
<div class="double-border"></div>
you can add infinite borders using box-shadow using css3
suppose you want to apply multiple borders on one div then code is like:
div {
border-radius: 4px;
/* #1 */
border: 5px solid hsl(0, 0%, 40%);
/* #2 */
padding: 5px;
background: hsl(0, 0%, 20%);
/* #3 */
outline: 5px solid hsl(0, 0%, 60%);
/* #4 AND INFINITY!!! (CSS3 only) */
box-shadow:
0 0 0 10px red,
0 0 0 15px orange,
0 0 0 20px yellow,
0 0 0 25px green,
0 0 0 30px blue;
}
Use of pseudo-element as suggested by Terry has one PRO and one CON:
PRO - great cross-browser compatibility because pseudo-element are supported also on older IE.
CON - it requires to create an extra (even if generated) element, that infact is defined pseudo-element.
Anyway is a great solution.
OTHER SOLUTIONS:
If you can accept compatibility since IE9 (IE8 does not have support for this), you can achieve desired result in other two possible ways:
using outline property combined with border and a single inset box-shadow
using two box-shadow combined with border.
Here a jsFiddle with Terry's modified code that shows, side by side, these other possible solutions. Main specific properties for each one are the following (others are shared in .double-border class):
.left
{
outline: 4px solid #fff;
box-shadow:inset 0 0 0 4px #fff;
}
.right
{
box-shadow:0 0 0 4px #fff, inset 0 0 0 4px #fff;
}
LESS code:
You asked for possible advantages about using a pre-processor like LESS. I this specific case, utility is not so great, but anyway you could optimize something, declaring colors and border/ouline/shadow with #variable.
Here an example of my CSS code, declared in LESS (changing colors and border-width becomes very quick):
#double-border-size:4px;
#inset-border-color:#fff;
#content-color:#ccc;
.double-border
{
background-color: #content-color;
border: #double-border-size solid #content-color;
padding: 2em;
width: 16em;
height: 16em;
float:left;
margin-right:20px;
text-align:center;
}
.left
{
outline: #double-border-size solid #inset-border-color;
box-shadow:inset 0 0 0 #double-border-size #inset-border-color;
}
.right
{
box-shadow:0 0 0 #double-border-size #inset-border-color, inset 0 0 0 #double-border-size #inset-border-color;
}
You can use outline with outline offset
<div class="double-border"></div>
.double-border{
background-color:#ccc;
outline: 1px solid #f00;
outline-offset: 3px;
}
Maybe use outline property
<div class="borders">
Hello
</div>
.borders{
border: 1px solid grey;
outline: 2px solid white;
}
https://jsfiddle.net/Ivan5646/5eunf13f/
Try below structure for applying two color border,
<div class="white">
<div class="grey">
</div>
</div>
.white
{
border: 2px solid white;
}
.grey
{
border: 1px solid grey;
}
You can use the border and box-shadow properties along with CSS pseudo elements to achieve a triple-border sort of effect. See the example below for an idea of how to create three borders at the bottom of a div:
.triple-border:after {
content: " ";
display: block;
width: 100%;
background: #FFE962;
height: 9px;
padding-bottom: 8px;
border-bottom: 9px solid #A3C662;
box-shadow: -2px 11px 0 -1px #34b6af;
}
<div class="triple-border">Triple border bottom with multiple colours</div>
You'll have to play around with the values to get the alignment correct. However, you can also achieve more flexibility, e.g. 4 borders if you put some of the attributes in the proper element rather than the pseudo selector.