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/
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.
So I have to do tabs and I done them by creating triangles with pseudo-elements that were made with the help of borders and applied a filter: drop-shadow to them to show borders to border. In 100% zoom, everything is fine, but if you zooming out it, the borders with pseudo-elements disappers, and if you zooming in it, they collapse. What can you advise to solve this problem?
.tab {
display: flex;
font-size: 14px;
align-items: center;
position: relative;
margin-left: 40px;
height: 34px;
bottom: -6px;
border-top-left-radius: 5px;
border-top-right-radius: 5px;
background-color: #f0f0f0;
border-top: 1px solid #000;
border-right: 1px solid #000;
border-left: 1px solid #000;
}
.tab:before {
content: '';
left: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
transform: rotateY(180deg);
transform-origin: bottom;
}
.tab:after {
content: '';
right: -14px;
position: absolute;
border: 31px solid transparent;
border-bottom: 0px solid transparent;
border-right: 0px solid transparent;
border-left: 14px solid #f0f0f0;
bottom: 0;
filter: drop-shadow(1px 0px 0px black);
}
<div class="tab"><a>tab1</a></div>
Link to fiddle: https://jsfiddle.net/Lkehqg0j/12
I have this callout cloud, please have a look at the code.
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -20px;
top: 40%;
width: -10px;
margin-right: 10px;
border-right: 5px solid blue;
}
<div class="callout right"> </div>
I want to increase the size of the triangle (the blue one) at the start, I am unable to do that. please have a look and help me here.
You can increase the border width and adjust the location:
.callout.right::before {
left: -25px; /* adjust the location of triangle */
top: 40%;
margin-right: 10px;
border-right: 10px solid blue; /* increase the border width */
}
Here is the code snippet:
div.callout {
background-color: #444;
background-image: -moz-linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
text-shadow: 0 0 1px #000;
width: 700px;
margin-top: -58px;
margin-left: 393px;
border-radius: 15px;
/*box-shadow: 0 1px 0 rgba(255, 255, 255, 0.2) inset;*/
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
left: -25px;
top: 40%;
margin-right: 10px;
border-right: 10px solid blue;
}
<div class="callout right"> </div>
You can adjust the code like this and you can easily change the dimension of the triangle by only changing the width of the border:
div.callout {
background-color: #444;
background-image:linear-gradient(top, #444, #444);
position: relative;
color: #ccc;
padding: 10px;
border-radius: 3px;
box-shadow: 0px 0px 20px #999;
margin: 25px;
min-height: 100px;
border: 1px solid #333;
width: 200px;
border-radius: 15px;
}
.callout::before {
content: "";
width: 0px;
height: 0px;
border: 0.8em solid transparent;
position: absolute;
}
.callout.right::before {
right:100%;
top: 50%;
transform:translateY(-50%);
border-right: 15px solid blue; /*Change only this value to control the size*/
}
<div class="callout right"> </div>
Is it possible to add an even shadow to a div that is not a regular rectangle? Adding box-shadow doesn't work the way it works with a normal div. This is the div I'm talking about:
#talkbubble {
width: 120px;
height: 80px;
background: red;
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
#talkbubble:before {
content:"";
position: absolute;
right: 100%;
top: 26px;
width: 0;
height: 0;
border-top: 13px solid transparent;
border-right: 26px solid red;
border-bottom: 13px solid transparent;
}
yes you can. Here is the example:
.circle {
width:150px;
height:150px;
border: solid 1px #555;
background-color: #eed;
box-shadow: 10px -10px rgba(0,0,0,0.6);
-moz-box-shadow: 10px -10px rgba(0,0,0,0.6);
-webkit-box-shadow: 10px -10px rgba(0,0,0,0.6);
-o-box-shadow: 10px -10px rgba(0,0,0,0.6);
border-radius:100px;
}
<div class="circle">
</div>
I've tried to set a black solid 1px border for triangle: jsFiddle. I write the follwoing markup:
<div>
</div>
and styles
div{
position: absolute;
left:0px;
top:0px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
}
But I don't understand how to set the border for the triangle in this case.
You can try this too , basically i have made a larger triangle black in colour and put it behind the red one
<div id="border">
</div>
<div id="red">
</div>
#red{
position: absolute;
left:4px;
top:9px;
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 10px solid red;
background-color:transparent;
z-index: 99;
}
#border {
position: absolute;
left:0x;
top:0px;
width: 5px;
height: 10px;
border-left: 6px solid transparent;
border-right: 6px solid transparent;
border-bottom: 12px solid black;
z-index: 0;
}
here is your solution its work
`div:before {
border-bottom: 12px solid #000000;
border-left: 6px solid rgba(0, 0, 0, 0);
border-right: 6px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: -1px;
position: absolute;
top: -1px;
width: 0;
}
div:after {
border-bottom: 10px solid #FF0000;
border-left: 5px solid rgba(0, 0, 0, 0);
border-right: 5px solid rgba(0, 0, 0, 0);
content: "";
height: 0;
left: 0;
position: absolute;
top: 0;
width: 0;
z-index: 111111;
}`