I want to create something like this with CSS only, is it possible?
div {
height: 50px;
width: 200px;
background: #006B96;
box-shadow: 0px 0px 0px 4px #006B96;
border: 4px solid #fff;
margin: 0 auto;
border-top-left-radius: 5px;
border-bottom-right-radius: 5px;
}
<div>
</div>
div{
height:50px;
width:200px;
background:#006B96;
box-shadow:0px 0px 0px 4px #006B96;
border:4px solid #fff;
margin:0 auto;
}
<div>
</div>
span {
display:inline-block;
padding:5px;
box-shadow:
0px 0px 0px 5px #000,
0px 0px 0px 10px #fff,
0px 0px 0px 15px #000;
}
http://jsfiddle.net/gwhq3uk6/
Try to go with Bootstrap and you will no longer have to worry about designing buttons because it is much easier get all kind of buttons and other stuff you need without writing a single line of code.
Related
So I have this 'floating-card' which has a box-shadow around it. On one side I want to put a colored border. But the box-shadow gives an extra white border. I want this removed but I dont know how. I want to keep the box-shadow. I tried several things including the answer of this question.
CSS Box-Shadow adds arbitrary white border to Div
To show specifically what I want removed:
The little small white border on the left of the blue.
Here is a JSFiddle and the code:
https://jsfiddle.net/pg5omtqq/
.floating-card {
background-color: white;
border-left: 5px solid blue;
box-shadow: 0px 0px 10px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
EDIT: To be clear, I want to keep the box-shadow. But have the small white border removed.
This will remove the shadow on the left
-webkit-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
box-shadow: 10px 2px 15px 0px rgba(0,0,0,0.75);
You can adjust this by using this generator box shadow.
source: https://www.cssmatic.com/box-shadow
Add to your CSS
box-shadow: none;
remove left box-shadow by using below css.
.floating-card{
background-color: white;
border-left: 5px solid blue;
-webkit-box-shadow: 0px 0px 10px 0px grey;
-moz-box-shadow: 0px 0px 10px 0px grey;
box-shadow: 0px 0px 10px 0px grey;
margin: 1.0em;
padding-top: 5px;
padding-bottom: 10px;
padding-left: 25px;
padding-right: 25px;
}
<div class="floating-card">
<h3 class="tile_title">Title</h3>
</div>
-webkit-box-shadow: 2px 1px 10px grey;
-moz-box-shadow: 2px 1px 10px grey;
box-shadow: 2px 1px 10px grey;
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
}
<div id="part-two" class="part-two">
</div>
in the above code i have given an outer shadow using box-shadow property,instead of that i want to give the shadow on inside of the container,is it possible to give inner shadow using box-shadow method?if yes,how?
else ,is there any methods exists to giver inner shadow using css?
Yes it is possible to add inner-shadow to an element, you just need to add inset along with your properties in box-shadow.
The presence of the inset keyword changes the shadow to one inside the
frame (as if the content was depressed inside the box). Inset shadows
are drawn inside the border (even transparent ones), above the
background, but below content.
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset 0px 1px 10px 20px orange;
}
<div id="part-two" class="part-two">
</div>
Use this box-shadow: 10px 10px 0px 0px red inset;
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: 10px 10px 0px 0px red inset;
}
<div id="part-two" class="part-two">
</div>
used to this
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
inset as like this
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow:inset 5px 5px 1px red, inset 15px 15px 1px yellow;
}
<div id="part-two" class="part-two">
</div>
you looking for something like this?
.part-two
{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: -10px -10px 1px red;
-moz-box-shadow: inset 0 0 10px red;
-webkit-box-shadow: inset 0 0 10px red;
box-shadow: inset 0 0 10px red;
}
<div id="part-two" class="part-two">
</div>
Try this:
.part-two{
float: left;
height:300px;
width: 200px;
background-color:green;
box-shadow: inset -10px -10px 1px red;
}
I would like to achieve a CSS border similar to the one seen around the Tim Cook image on this page: http://www.macstories.net/news/tim-cook-at-d11/ — however, I would only like the border around images in the body text on my own site, not, for instance, images in the sidebar of my site.
What code would I need to achieve the cool border, and how can I target only images in the body text?
If your "body text" is, say, in a div classed as "main", you can target the images just in that section like so:
.main img {
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 0 5px rgba(0,0,0,0.2);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2);
margin: 30px 0;
padding: 10px;
background: #FFF;
border: 1px solid #CCC;
position: relative;
display: block;
}
img{
-webkit-box-shadow:0 0px 7px rgba(0,0,0,0.3);
box-shadow:0 0 5px rgba(0,0,0,0.2);
padding:10px;
background:#fff;
border:1px solid #ccc;
width:auto;
height:auto;
}
Well i think it would be something like this for just a generic shadow effct.
The HTML:
<div id="example" class="outerglow">Full Shadow</div>
The CSS:
#example {
font-size: 1.4em;
color: #CCCCCC;
line-height: 40px;
text-align: center;
background-color: #333333;
margin: 25px auto;
padding: 5px 10px;
height: 40px;
width: 80%;}
.outerglow {
box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-moz-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);
-webkit-box-shadow: 0px 0px 3px 2px rgba(0,0,0,0.6);}
and here is the jsfiddle to look see..
http://jsfiddle.net/KMtc6/
Forgive me if my code is sloppy or jumbled.
Here is the code for the box I'm applying the shadow on.
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
position:relative;
The 3 boxes of Beautiful Design Valid Code Structure and Seo Integrated all carry this box-shadow property but it doesn't appear at the bottom.
Is there a bounding box around these grouped elements that might have a size restriction applied to it that is somehow cutting off the box-shadow on the bottom of that last element?
Have you tried clearing your float?
Demo: http://jsfiddle.net/uriahjamesgd_73/5fQPV/
<!-- HTML -->
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box clear"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
/* CSS */
.box {
position:relative;
width: 75px;
max-width:90%;
height: 75px;
padding:0 0 20px 0;
float:left;
text-align:center;
margin: 10px 0 0 10px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px #CCC;
-moz-box-shadow: 0px 0px 5px #CCC;
box-shadow: 0px 0px 5px #CCC;
}
.clear {
clear:left;
}
It seems the problem is with your box-shadow property.
Try this:
.box{
width: 295px;
max-width:90%;
height: auto;
padding-bottom:20px;
float:left;
text-align:center;
margin-left:10px;
margin-top:50px;
background-color: white;
-webkit-box-shadow: 0px 0px 5px 2px #ccc;
-moz-box-shadow: 0px 0px 5px 2px #ccc;
box-shadow: 0px 0px 5px 2px #ccc;
position:relative;
}
Check out this link for more experiments.
If it still doesn't work looks like some element might have a size restriction applied that is somehow cutting off the box-shadow on the bottom of that last element.
Hope it helps :)
I'm working on a site called http://ccrccmo.com and I can't get the box-shadow to show up on the content-bg with css.
nav{
background:url(images/nav-bg2.png);
height:74px;
box-shadow: 0px 3px 5px #222;
}
#content-bg{
background:white;
margin-top:0px;
z-index:-1000;
}
you are missing
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
try
#content-bg {
background: white;
margin-top: 0px;
box-shadow: inset 0 3px 10px #000;
box-shadow: initial;
}