How can I make a rectangle with long shadow like the image below using CSS?
Use this way:
#rectangle {
width: 150px;
height: 250px;
border: 2px solid black;
box-shadow: 1px 1px black,
2px 2px black,
3px 3px black,
4px 4px black,
5px 5px black,
6px 6px black,
7px 7px black,
8px 8px black,
9px 9px black,
10px 10px black;
}
<div id="rectangle"></div>
there.
Have you tried anything yet?
You can use a div: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/div and you can use box-shadow: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow - but you might need many many box shadows to get that smooth edge. Good luck!
example using linear-gradient
.box_volume {
width: 200px;
height: 300px;
background: linear-gradient(to top, #FFD700, #F0E68C);
box-shadow:
1px 0px rgb(320,163,35), 1px 1px rgb(192,167,7),
2px 1px rgb(319,162,34), 2px 2px rgb(191,166,6),
3px 2px rgb(318,161,33), 3px 3px rgb(190,165,5),
4px 3px rgb(317,160,32), 4px 4px rgb(189,164,4),
5px 4px rgb(316,159,31), 5px 5px rgb(188,163,3),
6px 5px rgb(315,158,30), 6px 6px rgb(187,162,2),
7px 6px rgb(314,157,29), 7px 7px rgb(186,161,1),
8px 7px rgb(313,156,28), 8px 8px rgb(185,160,0),
9px 8px rgb(312,155,27), 9px 9px rgb(184,159,0);
}
<div class="box_volume">
</div>
Related
When creating a span element that has a linear background, and no border, everything works fine.
But as soon as I add a border, the colors from the gradient become solid and just sit on the edges.
Increasing the border size mitigates the issue, but I have found no way to completely remove the problem without increasing the border width or removing the border.
CSS for the element:
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
i can't simulate it, so, my suggestion is to change from border to box-shadow: check the snippet below:
span{
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border-radius: 3px;
padding: 3px;
font-size: 50px;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px 1px black;
}
.border{
border: 3px solid black;
}
.box-shadow{
box-shadow: 0px 0px 0px 3px black;
}
<span class="border">My Contributions</span>
<br/> <br />
<span class="box-shadow">My Contributions</span>
The starting and ending points of the gradient are at the edges of the padding-box and border. That's why as soon as you add a border, the colors from the gradient become solid and just sit on the edges.
Using box-shadow:inset will fix the issue. See the updated CSS below.
background: linear-gradient(45deg, #0000ff, #ff0000);
color: white;
border: 3px solid black;
border-radius: 3px;
padding: 3px;
box-shadow: inset 0 0 0 3px black;
font-size: 2vw;
text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black, -2px 2px
1px black;
My <div> shadow box height is not covering inner <div>s height.
mainPageContent {
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
}
generated html
<div class="mainPageContent">
<div>
<div class="col-md-10 col-md-offset-1" id="box_front_top"> <!-- bootstrap grid columns -->
----
----
</div>
<div class="col-sm-10 col-sm-offset-1" id="box_front_bottom" style="display: none;">
---
----
</div>
</div>
</div>
How to fix this?
If your inner divs are floated , then they do not affect the containers height unless you use the clear fix trick..
Try adding overflow:hidden on the container
.mainPageContent {
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc;
overflow:hidden;
}
Did you try pull mainPageContent to the top of the stack using position relative + z-index?
Something like:
.mainPageContent {
position: relative;
z-index: 999;
padding: 5px 5px 25px 5px;
-moz-box-shadow: 3px 3px 5px 6px #ccc;
-webkit-box-shadow: 3px 3px 5px 6px #ccc;
box-shadow: 3px 3px 5px 6px #ccc; }
I'm not sure if it will work in this case because you need the shadow to be above it's children, but could be worth a shot.
I am trying to make a custom button with a border radius and box shadow. Here is my html and css
.selectOptionButton{
display: block;
-webkit-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-moz-box-shadow: inset 1px 1px 15px 2px #e7e6e0;
box-shadow: inset 1px 1px 15px 2px #e7e6e0;
-webkit-border-radius: 100px;
-moz-border-radius: 100px;
border-radius: 100px;
height: 50px;
width: 100px;
background-color: #e7e6e0;
}
<div class="selectOptionButton text-center">Test</div>
For some reason when i inspect the element i see this :
.selectOptionButton {
background-color: #E7E6E0;
border-radius: 100px 100px 100px 100px;
display: block;
height: 50px;
width: 100px;
}
it's an inset color that is the same as the background color
check out this Fiddle with
-webkit-box-shadow: inset 0px 0px 15px 2px #333aaa;
-moz-box-shadow: inset 0px 0px 15px 2px #333aaa;
box-shadow: inset 0px 0px 15px 2px #333aaa;
I'm trying to do so using CSS
---------------------
SOME CONTENT HERE
---------------------
so what I basically want is that the border is just at the top and bottom of whatever content there is inside (most preferably a <p></p>)
Here is some code that I was using but it definitely doesn't work the way its meant to be.
padding: 5px 1px;
box-shadow: 0 2px 5px black,
0 -2px 5px #800000,
0 0 5px black,
0 0 5px #800000;
What should I do for that?
Do you want a border or a shadow? You're code is telling me you want a shadow, your question asks a border.
If border:
border-top: 1px solid black;
border-bottom: 1px solid black;
If shadow:
-webkit-box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
box-shadow: 0px 6px 2px -1px #000, 0px -6px 2px -1px #000;
Examples: http://jsfiddle.net/pGGXH/69/
you can use the below code for top and bottom borders
border-top:1px dashed black;
border-bottom:1px dashed black;
For shadow effect go through this link
some modifications to the code of sebass
-webkit-box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
box-shadow: 0px 1px 15px -1px #000, 0 -1px 15px -1px #000;
If you want a border, then you can do it like this.
.div {
border-top: 1px solid black;
border-bottom: 1px solid black;
width: 50px;
height: 50px;
}
Demo - http://jsfiddle.net/9VCZU/
If you look at http://keepskatinbro.com in Chrome, you'll notice that after you hover on titles that there will be artifacts left behind on the sides of the titles after you un-hover.
I got the idea from http://desandro.com (look at the bottom of the page). But Desandro's has no artifacts.
Here's the HTML:
<h1 id="logo">
<a class="" id="home_link" href="http://keepskatinbro.com/" title="Keep Skatin' Bro" rel="home">
<span id="keep">KEEP</span><br>
<span id="skatin">SKATIN'</span><br>
<span id="bro">BRO</span>
</a>
</h1>
Here's the CSS:
#header{
margin-bottom:30px;
background:#FFF;
border-bottom:1px solid rgba(0,0,0,0.15);
}
#header h1 a{
color:#757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818;
/*-moz-text-shadow:2px 2px 2px rgba(0,0,0,1);*/
}
#header h1 a:hover{
color:#fff;
text-shadow: 1px 1px #58e, 2px 2px #58e, 3px 3px #58e, 4px 4px #58e, 5px 5px #58e, 6px 6px #58e, 7px 7px #58e, 8px 8px #58e, 9px 9px #58e, 10px 10px #58e, 11px 11px #58e;
}
Why might I have this problem? I've noticed it before when making other sites only in Chrome it seems... Yet Desandro doesn't have the artifacts on desandro.com.
Sorry cannot comment yet. Can you write your code down?
By the way, just try to change the mouseout with mouseleave event or viceversa.
EDIT
It seems a Chrome bad hover event handling (you can test it by leaving the logo gently).
Force a negative, transparent shadow when the link is not hover:
#header h1 a {
color: #757575;
text-shadow: 1px 1px #181818, 2px 2px #181818, 3px 3px #181818, 4px 4px #181818, 5px 5px #181818, 6px 6px #181818, 7px 7px #181818, 8px 8px #181818, -1px -1px transparent, -2px -2px transparent, -3px -3px transparent;
}