Because of retina displays have such a high pixel density, 1 pixel borders can look pretty big on these displays. As suggested by Brad Birdsall, the CSS box-shadow property can be used to create "0,5 px" borders that look much more elegant on retina display (see http://bradbirdsall.com/mobile-web-in-high-resolution).
In one of his examples, he does this:
box-shadow: inset 0 0 1px #000,
inset 0 1px 0 #75c2f8,
0 1px 1px -1px rgba(0, 0, 0, .5);
where inset 0 0 1px #000 basically equals that "0,5px" border - it looks great on my iPhone. But when zooming in, you can clearly see that the line is not sharp - it has some kind of blur on one side which is caused because it's a box shadow and no border I believe. Is there anything I can do about it?
Also, on my non-retina Laptop display, nothing shows up. Is that normal because the line is just to thin or am I doing something wrong? I am just using his example syntax like this:
box-shadow: inset 0 0 1px #000;
I found that setting the box-shadow spread to a value equal to 1 / window.devicePixelRatio fixed the issue. It looks good on regular screens (dpr = 1), and retina / high res displays which have a range of values for dpr, on my screen specifically it's 1.25 (so the spread is 0.8).
Related
Is it possible to apply two text-shadow values on one p element with CSS3?
I want to create a very light black background with a 1 pixel border.
Something like this:
text-shadow: 0 0 55px black; (very light black background to increase white text readabilitiy)
&
text-shadow: 0 1px 0 rgba(0,0,0, .25); (one pixel black drop shadow)
You can simply seperate the shadows with a comma:
text-shadow: 0 0 55px black, 0 1px 0 rgba(0,0,0, .25);
Demo fiddle
You may want to have a look at this article on MDN for further information.
The text-shadow CSS property adds shadows to text. It accepts a
comma-separated list of shadows to be applied to the text and
text-decorations of the element.
Each shadow is specified as an offset from the text, along with
optional color and blur radius values.
Multiple shadows are applied front-to-back, with the first-specified shadow on top.
You can try using this code :
p { text-shadow: 1px 1px 1px #000, 3px 3px 5px blue; }
REF : CSS SHADOW TRICKS
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);
}
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);
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.