How can I add a box-shadow in the bottom of my border, in the bottom of my H2??
HTML:
<h2> Hi </h2>
CSS:
h2 {
border-bottom: 1px solid grey;
}
JSFiddle
key is playing with the negative value on the spread value, so something like:
h2 {
border-bottom: 1px solid grey;
box-shadow: 0 3px 8px -5px rgba(0,0,0,.5);
}
Should be able to use:
div h2 {
box-shadow: 10px 10px grey;
}
http://www.w3schools.com/css/css3_shadows.asp
Try this
h2 {
border-bottom: 1px solid grey;
position: relative;
}
h2:after{
content: '';
position: absolute;
height: 1px;
bottom: -1px;
left: 0;
right: 0;
box-shadow: 0 2px 2px red;
}
<h2> Hi </h2>
I think you need box-shadow :)
Related
Could someone help me make an effect like the one in the example below?
I'm trying to put unsuccessful in the responsiveness part ...
The closest I can get was as follows the code below and the image:
.content .card-l {
margin-top: 1vh;
position: relative;
border-top: 2px solid #00ffde;
border-bottom: 2px solid #c9ff04;
border-left: 2px solid #5bff69;
border-right: 2px solid #2a43c1;
}
.content .card-l::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #ba6c0e;
border-bottom: 3px solid #d3cc0b;
border-left: 3px solid #990be6;
border-right: 3px solid #9a1b3b;
}
.content .card-l::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #070400;
border-bottom: 3px solid #ff8f3a;
border-left: 3px solid #1b9fbd;
border-right: 3px solid #d87777;
}
.content .card-l .card-content {
position: relative;
background: #e0bf95;
padding: 30px;
border-top: 2px solid #82f577;
border-bottom: 2px solid #1c1f31;
border-left: 2px solid #d6d254;
border-right: 2px solid #f380de;
}
.content .card-l .card-content::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border-top: 3px solid #18fd03;
border-bottom: 3px solid #34eca3;
border-left: 3px solid #5528e9;
border-right: 3px solid #df2cec;
}
.content .card-l .card-content::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
border: 3px solid #806c53;
}
You can consider multiple background and clip-path like below:
.box {
--c1:#806c53; /* first color */
--c2:#5d4e39; /* second color */
--b:20px; /* border width */
margin:10px;
width:200px;
height:100px;
font-size:25px;
outline:3px solid #321f1a; /* outer border */
border:var(--b) solid transparent;
padding:3px; /* control the inner border */
background:
linear-gradient(#e0bf94 0 0) content-box, /* main background */
linear-gradient(#321f19 0 0) padding-box; /* inner border */
position:relative;
}
/* main border */
.box:before,
.box:after {
content:"";
position:absolute;
z-index:-1;
top:calc(-1*var(--b));
right:calc(-1*var(--b));
bottom:calc(-1*var(--b));
left:calc(-1*var(--b));
background:
linear-gradient(var(--s1,var(--c1)) 0 0) center/calc(100% - var(--b)) calc(100% - var(--b)) no-repeat,
linear-gradient(var(--s2,var(--c2)) 0 0);
}
.box:after {
--s1:var(--c2);
--s2:var(--c1);
clip-path:
polygon(0 0,0 100%,var(--b) calc(100% - var(--b)),
var(--b) var(--b),calc(100% - var(--b)) var(--b),100% 0);
}
<div class="box"> some text here </div>
<div class="box" style="--b:30px;--c1:red;--c2:darkred;width:300px;"> some text here </div>
<div class="box" style="--b:10px;--c1:blue;--c2:darkblue;width:300px;"> some text here </div>
Here is an example using only one div, with no additional containers or spans, taking advantage of box shadow and the :after pseudo element.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
box-shadow: 0 0 0 2px #321f19; /* outer border */
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53; /* second border */
z-index: 1;
}
.card-1:after {
content: '';
position: absolute;
left: 0;
right:0;
top: 0;
bottom: 0;
border: 4px solid;
border-color: #806c53 #806c53 #5d4e39 #5d4e39; /* third border */
box-shadow: inset 0 0 0 2px #321f19; /* inner and last border */
z-index: -1;
}
<div class="card-1">Lorem ipsum</div>
And you can also achieve something pretty similar with nothing but box-shadow.
.card-1 {
position: relative;
padding: 4rem;
background: #e0bf94;
border: 4px solid;
border-color: #5d4e39 #5d4e39 #806c53 #806c53;
box-shadow: 0 0 0 2px #321f19,
inset -4px 4px 0 0 #806c53,
inset 4px -4px 0 0 #5d4e39,
inset 0 0 0 6px #321f19;
}
<div class="card-1">Lorem ipsum</div>
here you can find an example
.content {
border: 2px solid #321f19;
}
.card-l {
border-top: 4px solid #5d4e39;
border-right: 4px solid #806c53;
border-bottom: 4px solid #806c53;
border-left: 4px solid #5d4e39;
}
.card-content {
border-top: 4px solid #806c53;
border-right: 4px solid #5d4e39;
border-bottom: 4px solid #5d4e39;
border-left: 4px solid #806c53;
position: relative;
background-color: #e0bf94;
}
.card-content::before {
content: "";
width: calc(100% - 4px); /*remove one border size from the 100%*/
height: calc(100% - 4px); /*remove one border size from the 100%*/
position: absolute;
border: 2px solid #321f19;
}
span {
display: block;
padding: 30px;
text-align: center;
z-index: 1;
}
.btn {
margin: 10px auto;
display: block;
position: relative;
padding: 10px;
}
<div class="content">
<div class="card-l">
<div class="card-content">
<button id="button" class="btn">hello!!!</button>
</div>
</div>
</div>
You can always put multiple divs to contain different borders.
OR
Use border image in css. It'll be an easier approach if you can find the image. More reference here.
i want to give box shadow on the hexagon
here is my jsfiddle
jsfiddle
and this is my hexagon css property
.hex1 {
background-color: rgba(52,152,219,.5);
text-align: center;
line-height: 70px;
height: 80px;
width: 140px;
margin: 60px 10px;
position: relative;
z-index: 1;
box-shadow:2px 2px 2px 2px grey;
}
.hex1:before {
border-top: 40px solid transparent;
border-bottom: 40px solid rgba(52,152,219,.5);
top: -80px;
}
.hex1:after, .hex1:before {
border-left: 70px solid transparent;
border-right: 70px solid transparent;
content: "";
position: absolute;
left: 0;
z-index: -1;
}
.hex1:after {
bottom: -80px;
border-top: 40px solid rgba(52,152,219,.5);
border-bottom: 40px solid transparent;
}
this is not affecting on my hexagon .. is there any way to five border and box shadow to hexagon.
please help
You Can Use these code....
#hexagon{
background: red;
width: 100px; height: 60px;
position: relative;
-moz-box-shadow: 0 0 10px rgba(0,0,0,0.7);
-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.7);
box-shadow: 0 0 10px rgba(0,0,0,0.7);
}
http://jsfiddle.net/jelmerdemaat/5UMxW/3/
I'm applying a box-shadow to an element with left and right borders.
I want the box shadow to stop so it doesn't appear underneath those borders.
Is there any way to achieve this without too many crazy wrappers?
<div id="button">Box-shadow, stop before the red borders!</div>
Here's a JSFiddle: http://jsfiddle.net/AHUEY/
You could do this with a pseudo element absolutely positioned relative to your target, instead of a box shadow:
#button {
position: relative;
background: #ccc;
text-align: center;
width: 400px;
border-left: 10px solid red;
border-right: 10px solid red;
}
#button::before {
content: '';
position: absolute;
bottom: -5px;
left: 0;
right: 0;
height: 5px;
background: black;
}
demo
This is possible using the spread parameter of the box shadow.
Please see the working fiddle
http://jsfiddle.net/prashant_11235/dkR4H/
#button {
background: #ccc;
text-align: center;
width: 400px;
height: 25px;
border-left: 10px solid red;
border-right: 10px solid red;
box-shadow: 0px 15px 0px -10px black;
}
Replace border-right and border-left with box-shadow:
#button {
background: #ccc;
text-align: center;
width: 400px;
box-shadow: 10px 0 0 0 red, -10px 0 0 0 red, 0 5px 0 0 black;
}
http://jsfiddle.net/eEnpp/
I'm trying to make this tooltip arrow point to the right towards the link.
CSS
.tooltipside
{
position: relative;
cursor: help;
display: inline-block;
outline: none;
}
.tooltipside span
{
visibility: hidden;
position: absolute;
bottom: -22px;
z-index: 999;
width: 52px;
margin-left: -63px;
padding: 2px;
border: 1px solid #80a7ba;
background-color: white;
-moz-border-radius: 4px;
border-radius: 4px;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
box-shadow: 0 1px 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.5) inset;
text-shadow: 0 1px 0 rgba(255,255,255,.4);
}
.tooltipside:hover
{
border: 0; /* IE6 fix */
}
.tooltipside:hover span
{
visibility: visible;
}
.tooltipside span:before,
.tooltipside span:after
{
content: "";
position: absolute;
z-index: 1000;
bottom: -7px;
left: 50%;
margin-left: -8px;
border-top: 8px solid #80a7ba;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-bottom: 0;
}
.tooltipside span:before
{
border-top-color: #ccc;
bottom: -8px;
}
The html is
<a href='#' class='tooltipside'><span>
<img src='http://cdn2.iconfinder.com/data/icons/32pxmania/misc_57.png'
border='0' width='52' height='52'></span>LINK</a> TEST TEST TEST</b>
It currently points down in the center of the tooltip I need it to point right towards the link. How would I do this?
Thanks
Is this what you are after? http://jsfiddle.net/kX5kH/
I used the positioning to move the arrow, then swapped around the transparent broders to make the arrow point the right way.
NOTE: I added a parent <div> and positioned it absolutely, because it was otherwise hugging the edge and you couldn't see the tool tip.
Also there's no starting <b> tag.
One last note, I noticed you had a IE6 fix, which is intriguing because none of this will work in IE6. Box shadows, before/after selectors, and transparent borders will not appear correctly. But honestly I wouldn't be concerned about IE6 =P
Hope this helps.
Basically, I need to make a header, styled like this:
Is there a full css way, or do I need to use background-images?
Yes, you can do it using only CSS, but it's not easy and the result is... well, ugly.
You might want to check this as well: CSS for inverted curved tabs
EDIT: I got a better idea today, check this http://dabblet.com/gist/2762234
The CSS is as follows:
h1 {
min-width: 150px;
height: 30px;
margin: 0;
/**border: solid 2px #979797;/**/
border-bottom: none;
border-radius: 8px 0 0 0;
box-shadow: -2px -2px 2px #a5a5b1;
display: inline-block;
position: relative;
background: linear-gradient(#e8e8ea, #f8f8fa);
}
h1:before {
/**top: -2px;/**/
/**/top: 0;/**/
right: -23px;
width: 30px;
height: 30px;
border-radius: 0 8px 0 0;
/**border: solid 2px #979797;/**/
border-left: none;
border-bottom: none;
box-shadow: 2px -2px 2px #a5a5b1;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
background: linear-gradient(#e8e8ea, #f8f8fa);
content: '';
}
h1:after {
right: -44px;
/**bottom: 0;/**/
/**/bottom: 2px;/**/
width: 16px;
height: 8px;
/**border: solid 2px #979797;/**/
border-top: none;
border-right: none;
border-radius: 0 0 0 8px;
box-shadow: inset 2px -2px 2px #a5a5b1, -4px 4px 2px #f8f8fa;
/** outline: solid 1px red; /* uncomment this to check position */
transform: skewX(30deg);
position: absolute;
content: '';
}
div {
min-height: 130px;
margin-top: -7px;
/**border: solid 2px #979797;/**/
border-radius: 0 8px 0 0;
box-shadow: -2px -2px 2px #a5a5b1, 2px -2px 2px #a5a5b1;
background: linear-gradient(#f8f8fa, #f6f6f8);
}
It can be made to look prettier, but that would require a fixed width for the heading and a pseudo-element on the div.
You can probably achieve this by using a couple of elements stacked over eachother.
I don't think that is something you would want for production, so my advice would be to go for the background image.