I am trying to create the following effect for use as the styling for the tag.
This is an example in Photoshop
Is there a way to do this with CSS or is there another way to do it?
The white part is semi-transparent, as is the text fill.
Thanks,
Ashley
Css text-shadow currently doesn't have an inset option. You can try emulating it with box shadow though. Try this link and hover the text.
You can use: (might need to be adjusted)
-moz-box-shadow:inset 0 0 10px #000000;
-webkit-box-shadow:inset 0 0 10px #000000;
box-shadow:inset 0 0 10px #000000;
And for the white highlights:
text-shadow: 1px 1px white, -1px -1px #444
Again these would need to be adjusted, but should point you in the right direction.
Related
I'm trying to achieve a black, 1 pixel outline around a header written with white fonts, but I've just realised that gmail doesn't support this:
{
color: white;
text-shadow:
-1px -1px 0 #000,
1px -1px 0 #000,
-1px 1px 0 #000,
1px 1px 0 #000;
}
How can I resolve this with something supported?
The closest you can get without text shadow is the poorly supported text-stroke property:
-webkit-text-stroke: 1px black;
http://codepen.io/c0un7z3r0/pen/VKQmaz
I couldnt even get this working in firefox but chrome is fine. I'd consider using a image in this situation. Not ideal but I beleieve email html has more stringent controls (specifically white text being a big no-no).
http://caniuse.com/#feat=text-stroke
SOURCE: https://css-tricks.com/adding-stroke-to-web-text/
I want to achieve this text style like so:
I want to wrap the text with color white like the image above I tried using
text-shadow: 0px 0px 5px #fff;
but it turns out that the shadow will get blurry. Is there any chance that I can do it using css (if so how)? or should I just convert it into image?
You can simulate it, doing like this:
CSS
span{
text-shadow: 2px 2px 0px #fff, -2px -2px 0px #fff, 2px -2px 0px #fff, -2px 2px 0px #fff;
}
DEMO HERE
The effect you seek is called stroke and sadly not possible (yet) with CSS in a cross browser compatible way.
Faking it with shadows will not work for a stroke thicker than 1 or 2 pixels, or require a ton of layered shadows, slowing down rendering. Other faking techniques are possible but not quite fantastic.
For now the best bet remains to use images for the rare occasions where this is useful.
Ran into this today and at least for Webkit browsers, there's a better solution. You can follow this old article using the code
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
and also try using text shadows with it. It worked well for me after some pixel-pushing. I have some bigger letters, so I ended up using a text shadow like this
text-shadow: 4px 4px 0px #010000, 2px 3px 0px #010000, 4px 5px 0px #010000, 4px 6px 0px #010000;
I hope that helps!
I want to know how can I fix the border of this play button. It has 1px of border and 50% border-radius, and it looks ugly. 2px looks ok but I need 1.
Same questions solved here by Guy.
This is common when having a background and a border specified. The only way to fix this would be to have two separate elements, one with the background color and one with the border color with padding equal to the border-width.
See this article for a better explanation.
or try box-shadow: 0 0 1px 0px #yourBlueColor inset, 0 0 1px 0px #yourBlueColor;
this problem is correlated to resolution dpi of your screen device , you can fix this with
border: 2px solid rgba(42, 91, 195, 0.35);
use 2px but use also a rgba transparent effect for reduce the size of border
Not great, but looks quite a lot better by setting besides the border at 1px, an inset box-shadow with 1px blur-radius of the same color:
border: 1px solid #333;
box-shadow: inset 0 0 1px #333;
How can I make both inner shadow (top) and outer shadow on an element in CSS?
The button Facebook uses in their mobile application, has both:
Slight white line at the top of the button,
And a slight white line at the bottom of the button.
With a solid border
You can use css3 box-shadow to get the effect you want. a simple example
box-shadow: 0 0 3px #666;
-moz-box-shadow: 0 0 3px #666;
-webkit-box-shadow: 0 0 3px #666;
furthermore you can specify inset property in order to get inner glow.
box-shadow: inset 0 0 3px #666;
There is a comprehensive reference on this in Mozilla
So I've been using a shadow box inset to make a inner glow kind of making the edges blurry and shadowy like for a edge burn look. I'm trying to use it for the top and bottom only and not for the left/right sides. But it's not working. I'm using it on a overflow: auto <div> so that it can scroll and have a nice effect.
Here's my css:
#content {
font: 14px "Lucida Grande", "Lucida Sans Unicode", sans-serif;
line-height:1.2em;
height: 400px;
width: 500px;
overflow: auto;
float: right;
padding: 0 10px;
-moz-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
-webkit-box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
box-shadow: inset 0 8px 8px -8px #000, inset 0 -8px 8px -8px #000;
}
You have a black shadow on a black background so naturally, you're not going to see anything. Turning off your black background, we can see the shadows just fine...
http://jsfiddle.net/sparky672/p3Mgn/1/show
So you just need to select different shadow colors. Here are your shadows changed to white #fff...
Full Size Demo
http://jsfiddle.net/sparky672/p3Mgn/3/
-moz-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
-webkit-box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
box-shadow: inset 0 8px 8px -8px #fff, inset 0 -8px 8px -8px #fff;
EDIT in response to OP's comments:
The browser is only given two colors to use in order to render a shadow.
1) The background image's color (or just background color in this case)
2) The shadow color
Wherever they're both the same, the shadow will be invisible.
To have a blurry effect using a black background, perhaps try #444 for the shadow... it looks pretty good I think...
http://jsfiddle.net/sparky672/p3Mgn/5/show/
Do you want to have shadow above content to blur top and bottom? If yes then the problem is that you shadow is shown below content. You can make it above it if you set "position: relative; z-index: -1;" to content block, but then you will not be able to click or scroll it.
Easier way to achive this effect is to use :before and :after pseudoclasses and css-gradients.
Example here: http://jsfiddle.net/V96wx/2/
In my example above you will need 2 containers — one for overflow and one for fades (to make it more bulletproof). But theoretically you can do it with only 1 container, I'll write how...
First of all — how :before and :after works. Simplest way to think about them is as about 2 more elements that will be added inside parent container before and after actual content. For example: .about:before will be added inside .about container, but before actual content.
:before and :after have one required property content if you didn't add it, element will not be created. conent may have one of the following values: htmldog.com/reference/cssproperties/content. In my example it was left blank. After element is inserted you can style it as you wish by the same rules you style every other element.
To make fade in my examples I used gradient with trasparency. You can read about gradients here davidwalsh.name/css-gradients. Transparecy is done by using colors in rgba (4th digit is transparency level).
The reason why I used 2 containers in my example is because it is harder to accurately position :before and :after elements above main container without it — if you try to use realtive coordinates for them they will position rightly, but will scroll with content and if you not use position: relative on base container you will need to know this container coordinates to make positioning. It is not a problem if container height is fixed but may be tricky if it is not.
BTW: Theoretically there is an even easier way to do fade — by using css masks with gradients ( webkit.org/blog/181/css-masks ) but right now it's working only in Safari and Chrome.