EDIT: A similar post has already been made: Text Stroke (-webkit-text-stroke) css Problem
I am having a very strange problem with a text on a website I am working on. This was not happening before, and I did not change anything, but one day I loaded the website and noticed the text stroke I applied was going through itself (see image). I am using Tailwind CSS. Here is the code for the element
The letter's a and e are cutting through themselves.
Code for the element:
<h1 className="text-7xl text-white text-stroke-3 text-center mt-5 font-bold">
How are you feeling today?
</h1>
Also this text-stroke is a custom CSS property that I defined as follows:
.text-stroke-3 {
-webkit-text-stroke: 3px black;
}
I tried changing the h1 to a paragraph and changing the font of the text. I also tried using
<b></b>
to encapsulate the text instead of font-bold.
None of these worked.
I guess the problem is caused by the -webkit-text-stroke property, which is not supported by all browsers, and may cause issues with some fonts.
You could instead use a text shadow.
.text-stroke-3 {
text-shadow: -1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black, 1px 1px 0 black;
}
This creates four text shadows around the text, which will give the appearance of a stroke. You can adjust the size of the stroke by changing the values of the text-shadow property.
A similar post has been made already:
Text Stroke (-webkit-text-stroke) css Problem
It seems that the main problem is with webkit text stroke itself being inconsistent. I solved this problem by using a different font.
Related
I need to display data containing Unicode full block characters (\u2588). However, as you can see here, browsers seem to apply font smoothing to the blocks causing gaps to appear between the blocks. ██████████████
How can I render these characters without the gaps?
I tried using CSS 'line-spacing' with a negative value as a hack, but this text is being rendered with a mono-space typeface and it throws off alignment with the rest of the content.
I have the same issue for a long time and still searching for a perfect solution. CSS text-shadow method by Kieran Devlin is good, but only for cases when there is only one-line blocks with same color.
I can suggest this solution via JavaScript (or just CSS) tho this is not 100% perfect. Here we just making sure that user is on Chromium and then squashing blocks together into each other, therefore filling the gaps. After that, we can use transform scale to return initial size and transform translateX to return it to it's initial position.
if (window.chrome) {
art_div.css({
'letter-spacing': '-0.1em',
'line-height': '1.2em',
'transform': 'scale(1.2, 1) translateX(8%)'
});
}
You can see it visualized in my GitHub issue, maybe i will find something better.
You can use font shadow to fill the gap. I know its a hack but unless you plan to overlap the characters by positioning them in a fixed orientation I don't see how this can be achieved across different browsers.
text-shadow: 1px 0px 0px rgba(0,0,0,1);
Example:
body {
text-shadow: 1px 0px 0px rgba(0,0,0,1);
}
██████████████
Another option is to pad the characters within a container and set the background color the same as the font color. Example:
#container {
background: black;
color: black;
width: 159px;
height: 20px;
}
<div id="container">
██████████████
</div>
I really don't know how to name my problem but I have a psd file that looks something like this:
Every item in the image above is a single image like this one:
I don't have a good specification about this, that's all I know about it. So I have been thinking maybe I can use the whole image as sprite background.
Please share your thoughts how to achieve something like this and if you are familiar please edit the question name precisely cause I could not.
Thanks
Here is an great article which accomplishes this using text-shadow: 7 Great CSS based text effects using the text-shadow property
Here is an example how it looks: Hello World example
Code:
h1 {
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000;
color: #9c8468;
opacity: 0.3;
font: 80px 'Museo700';
}
I didn't include the right font, but you get the idea.
This is what you do... I just did this in Photoshop, and the results are pretty good. It can be duplicated in CSS.
<img src="http://i.stack.imgur.com/o1z9H.png" id="front"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="middle"/>
<img src="http://i.stack.imgur.com/o1z9H.png" id="back"/>
Each of those images should be a different color. Front, as it is. Middle, dark gray, and back, white.
Use CSS is place them in the same spot, but offset by a couple of pixels.
#front {
top:5px;
left:5px
}
#middle {
top:3px;
left:5px
}
#bottom {
top:7px;
left:5px
}
CSS now has filters. (not yet fully supported)
view example
view notation
You can use drop-shadow
box-shadow even with transparent .svgs kept the retangular shadow.
works like text-shadow but for vector images (.svg)
side note: Since it's not yet fully supported, use an image editing software.
In CSS, I can set an outline width outline: 1px solid red and I can set its offset (similar to padding) with outline-offset: 5px.
However, this method does not allow for the shorthand method used by padding, like border: 1px 2px 3px 4px and there doesn't seem to be an outline-offset-left: 1px option.
So, is there a way to set different offsets on each side for a CSS outline? Note that I don't want to use padding; it would offset the outlines how I'd like, but it would also add extra padding to elements where I don't want to, which is the whole reason I am using outline in the first place.
According to MDN's docs on Outline, the only properties to set on outline are:
outline-style
outline-width
outline-color
To which outline is a shorthand to concatenate those properties. But there's no side definition, due to the following fact:
Outlines may be non-rectangular. They are rectangular in Gecko/Firefox. But e.g. Opera draws a non-rectangular shape around a construct like this...
Since they may not be rectancular, it wouldn't make sense to be able to define left, top, etc, properties...
There is a nice hack you can do to achieve the effect you are after, but it probably has to be done on a case-by-case basis.
My scenario was that I had some content with padding, which contained several html elements including some anchors/links. Let's imagine the scss is something like this:
.contanier {
padding: 15px;
> a {
padding: 8px 0;
}
}
When focusing on an anchor the outline is pretty much touching the text and generally looks poor. Now, as you said, adding left/right padding to the anchors for the sake of an outline would throw off the layout of the content. The anchors would no longer appear inline with other elements in the container such as a heading/paragraph/image/what have you.
So to resolve the problem I added padding to the anchors, and negated it by setting a negative margin:
> a {
margin: 0 -4px;
padding: 8px 4px;
}
Now I have complete control of how the focus appears. There are some use-cases where this solution does not work, for example, if your anchors have a background colour. But for most cases it works pretty well.
I have a h1 tag text. Is it possible to give this text a shadow using CSS? (preferable without JavaScript).
Any help?
I need a color gradient from: #486882 to #2b4356
Gradients and shadows are not the same:
Text-Shadow: https://developer.mozilla.org/en/CSS/text-shadow
Text Gradient: http://matthewleak.co.uk/css3bob/
It is possible but you have to master the cross browser compatibility.
Here is nice sample
http://robertnyman.com/2010/02/15/css-gradients-for-all-web-browsers-without-using-images/
Hope this helps
There is no way to directly specify a gradient in css for text-shadow. However, you can use two text-shadows together to get the effect you want:
h1 { text-shadow: 0 0 0.2em #2b4356, 0 0 0.1em #486882 }
Yup quite possible with CSS3.
text-shadow: XXpx XXpx 0px #2b4356;
DEMO
I need a bit of help applying a drop shadow image to a range of DIV elements. The elements in question already have a background image so I am wrapping another DIV around them. Things get complicated further because I'm also using the 960gs CSS framework.
This is my current HTML for a content box type display:
<div class="grid_12 boxout-shadow-920">
<div class="boxout">
<p>The personal site and blog of CJD. The site is still a work-in-progress but please do have a look around and let me know what you think! </p>
</div>
</div>
Boxout CSS:
.boxout {
background:url("../images/overlay.png") repeat-x scroll 0 0 #EEEEEE;
-moz-border-radius:4px 4px 4px 4px;
border:1px solid #DDDDDD;
margin-bottom:15px;
padding:5px;
}
boxout-shadow-920 CSS:
.boxout-shadow-920 {
background:url("../images/box-shadow-920.png") no-repeat scroll 50% 101% transparent;
}
Now this works to a degree. The boxshadow image shows at the bottom of the content box which is what I would like. However as I'm using a fixed percentage of 101%, if the content box height is too small, not much of the drop shadow image gets shown, and if the content box is too big, whitespace starts to appear between the box and the shadow image.
So anyway, what I'm looking for is a cross-browser CSS based solution for doing this properly.
I'm sure there is an easy answer to this - any help is appreciated!
With the new CSS3 specification we got the property box-shadow that is already supported by Mozilla browsers (through -moz-box-shadow) and Webkit browsers (through -webkit-box-shadow). Since 10.5 pre-alpha also Opera supports this property, too.
So as far as you can accept to display no shadow for Internet Explorer you could stick to this property. The idea behind it is much cleaner because there is no layout specific HTML markup needed.
See here for more information on browser compatibility: http://markusstange.wordpress.com/2009/02/15/fun-with-box-shadows
For greatest support through most of the browser engines you should use the following three statements:
box-shadow: 3px 3px 5px #000;
-moz-box-shadow: 3px 3px 5px #000;
-webkit-box-shadow: 3px 3px 5px #000;
Same technique as rounded corners.
Check out this website for various CSS3 effects, including box shadow (what you're looking for): http://css3please.com/
I'd use the CSS3 box-shadow property, with that IE blur filter on div as a fallback for legacy browsers.