I'm looking at http://agilewebsolutions.com/support. As you can see, the text h2 and h3 all have an engraved effect giving it a 3d look. How is this accomplished? I couldn't dig it out of the code. Any help would be appreciated.
The h1 uses text-shadow:0 -1px 0 #000000; as it is a light text on a dark background.
The h2 uses text-shadow:0 1px 0 #FFFFFF; which is the exact inverse of the one above. support.css (line 47)
However both look engraved because of the use of light text on dark bg + dark text on light bg.
That is done with the CSS3 effect text-shadow. See here for more info. IE still does not support most CSS3 properties though.
Related
I'd like to make one of the FontAwesome icons a bit less heavy - it's much heavier than the font I am using. This how it looks presently:
:
Ugly, right? So I've tried resetting the font-weight as follows:
.tag .icon-remove {
font-weight: 100;
}
The attribute appears to be set correctly in the CSS, but it has no effect - the icon looks just as heavy as before. I've also tried font-weight: lighter and -webkit-text-stroke-width: 1px with no effect.
Is there any way I can make the icon less heavy? The docs say "Anything you can do with CSS font styles, you can do with Font Awesome" but I can't figure out how to do this.
Webkit browsers support the ability to add "stroke" to fonts. This bit of style makes fonts look thinner (assuming a white background):
-webkit-text-stroke: 2px white;
Example on codepen here: http://codepen.io/mackdoyle/pen/yrgEH
Some people are using SVG for a cross-platform "stroke" solution: http://codepen.io/CrocoDillon/pen/dGIsK
2018 Update
Font Awesome 5 now features light, regular and solid variants. The icon featured in this question has the following style under the different variants:
A modern answer to this question would be that different variants of the icon can be used to make the icon appear bolder or lighter. The only downside is that if you're already using solid you will have to fall back to the original answers here to make those bolder, and likewise if you're using light you'd have to do the same to make those lighter.
Font Awesome's How To Use documentation walks through how to use these variants.
Original Answer
Font Awesome makes use of the Private Use region of Unicode. For example, this .icon-remove you're using is added in using the ::before pseudo-selector, setting its content to \f00d ():
.icon-remove:before {
content: "\f00d";
}
Font Awesome does only come with one font-weight variant, however browsers will render this as they would render any font with only one variant. If you look closely, the normal font-weight isn't as bold as the bold font-weight. Unfortunately a normal font weight isn't what you're after.
What you can do however is change its colour to something less dark and reduce its font size to make it stand out a bit less. From your image, the "tags" text appears much lighter than the icon, so I'd suggest using something like:
.tag .icon-remove {
color:#888;
font-size:14px;
}
Here's a JSFiddle example, and here is further proof that this is definitely a font.
Just to help anyone coming to this page. This is an alternate if you are flexible with using some other icon library.
James is correct that you cannot change the font weight however if you are looking for more modern look for icons then you might consider ionicons
It has both ios and android versions for icons.
The author appears to have taken a freemium approach to the font library and provides Black Tie to give different weights to the Font-Awesome library.
Another solution I've used to create lighter fontawesome icons, similar to the webkit-text-stroke approach but more portable, is to set the color of the icon to the same as the background (or transparent) and use text-shadow to create an outline:
.fa-outline-dark-gray {
color: #fff;
text-shadow: -1px -1px 0 #999,
1px -1px 0 #999,
-1px 1px 0 #999,
1px 1px 0 #999;
}
It doesn't work in ie <10, but at least it's not restricted to webkit browsers.
.star-light::after {
content: "\f005";
font-family: "FontAwesome";
font-size: 3.2rem;
color: #fff;
font-weight: 900;
background-color: red;
}
I have the following CSS on my
h2 {
font-family: Arial, Verdana, sans-serif;
color: #fff;
text-shadow: 0 6px 0 #E5E5E5
}
The problem is that this looks good only on some font-sizes, in others it looks really bad. If the font is really big the shadow is barely noticeable, if the font is too small the shadow makes the text unreadable. In my webpage the font of this particular element changes sizes dynamically. It can be as small as 10px and as big as 200px.
For some reason setting the shadow position in % do not work, one would hope it would take a % of the font-size attribute.
So I'm asking here if there is any way to make text-shadow works on fonts that changes size using CSS alone. I'm hoping for a solution that doesn't use javascript.
You can use em instead of px in the text-shadow and em relates to the actual set size of the typeface.
Examples on w3.org
Understanding em
see
http://rcljr.com/rcl/tests/TextShadow%20Supreme/index.html
for a text shadow formatter
When I have the following in css, the underlines under the links in IE and Firefox are "doubled". I have seen that some websites have the same font-family, same font-size, in bold and underlines are not doubled. How can I make the underline only one line and not two (1px vs 2px). A simple css that would work in all browsers (if possible). I know I could use border-bottom to solve the problem but I don't really like the idea.
.a_12 {
font-family: arial;
font-size: 12pt;
font-weight: bold;
text-decoration: underline;
}
Thank you for your help and suggestions
You cannot control how browsers render their text underlines using CSS. If you really need that level of control, it doesn't hurt to use a bottom border.
try to use this property: border-width: 1px or play with border-bottom property
An alternative to the border-bottom technique suggested in several other posts is to use an inset box-shadow, like so:
box-shadow: 0 -1px 0 0 inset;
Leaving out the color parameter defaults to the text color.
How is the "sunken" or "inset" effect applied to these letters in this menu? I looked (briefly) with Firebug but can't find how they're doing it. Works in FF, not in IE.
See http://balsamiq.com/products/mockups/mybalsamiq for actual example.
This is just a Text Shadow with a color lighter than the background instead of darker, causing it to look like a bevel. (We've been trained to believe that the 'sunlight' on a computer screen generally comes from the upper left corner.)
The CSS rule shown when using the Developer Tools for Safari shows:
text-shadow: white 0px 1px 0px;
That is most likely a text-shadow:
p {
text-shadow: 0 1px 0 #fff;
}
No version of IE in existence (not even IE9 beta) supports text-shadow.
It's this:
text-shadow: 0 1px 0 #FFFFFF;
As I see, it's the color combination that create the effect. Just change the text to red color and the text is not inset anymore.
Here's a little trick I discovered using the :before and :after pseudo-elements:
http://dabblet.com/gist/1609945
What is the difference to use {text-decoration: underline} and {border-bottom: ...}?
which is easy to style and cross browser compatible?
when we should use border-bottom over text-decoration: underline?
Would it be good to use border-bottom always in place of text-decoration: underline?
border-bottom puts a line at the bottom of the element box. text-decoration:underline renders the text underlined. The exact difference depends on the HTML and text layout engines in use, but in general if you want text underlined, then underline it.
Sorry to say this, but some answers here are misleading. Splitting a line of text does not place the border at the bottom of the entire block, because of the nature of inline blocks. Borders under links are actually more consistent across browsers than text-decoration: underline.
See: Text-Decoration vs. Border-Bottom
As Ignacio said, border-bottom will put the line at the bottom of the containing box, whereas text-decoration:underline will actually underline the text. This becomes an important distinction for multi-line strings.
I am a single line and will look similar for both methods
---------------------------------------------------------
would probably render the same for both styles, but you'll get the following for multi-line strings.
I am a string that has been
split and added a border-bottom
-------------------------------
I am a string that has been
---------------------------
split and underlined
--------------------
Apologies for using code formatting rather than properly rending these examples, but you can see the point I'm trying to make.
bottom-border lets you control the distance between the text and the underline, so its more versatile. And (as mentioned above) it allows a different color for the underline (although I don't see a reason why you'll want to do that).
text-decoration is more 'correct' because it is the 'real' CSS property meant for underlining text.
if you set text-decoration: underline for all links then you will have to set text-decoration: none for special links which you don't need an underline. but if you use border-bottom instead, you'll save one line of CSS code (provide you set text-decoration: none in your reset CSS.
so all in all, i'll vote for border-bottom if you have a complex layout with different styles for each link but text-decoration for a simple website coded 'by the book'.
While there are always going to be cases where one is more appropriate than the other, border-bottom offers much more precise control over text-decoration and is therefore probably the preferred method. Here's a quick (likely not exhaustive) list of properties that border-bottom can control/enable that text-decoration cannot:
Spacing between text and "underline"
"Underline" style (dotted, dashed, solid, gradient, image)
Thickness
CSS transitions/animations
Separation of color between text and "underline"
In many cases, most of these abilities will not be needed - but it is good to have them available! I've switched to using border-bottom primarily for the ability to put a few pixels of padding between the text and the underline; the next most common use I've found is divorcing the underline color from the text color.
With CSS variables now shipping in every major browser, a "reset" stylesheet might look something like this:
:root {
--link-color: blue;
--hover-color: purple;
--underline-color: var(--link-color);
}
a {
color: var(--link-color);
text-decoration: none;
border-bottom: 1px solid var(--underline-color);
}
a:hover {
color: var(--hover-color);
border-bottom-color: var(--hover-color);
}
This way, links will display as expected on a "default" basis, yet still allow for customization as needed.
setting your text to display inline (actually, it should be that by default) will cause the border-bottom to render much as a text-decoration rule.
however, i presume that you want to use this technique on links by doing the following:
/* my super eye catching dual colour link */
a {
color:black;
border-bottom:1px solid red;
}
which is all well and good, but you'll find that wherever you have an img tag inside a link, the image will have a red border under it.
if you can figure out a way to target the parent of a page element (the image) using existing selectors and no javascript, i'll buy you a beer but i don't think you'll have much luck.
using "text-decoration" avoids this issue altogether as an image is clearly not text, it will not render an underline when inside a link.
if you have complete control over your markup, i suppose you can bumble your way through by adding classes to every link, but if you're working with any popular CMS system, you're going to struggle with this idea.
Try this border with 1px image
a:hover {
background: url("img/bg-link-hover.png") repeat-x scroll 0px 92% transparent;
background-color: transparent;
background-image: url("img/bg-link-hover.png");
background-repeat: repeat-x;
background-attachment: scroll;
background-position: 0px 92%;
background-clip: border-box;
background-origin: padding-box;
background-size: auto auto;
}