I would like a rectangular DIV to have a dropshadow around it on all four sides.
Now I might be able to get something like I want by using a container div and have one drop shadow with positive and one with negative values; I haven't seen what I could push. And because this is being done in boilerplate code, I could have a series of nested DIV's with different border colors, the old pre-CSS way. Some way I might be able to make four dropshadows for four DIV's. See, for instance, "CSS shadows on 3 sides."
However, all the solutions I have seen, or seen evidence of in searching, smell like duct tape. Are drop shadows strongly enough designed for 2 sides that 4 sides cannot be gracefully implemented without duct tape?
I'll use duct tape if I have to, but I'd rather find out if there's a good way to do it before choosing among brands of duct tape.
You're looking to have more of an overhead, hover shadow?
.shadow {
-webkit-box-shadow:0 0 10px rgb(0,0,0);
-moz-box-shadow:0 0 10px rgb(0,0,0);
box-shadow:0 0 10px rgb(0,0,0);
}
You can use it with inset too, makes a really nice 3d look to the edges.
You can just add the optional spread value (the 10px) to your syntax. Like this:
.dropshadow {
-webkit-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
-moz-box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
box-shadow: 0px 0px 5px 10px rgba(0,0,0,.5);
}
Related
I am creating a website, and I want to create this effect of giving an outer glow shadow to the main column in the page ..
This page serves as an example: http://royalwatches.pk/
Note that the main column has a shadow effect on both left and right sides, to make the column appear to be 'in front' of the background.
This picture also show's what I'm talking about:
This is the page where I want to replicate this effect: http://blu-rays.pk/index.php
Can someone guide me on what CSS/HTML changes need to be done ?
Sidenote: Putting this all in jsfiddle seemed impractical, which is why I've mentioned the sites instead ..
You can use box-shadow property.
CSS
img{
box-shadow: 0px 0px 5px gray;
}
JSFiddle
Or in your case:
#wrapper{
box-shadow: 0px 0px 5px gray;
}
Note: remove the background-image from #wrapper.
Remember to add code so that the shadow is visible in more browsers, like so:
#wrapper {
-moz-box-shadow: 0px 0px 5px gray;
-webkit-box-shadow: 0px 0px 5px gray;
box-shadow: 0px 0px 5px gray;
}
More can be read about this at: http://css-tricks.com/snippets/css/css-box-shadow/
I needed to show color around the text in my HTML page, I tried border property but it is giving square box around the Text.
How to achieve below requirement
Thanks.
I would write the code here... But this link http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects explains it so well.
Example Demo : http://codepen.io/anon/pen/CDsFb
This is actually much better ...
text-shadow: 3px 3px 0 #000,
/* Simulated effect for Firefox and Opera and nice enhancement for WebKit */
-3px -3px 0 #000,
3px -3px 0 #000,
-3px 3px 0 #000,
3px 3px 0 #000;
This will ensure it looks like a proper border you want and not a simple glow around your text.
You are looking for text-shadow CSS property
text-shadow: 0px 0px 3px orange;
http://jsfiddle.net/NGPhL/
http://www.quirksmode.org/css/textshadow.html
You may use
text-shadow: 0px 0px 4px #1d1dab;
filter: dropshadow(color=#1d1dab, offx=0, offy=0);
http://css3generator.com/
If browser don't support CSS3:
Use can use two text nodes with 17px and 18px font-size (for example) and positioning by CSS first under second (position:absolute, z-index:100, left, top, etc) with different colors.
Thanks For your suggestions, I found an example to get this requirement here
http://gazpo.com/2011/02/text-shadow/
7. Border Around the text
text-shadow: 0 -4px #00468C,4px 0 #00468C,0 4px #00468C,-4px 0 #00468C,4px -4px #00468C,-4px 4px #00468C,4px 4px #00468C,-4px -4px #00468C;
You can use the CSS3 text-shadow property. As long the browser supports webkit, this should surfice.
main-heading h2{
-webkit-text-stroke: 2px #42a6e1;
}
The text-shadow not working fine. So use text stroke instead of text-shadow. Text shadow also makes difficulties at different devices.
You can see in the screenshot given below
I'm trying to get an effect like an inset drop shadow effect in CSS that looks like the following image:
(source: gyazo.com)
Does any body know how I can get that effect with CSS?
The key here is multiple box shadows, a larger darker one inset from the top left and a very subtle shadow below thats slightly brighter than the background.
Notice the form of box-shadow is "x-offset, y-offset, blur, color"
Learn to use the blur amounts and multiple shadows and you can make some really nice effects.
Example style (for display on a background of #222):
.button {
display:inline-block;
padding: 10px 15px;
color: white;
border-radius: 20px;
box-shadow: inset 2px 3px 5px #000000, 0px 1px 1px #333;
}
The answer has already been given to you (box-shadow: inset ..), so here's a quick demonstration of how it could work:
http://jsfiddle.net/L6nJj/
The important part is box-shadow: inset 2px 2px 3px 0 red.
For an explanation of the available options: https://developer.mozilla.org/en/css/box-shadow#Values
Be sure to take into account the browser support for box-shadow, which is that it doesn't work in older versions of IE, but works "everywhere" else: http://caniuse.com/css-boxshadow
Have a look at the CSS3 box-shadow property, in particular, inset box shadows. Example L in this article should provide the effect you're looking for.
Here's what I mean:
http://www.lesliesommer.com/wdw07/html/images/glow.png
I need it to work with most browsers.
Could you point me to a tutorial or something?
Thanks for the answers. Can I do it without CSS3 ?
css3 box shadows I'd think. These aren't implemented in IE8
-webkit-box-shadow: 0px 0px 15px #dddddd;
-moz-box-shadow: 0px 0px 15px #dddddd;
box-shadow: 0px 0px 15px #dddddd;
To add on to Groovetrain's answer, if you use rgba instead of a hex value you can have the colors be rendered with transparency letting whatever is below be seen through (which may or may not be valuable depending on the application).
-webkit-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
-moz-box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
box-shadow: 0px 0px 15px rgba(0,0,0,0.35);
There are a few techniques for this (outside of CSS3).
If the width is fixed, one way is to use two DIVS. One has the top and the sides. You need to make and image that is very tall, with the sides repeating and the bottom cut off and use it as a background on the outer DIV. Then make an image that contains the bottom, and nest it inside, and absolutely-position it to the bottom.
<div class="wrapper">
... content ...
<div class="bottom"></div>
</div>
.wrapper {
width:500px;
background-image:url(....);
position:relative;
}
.bottom {
position:absolute;
bottom:0px;
height:20px;
width:500px;
background-image:url(....);
}
If it is x/y scaleable you can use the 9-slice method:
_|_|_
_|_|_
| |
You slice your background into 9 pieces, where the middle piece is blank and contains your content. You make four corners and use repeat-x / repeat-y for the background of the sides.
http://www.css3.info/preview/box-shadow/
However, needs a CSS3 enabled browser.
Alternatively set a background image to get cross browser support: http://dimox.net/cross-browser-css3-box-shadow/
I noticed some browsers make some fields glow when you select a form, Chrome makes them have a yellow glow for example. How do you make a field glow? I believe it's something you specify loosely on the code since different browsers do different colors. How does that work? Is there a simple way I could do it?
Check out the demo
CSS Used:
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;
}
You can also check out this page i had created similar effect
Note:
The box-shadow is CSS3 property meaning it won't work in IE<8, however you can use something like CSS3PIE to get the support even in IE :)