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.
Related
I'm having a bit of difficulty with CSS at the moment. I'm trying to apply both text stroke and a shadow, however I'd like to be able to change the opacity of both the stroke and shadow. I've tried however either the text shadow applies and the stroke doesn't or the stroke applies and the shadow doesn't. Any pointers? I can provide the code I was trying to use if need be.
Thanks a lot.
You can use pseudo :after to create strike through effect and play with its opacity to achive what you want.
Check this JS Fiddle I have created. You can change the values in the CSS part to achive what you want: http://jsfiddle.net/_vijaydev/xvse9p1o/
There is other way to make your text strike using text-decoration:line-through and apply that at your css.
DEMO
I found that this works for IE:
text-shadow:
2px 2px 10px color,
0px 2px 10px color,
2px 0px 10px color,
2px -2px 10px color,
0px -2px 10px color,
-2px 0px 10px color,
-2px 2px 10px color,
-2px -2px 10px color;
and '-webkit-text-stroke:2px color;' & a 'text-shadow:' rule for FF/Chrome.
Obviously you can change the px to what you want.
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'd like to develop a generalizable solution for creating etched lines. The goal is to be able to not have to manually pick closely related colors for every color scheme where I want etching. The issue seems that the color of the indented part in relation to the color of the background is somewhat critical for creating the 3 dimensional effect.
Below is an example in blue (the lines above the comment bubble/underneath the number "11"). I think I need to use box-shadow but not sure if this is the best way.
If box-shadow is what I should use, does anyone know how to set its CSS values such that would would work for say a gray line would also work for say a blue line?
You could use borders with semi-transparent black/white colors (using rgba) that will darken/lighten the underlying color.
Example at http://dabblet.com/gist/4182495
Adding pseudo elements with :after/:before gives you extra power in adding second level borders etc..
Here's the slightly simplified CSS for that comment indicator, which I found using the Chrome Web Developer tools:
.media-bar .count-badge {
padding: 0 7px;
background: #1C5380;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(0, 0, 0, 0.2);
border-radius: 12px;
}
If you visit the page and inspect the count-badge element, you'll be able to turn the box-shadow styles on and off, which will show how they create the inset effect.
I guess there are two borders together:
border-bottom: 1px solid #1C5380;
border-top: 1px solid rgba(255, 255, 255, 0.12);
Is there a way to add a text-shadow in CSS that is similar to the text-shadow created in Photoshop? I have tried, but the resulting shadow is still different than in Photoshop.
Hey no you can do this
.div{
box-shadow:0 0 0 0 rgba(0,0,0,1); // outer shadow of box
box-shadow:0 0 0 0 rgba(0,0,0,1) inset; // inner shadow of box
text-shadow:0 0 0 rgba(0,0,0,1); // for text shadow
}
more info click here http://css-tricks.com/snippets/css/css-text-shadow/
The short answer is no.
Adobe Photoshop and all the different browsers interpret shadows differently from one another. You'll have to judge with your eyes.
try like this
yourDiv
{
box-shadow: 8px 8px 5px #000000;
}
try different pixels according to the design, and as well as color, use color picker to check exact color code.
As mentioned above its not at all possible. As browser renders the shadow differently than photoshop.