What's the easiest way to create drop shadows around div boxes? A print media designer sent me this example design:
http://glacialsummit.com/shadow.jpg
As you can see, the drop shadow seems to "glow" around the div box. Is this easy to re-create with CSS? Or should I tell the designer it's impractical to create this?
Yes, it is possible, even in IE6.
It is possible with CSS3. But the browsers still use their own CSS property names.
Yes, it is possible with CSS3. Here is the sample:
selector {
-moz-box-shadow: 5px 5px 10px #666;
-webkit-box-shadow: 5px 5px 10px #666;
box-shadow: 5px 5px 10px #666;
}
Would work in most of major browsers except IE.
Here is the explain:
selector {
box-shadow: x-coordinate y-coordinate blur-radius color;
}
Cheers.
Related
This seems to have the solution I need...
Border radius on Focus input field
Where I want the focus border to match the border radius used for the box itself. As it is right now, the box has curved corners but the focus does not so it looks odd.
I tried...
*:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
and...
.field-box:focus {
outline: none;
box-shadow: 0px 0px 2px blue;
}
but neither work so I'm thinking something at a parent level is overriding it. When I check for the css in inspect, I don't see it show up so I can't confirm that is the case. I just know that I can make other changes to the form box but not the focus border itself. Anyone know how to address or if there is a way to identify what might be overriding it?
Codepen page
Webpage hosted with Google Drive if you want to see it with pictures (front.html)
relevant code:
.row1 img{
/*box-shadow: inset 5px 5px 7px rgb(0,256,0);/*the line that breaks .border-blue and .border-orange shadows*/
}
.blue-border{
border: 4px solid rgb(0,102,179);
}
.orange-border{
border: 4px solid rgb(208,78,29);
}
.title-blue,.blue-border,.title-orange,.orange-border{
box-shadow: 5px 5px 7px rgb(117,117,117);
}
I'm creating a webpage for my school, and I need to create inset box-shadows on 4 elements: the two images in the 1st row, and the .blue-border and .orange-border divs in the 2nd row. However, there is already a box-shadow property applied to the borders, so applying a new box-shadow property cancels out the original ones. Also, when I apply a box-shadow property to the images in .row1 (ln 25), the box-shadow of the borders breaks. How do I circumvent the fact that CSS can't handle 2 identical properties with different arguments? And why does the box-shadow on the images in .row1 break the box-shadow of the .blue-border and .orange-border classes?
Thank you!
i want to change style of scroll bar ,for this i used below css ,but i want do use it for specific div on page not for whole page.
how can i customize it using div class or id
::-webkit-scrollbar {
width: 12px;
}
::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Yes, we can achieve this using element id,
Try this,
#div1::-webkit-scrollbar {
width: 12px;
}
#div1::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
-webkit-border-radius: 10px;
border-radius: 10px;
}
#div1::-webkit-scrollbar-thumb {
-webkit-border-radius: 10px;
border-radius: 10px;
background: #A8A8A8;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}
#div1::-webkit-scrollbar-thumb:window-inactive {
background: rgba(255,0,0,0.4);
}
Hope it will work...
Live Demo
Note: i think, it's working fine in chrome. but ff & ie it's not working..
If you really want some custom scrollbars then there are some hacks you can use in Javascript and CSS - Nice article on CSS-tricks.
There are plenty of jQuery plugins out there too. One I have used is called Lazybars - really simple to implement.
Hope this helps
CSS customization currently is supported by webkit browsers only (Safari, Google Chrome and Opera now). IE and Firefox do not support CSS styles for scrollbars. To make crossbrowser CSS customizable scrollbar you have to use javascript solution that emulates scroll behavior or replaces native scrollbars with custom elements (native scrollbars are under these custom scrollbar or hidden by wrapper with overflow:hidden).
There are lots of free jQuery plugins. Scrollbar emulators (such as jScrollPane, Malihu Custom Scrollbar, perfect-scrollbar, etc...) provide full control over scrolling content, but have more js (to emulate and handle all events) and scrolling behaior differs from native scrolling behavior. Also, lots of scrollbars on the same page may slow it down.
Scrollbars that uses native scrolling (such as jQuery Scrollbar, Scroller, Baron, etc...) are less in code and guarantee that scrolling will always work (even if plugin does not work because of any bug) + less code (as there is no need to emulate scrolling) + automatically supports all scrolling features like scrolling to focused element, scrolling on text selection, scroll to anchor element, touch scrolling, etc...
You can compare custom scrollbars plugins here
Below code is not working in IE..
input:focus,textarea:focus,select:focus
{
border:1px solid #fafafa;
-webkit-box-shadow:0 0 6px #007eff;
-moz-box-shadow:0 0 5px #007eff;
box-shadow:0 0 5px #007eff;
}
Instead it is not showing textbox border even.
Here is the fiddle link
http://jsfiddle.net/3cKVp/1/
It will not work in IE 7 or earlier, as you can see on this page which shows you a compatibility levels for specific browsers.
:focus pseudoselector and box-shadow CSS property is not supported in IE7. To support focus style changes you will have to bind to focus and blur events in javascript (possibly using jQuery) and add/remove respectively a CSS style that will indicate a "focused" appearance.
I'm interested to find which way of creating box shadows with css is most effective. But that I mean : ease of implementation, flexibility, and cross browser compatibility.
Onion skinning is my personal favorite.
An example can be found in this alistapart article.
This is now very simple to achieve:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33);
First value is the horizontal offset.
Second value is vertical offset.
Third value is spread of blur effect.
Fourth Value is color.
Additionally, you can add another value of inset, which will make the shadow appear on the inside of you block element:
box-shadow: 3px 3px 3px rgba(0,0,0,0.33) inset;
This is now very well supported: https://caniuse.com/#feat=css-boxshadow
The way I find most effective currently is this:
The CSS rules needed :
.shadow{
position:relative;
display:block;
background-color:#bbb;
border:1px solid black;
}
.shadowed_item{
position:relative;
border:1px solid black;
background-color:white;
top:-5px;
left:-5px;
}
HTML code on which the CSS is applied:
<div class='shadow'>
<div class='shadowed_item'>I have a shadow.</div>
</div>
I found it very simple to implement, flexible and it works the same on FF 3, IE 6 & 7.