I have two questions about creating shadows like www.apple.com/ipodshuffle...
On the website, you'll see the main section with a white background - it contains all the information about the iPod Shuffle. The right, left and bottom of this main section have a shadow, but the top does not. How do I code this?
Just above the 2nd image of the iPod Shuffles (where they're all stacked on top of each other, and the text reads "Design. As beautiful as it is wearable.") there is a shadow border that looks like it's popping out of the page, and then fading back into the page. How do I code this?
Here's the code you're searching for :
.box{
padding: 20px;
border-radius: 5px;
-webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
-moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px;
box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px;
}
<div class="box">
Lorem ipsum
</div>
More informations about box-shadow here : http://www.css3.info/preview/box-shadow/
For the central shadow, they just used an image.
.box {
width: 200px;
height: 100px;
margin: auto;
padding: 20px;
border-radius: 5px;
background-color: #e4e4e4;
border: 1px solid #adadad;
-webkit-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
-moz-box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}
<div class="box">
Lorem ipsum
</div>
Related
I'm looking for a way to add a box-shadow to all divs ONLY IF they already have a border.
A lot of div are just used for positioning.
div{
box-shadow: 0 0 1pt 2pt black;
}
is of course too much. I was thinking of this, but i can't find the correct syntax :
div[style*="border-width:1px;"]{
box-shadow: 0 0 1pt 2pt black;
}
The code i'm looking for shoudln't target a specific page or structure. It's a custom userstyle for every pages.
I'm not sure about a pure CSS way of doing this, however I have managed to get a jQuery solution if that's any good to you.
The button is just to demonstrate the before and after. Im assuming in your real project you would want to do this on document ready.
$('#shadowMeUp').click(function(){
$("div")
.filter(function() {
return $(this).css('border-style') == "solid"
})
.addClass("shadow");
});
.box {
height: 100px;
width: 100px;
background-color: steelblue;
margin: 15px;
display: inline-block;
}
.border_box {
border-width: 5px;
border-color: indianred;
border-style: solid;
}
.shadow {
-webkit-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.75);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<button id="shadowMeUp">Add shadows</button>
<br>
<div class="box border_box"></div>
<div class="box"></div>
<div class="box border_box"></div>
<div class="box"></div>
Sorry, no pure CSS solution for this one...
As mentioned, you can use javascript to detect which elements have border, and then apply to them your custom box-shadow, but this would be a pretty bad practice, and can potentially carry a big performance cost on your page.
I wrote a small Angular directive that generates a step input control for numbers. I've used Bootstrap buttons (xs) for the inc/dec controls and somehow managed to simulate a fake focus on the outer container. The problem is centring vertically the spans and the input in a stable layout that keeps together when zoomed.
This is the directive template:
<ng-form name="stepNumberForm" novalidate \>
<div class="step-number"
tabindex="{{$id}}"
ng-class="{\'fake-focus\': fakeFocus}"
ng-keyup="keyControl($event)">
<span
ng-disabled="incDisable"
class="btn-primary"
ng-click="inc()">
<i class="glyphicon glyphicon-plus ">
</i>
</span>
<input type="text"
ng-style="setWidth()"
name="value"
ng-keyup="keyControl($event)"
ng-model="value"
ng-focus="selectAll($event)"
ng-blur="validate()"
class="input-xs">
<span
ng-disabled="decDisable"
class="btn-primary"
ng-click="dec()">
<i class="glyphicon glyphicon-minus">
</i>
</span>
</div>
</ng-form>
The CSS I've used is:
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
.step-number{
border:1px solid;
display:inline-block;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select:none;
user-select:none;
border-radius:4px;
}
.input-xs {
font-size: 1em;
text-align: center;
border:none;
line-height: 1em;
height:1.1em;
vertical-align: middle;
}
.step-number span{
display: inline;
height: 100%;
width: 18px;
margin-bottom: 1px;
margin-top: 1px;
text-align: center;
}
.step-number span:first-child{
margin-left: 1px;
border-top-left-radius: 2px;
border-bottom-left-radius: 2px;
}
.step-number span:last-child{
margin-right: 1px;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
}
.input-xs:focus{
outline:none;
}
.step-number:focus{
outline:none;
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.fake-focus{
border-color: rgba(82, 168, 236, 0.8);
outline: 0;
outline: thin dotted \9;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
-moz-box-shadow: inset 0 1px 1px rgba(0,0,0,0.075),0 0 8px rgba(82,168,236,0.6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075),0 0 8px rgba(82, 168, 236, 0.6);
}
.step-date{
display: inline-block;
}
The whole project is available at github.
There is also a working demo and it's available for install through $ bower install stepper
I would greatly appreciate a helping hand from anybody finding this useful. All contributors are welcome to make this small directive look good. This means: input centred vertically, buttons centred vertically, a 1px border padding inside the element, cross-browser stable and zoom stable.
I've added these CSS rules at the span or the button element that has the + sign:
padding: 1px;
position: relative;
top: -1px;
It seems to be working just fine (I've also tried resizing the viewport - tested with Firefox).
Here is a screenshot of the outcome (remember, only applied to the plus sign)
You could add the above rules to a class .stepper-buttons and add it to the span or the button element (tested with both).
Let me know if this worked for you.
I keep noticing class="well" in a web app using Twitter's Bootstrap, but I can't find any documentation about it, unless I just overlooked it.
Thanks.
"well" is a CSS selector simply create prominent wrapper around element
.well {
min-height: 20px;
padding: 19px;
margin-bottom: 20px;
background-color: #f5f5f5;
border: 1px solid #e3e3e3;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .05);
}
The well is used as a simple effect on an element to give it an inset effect.
<div class="well">...</div>**
I am trying to add a box shadow to my div but i only want the shadow to appear on the left, right and bottom of the div, does anyone know or can show me how i might remove only the top shadow from my div?
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-khtml-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
The basic Box-shadow values are:
box-shadow: [horizontal-offset] [vertical-offset] [blur](optional) [spread](optional) [color]
So for example:
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
would just be a shadow with no offset
box-shadow: 0px 5px 8px rgba(0, 0, 0, 0.3);
would be a shadow with 5px vertical offset, effectively pushing the shadow down, like so:
http://jsfiddle.net/TLQs9/
Rather than add an extra div to your markup, you can use :before to cover up the box-shadow with absolute positioning and negative margin.
div {
position: relative;
background-color: white;
box-shadow: 0 7px 20px 0 rgba(0,0,0,.4);
}
p {
padding: 20px;
}
div:before {
content: "";
height: 7px;
width: 100%;
position: absolute;
top: -7px;
background: inherit;
z-index: 2;
}
<div><p>Some container with shadow</p></div>
As of November 2022 there's a nice, clean way to do this using the CSS clip-path property.
div {
box-shadow: 0 0 10px black;
clip-path: inset(0px -10px -10px -10px);
}
Inset will clip away the element from the top, right, bottom, and left edges. For a this shadow in the example we're clipping anything beyond the top bounds, hiding the shadow on the top, and allowing 10px of space for the shadow on all other sides.
It's the clean, ideal solution to the problem in my opinion. Browser support is good, but if you want support in IE11 still you'll want to explore the polygon option instead of inset.
You can try this:
div {
-moz-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
-khtml-box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
box-shadow:0px 4px 4px 0px rgba(0, 0, 0, 0.3);
}
The first value is horizontal position.
Second value is Vertical position.
Third value applies blur in shadow.
Four value spread.
So try that your vertical an horizontal position match with blur and spread
Try this:
div{
box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-webkit-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
-moz-box-shadow:12px 10px 4px rgba(0, 0, 0, 0.3);
}
When I use this I have a shadow on all sides except the top. You can change the values and it still works. Just don't add a fourth value and you'll be fine.
Try This :
div
{
box-shadow: 0px 9px 29px rgb(102, 102, 102);
-webkit-box-shadow: 0px 9px 29px rgb(102, 102, 102);
-moz-box-shadow:0px 9px 29px rgb(102, 102, 102);
}
See in jsfiddle
See More 1
See More 2
None of the answers above worked for me. So as an alternative solution I used a patch. Inside the element/div with the box shadow.
Place a second div, width 100% and its background the same color as the main div, then position it to cover over the box-shadow, like so.
background-color: your background color?
width:100%;
position:absolute;
height 15px;
left 0;
top -10px;
You may need to tweek the height to patch over the box shadow. But it does work.
plus this trick could be used for any side.
I'm trying to position an element (a button) relative to the element 2 elements before it (a picture). There is a varying amount of text between the picture and the button. Take a look at my site:
http://gorilla-gym.com/product-category/fitness-attachments/
What I'm trying to achieve is having the "Shop Now" buttons align horizontally for each product listing regardless of how much text is underneath the picture.
It seemed to me the most logical way to do this way to position the button relative to the picture, but I can't figure out how to do this. Let me know if you guys have an idea of how to do this, or if there's a better way to achieve what I want to do.
Thanks in advance.
check this one i think you want something like this
http://jsfiddle.net/FWzzR/1/
css
ul.products {
display:table;
width:100%;
table-layout:fixed;
border-collapse:separate;
border-spacing:10px;
}
.products > li {
background-color: #4F81BD;
border:2px solid #385D8A;
position: relative;
width: 22.05%;
display: table-cell;
padding:10px;
padding-bottom:50px;
text-align:center;
vertical-align:top;
}
.products > li >a {
display:block;
}
.products a.button {
position:absolute;
bottom:10px;
left:50%;
margin-left:-40px;
font-size: 100%;
line-height: 1em;
cursor: pointer;
text-decoration: none;
padding: 6px 10px;
font-family: inherit;
font-weight: bold;
color: #FFF;
text-shadow: 0 1px 0 #FF6311;
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.8);
border: 1px solid #973100;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
background: #FD5200;
background: -webkit-gradient(linear, left top, left bottom, from(#FD5200), to(#CA4100));
background: -webkit-linear-gradient(#FD5200, #CA4100);
background: -moz-linear-gradient(center top, #FD5200 0%, #CA4100 100%);
background: -moz-gradient(center top, #FD5200 0%, #CA4100 100%);
-webkit-box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
-moz-box-shadow: inset 0 -1px 0 rgba(0,0,0,0.075), inset 0 1px 0 rgba(255,255,255,0.3), 0 1px 2px rgba(0,0,0,0.1);
box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.075), inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.1);
}
If all you want is to center align the "Shop Now" button at the bottom, then
.shopnow_button{
display: block;
margin: 0 auto; //something was overriding so I had to do !important here
width: 57px; // can be any value < the width of the parent container(Ofcourse !)
}
If there is a varying amount of text underneath the picture, then the elements will all be of varying height and you cannot align the "Shop Now" button horizontally beneath the picture. The only way to accomplish this is by making sure that all the divs are the same height, then you just position the shop now button as follows:
<div class="shop-now-div">
<img src="yourimage.jpg">
Lorem ipsum....
<a class="button" href="#">Shop Now</a>
</div>
.button { position: absolute; bottom: 5px; right: 5px; }
.shop-now-div { position: relative; }
There are two ways to make your div's the same height
1) JavaScript (not recommended, it's a pain)
2) A table (do it in CSS so you aren't messing with semantics)
UNFORTUNATELY, some modern browsers (Firefox, I believe) will not support position: relative on table-cell's (which you will need), so you are stuck with having to use JS to make your div's the same height....
Easiest solution:
Stick your shop now button on top of the image - that way you can easily align them horizontally. :)
This question is better answered here How to set relative position with Grandfather! element? simply setting position: relative on the grandfather element and position: absolute on the subject element.
That solution does rely on there being no positioning set on intermediate elements.