I would like to use the same CSS for two boxes and keep'em in the same line with a little space between . I am not very familiar with css.
This is my code :
div.box {
width: 50%;
display: inline-block;
background-color: #eeeeee;
padding: 10px 0px 10px 0œpx;
margin :20px 0px 20px 0px;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
-moz-box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
}
Changing width to 48 or 47% can be a solution, but I don't think it's the good way .
use this:
div.box {
width: 49%;
display: block;
float:left;
min-height:100px;
background-color: #eeeeee;
padding: 10px 0px 10px 0œpx;
margin :20px 0px 20px 0px;
margin-left:2%;
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
-webkit-box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
-moz-box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
box-shadow: 0px 19px 10px 0px rgba(0,0,0,0.82);
}
div.box:first-child{
margin-left:0;
}
DEMO
Related
I have this code
-webkit-text-stroke: 30px #67676726;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
this is like a glass effect at the back of text. what I need is I want to remove the sharp edges
it's when I increase the width of text-stroke
It is much appreciated for those who can help me.
PURE CSS only
You could try to wrap your text inside a div tag, add width and height and set the overflow to hidden so your edges get cut off.
Here an example:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.text {
margin: 40px;
width: 160px;
height: 39px;
position: relative;
overflow: hidden;
}
h1 {
z-index: 999;
width: 100%;
height: 100%;
text-align: center;
position: absolute;
-webkit-text-stroke: 20px #0e000026;
text-shadow: 0px 4px 20px #d5d5d5,
0px 3px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777,
0px 0px 15px #777777,
0px 0px 15px #777777,
0px 6px 0px #777777,
0px 7px 0px #777777,
0px 8px 0px #777777,
0px 5px 0px #777777,
0px 5px 0px #777777;
}
<div class="text">
<h1>LetterNVZ</h1>
</div>
I have an element on which i add two box-shadows and I want the corners of the element AND the box shadows to have the same border-radius. Somehow it's not happening.
The element appears with a different border-radius than the first box-shadow, and the first box-shadow appears with a different border radius than the second box-shadow.
Here's the code:
.stack_item{
overflow: hidden;
border-radius: 10px 10px 10px 10px;
-moz-border-radius: 10px 10px 10px 10px;
-webkit-border-radius: 10px 10px 10px 10px;
transform: translate(-50%, 9%);
-webkit-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
-moz-box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
box-shadow: 0px -15px 0px -7px rgb(206, 204, 204), 0px -29px 0px -13px rgb(168, 168, 168);
}
Since you are making your shadow shrink, the border-radius is also shrinking.
Set it on a larger pseudo-element and it will be ok
.stack_item{
width: 200px;
height: 100px;
position: relative;
border: solid 1px black;
border-radius: 10px 10px 10px 10px;
margin-top: 50px;
background-color: white;
}
.stack_item:before,
.stack_item:after {
content: "";
position: absolute;
top: 0px;
bottom: 50px;
border-radius: inherit;
}
.stack_item:before {
left: 7px;
right: 7px;
box-shadow: 0px -8px 0px 0px rgb(206, 204, 204);
z-index: -1;
}
.stack_item:after {
left: 13px;
right: 13px;
box-shadow: 0px -16px 0px 0px rgb(168, 168, 168);
z-index: -2;
}
<div class="stack_item"></div>
div{
height:100px;
width:100px;
background:pink;
box-shadow: 0px 0px 0px 3px #000;
}
Above css worked but when I do box-shadow: inset 0px 0px 0px 3px #000; is wasn't work, I also tried box-shadow: 0px 0px 0px 3px #000 inset. Any idea?
try it with smaller number of parameters:
box-shadow: inset 0px 0px 3px #000;
or with specified engine:
-moz-box-shadow: inset 0px 0px 10px #000000;
-webkit-box-shadow: inset 0px 0px 10px #000000;
box-shadow: inset 0px 0px 10px #000000;
The syntax of box-shadow property is as follows:
box-shadow: none|h-shadow v-shadow blur spread color |inset|initial|inherit;
You are not setting any value to h-shadow and v-shadow. That is why you are not able to see a shadow.
Try this code
div {
box-shadow: 10px 10px 5px #888888;
height: 100px;
width: 100px;
}
<div>
</div>
I have two overlapping divs that have css3 box shadows. The trouble is that even when I set the z-index I will still need to eliminate one of the div's box-shadow. I have seen cases where negative spreads and zero values are used but I don't think that would work here.
The code I have now is:
#bulb-top {
position: relative;
width: 280px;
height: 280px;
background-color: #E5F7A3;
-webkit-border-radius: 280px;
-moz-border-radius: 280px;
border-radius: 280px;
border: 8px solid #FFF40C;
top: -430px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 4;
}
#bulb-bottom {
position: relative;
width: 140px;
height: 120px;
background-color: #E5F7A3;
-moz-border-radius-topleft: 0px;
-moz-border-radius-topright: 0px;
-moz-border-radius-bottomright: 30px;
-moz-border-radius-bottomleft: 30px;
-webkit-border-radius: 0px 0px 30px 30px;
border-radius: 0px 0px 30px 30px;
border-left: 8px solid #FFF40C;
border-right: 8px solid #FFF40C;
border-bottom: 8px solid #FFF40C;
top: -455px;
margin-left: auto;
margin-right: auto;
-webkit-box-shadow: 0px 0px 15px 1px #FFF40C;
-moz-box-shadow: 0px 0px 15px 1px #FFF40C;
box-shadow: 0px 0px 15px 1px #FFF40C;
z-index: 5;
}
http://jsfiddle.net/minitech/g42vq/3/
You can use the ::before pseudo-element to block out one side of the box shadow. It's not perfect, but it might be enough for your situation. Here's the updated jsFiddle.
#bulb-bottom:before {
background-color: #E5F7A3;
content: '';
display: block;
height: 30px;
margin: 0 auto;
position: relative;
top: -10px;
width: 140px;
}
I am having problems centering 3 divs that are within a "container" so to say.
It should basically look something like this (forgive my crude example):
______________________
| ___ ___ ___ |
| |___| |___| |___| |
|______________________|
The problem that i am having though, is that i cant seem to figure out the css to get these 3 divs to be laid out as in my crude example.
Because the design is supposed to be elastic and expand or contract over different resolutions, thus presenting roughly the same appearance over varying resolutions.
At the moment the div's are floated left and there is a larger gap between the last div and the container, compared to the first div. I am trying to get them all to fit snugly in the middle...
Here is the code relating to this:
.searchResult {
padding: 1% 2% 1% 2%;
margin: 2% 2.5%;
width: auto;
height: 200px;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizDesc {
margin-right: 2%;
text-align: left;
float: left;
width: 35.5%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizAddr {
margin-right: 2%;
text-align: left;
float: left;
width: 28%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
.bizCont {
text-align: left;
float: left;
width: 28%;
height: 140px;
padding: 5px 0 0 0;
-webkit-border-radius: 10px 10px;
-moz-border-radius: 10px / 10px;
-o-border-radius: 10px / 10px;
-ms-border-radius: 10px / 10px;
-khtml-border-radius: 10px / 10px;
border-radius: 10px 10px 10px 10px;
border: 2px outset #003399;
-moz-box-shadow: 5px 5px 5px #666666;
-webkit-box-shadow: 5px 5px 5px #666666;
-o-box-shadow: 5px 5px 5px #666666;
-ms-box-shadow: 5px 5px 5px #666666;
-khtml-box-shadow: 5px 5px 5px #666666;
box-shadow: 5px 5px 5px #666666;
}
The first bit of css relates to the container, the next 3, relate to the 3 divs in order from left to right. So that my example comes out something like this:
______________________
| ___ ___ ___ |
||___| |___| |___| |
|______________________|
If anyone would spare some wisdom and provide me with some input into this, as i am sure that the answer is quite simple, it would be greatly appreciated, thank you!!
I think it'd be easiest to add one more div in there... That way, the outer div in your diagram would control how the div acts in the container/tag that contains it. The div you would add would surround the 3 boxes and would then have flexibility to the margins/float/etc to the outer div.
Assuming that "searchResult" is the outer div, a structure like so:
<div class="searchResult">
<div class="divClassToAdd">
<div class="bizDesc">...</div>
<div class="bizAddr">...</div>
<div class="bizCont">...</div>
</div>
</div>
This should do it:
HTML
<div id="dialogbox">
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</div>
CSS
#container{
margin: 0 auto;
}
.box{
width: 200px; height: 200px;
}
Whatever you do with the inner boxes is irrelevant, as long as the container has margin auto