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
Related
I am currently working on a site which has an design where the main 'welcoming text' contains more than one line (as it is a short introduction about a product). This has an background of a transparant (0.7) white (rgba(255,255,255,0.7) with multiline padding. Yes, multiline padding I am saying. What that means, is that every line of text has top, bottom, left and right padding, background color and also a small transparent space between the lines.
To accomplish this, I used a box-shadow with an horizontal offset to simulate the left and right padding on each line. This does work on all browsers except Internet Explorer. As we want to have site working on all browsers I tried fixing this problem for a while now and I almost have come to the conclusion that this is just an internet explorer issue.
I used Geoff Muskett his example (http://geoffmuskett.com/text-with-background-padding-on-the-end-of-each-line-and-a-gap-between-lines/) and it does work as excepted except IE.
The problem is that when I open the page in IE, the box-shadows seems to be rendered somewhat blurry even though I set the blur to 0 pixels. (or just not added it, both did not work).
Even the code from Geoff his example does not work:
HTML
<h2><span>Could you benefit from having Alfi in your home?</span></h2>
CSS
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255,255,255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
Is there anybody here that knows this issue and knows if there is a solution to this that is not very hacky (not preferred)?
IE 11.0.9600.17905
EDIT
3 August 2015 09:32
I have been investigating this issue this weekend and found some posts of people having exactly the same issue as I am currently having. This seems to be a rendering bug in IE. See: https://connect.microsoft.com/IE/feedback/details/810756/ie-11-gap-between-element-background-and-its-box-shadow
Also in another StackOverflow post, someone by the name of #nickmorss says using the box-shadow to accomplish the multiline padded text is not working in IE11 and FF34+. It could be fixed in FF using box-decoration-break: clone; but this does not work at my side.
I think this is something not fixable in CSS by myself as this may be just a narly bug.
I found this worked in IE11
body{
background-color: blue;
}
h2 {
line-height: 1.8em;
font-size: 1.7em;
display: inline;
}
h2 span {
padding: 0.2em;
box-shadow: 0.2em 0 0 rgba(255, 255, 255,0.7), -0.2em 0 0 rgba(255,255,255,0.7);
background-color: #fff;
background-color: rgba(255,255,255,0.7);
}
<h2><span>Could you benefit from having Alfi in your home? Making this text a little longer so that it wraps on stackoverflow</span></h2>
So I'm thinking that maybe your site is perhaps in quirks mode, or using a different rendering mode other than IE11.
Confirm that you are running in IE11 mode by pressing F12 and going to the emulation tab. Are you in the right document mode. If not you will have to fix your site to ensure it's using the right document mode.
Please note, that in the comments of that blog post it does mention it doesn't work in Firefox, but someone has post code that does.
Not sure if it'll solve it but try declaring your rgba values as rgba(255,255,255,0.7) I've not seen hex values used within rgba before and this may be confusing IE
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.
Changing the border-bottom attribute along with removing text-decoration creates the colored underline in some browsers (I can vouch for FF 5 and 6 for sure). But other browsers (at least Safari & Chrome) don't display any line.
For example of the problem, see utsarotaract.org (there is a link in the bottom paragraph of the index page).
Since I've seen this work other places, I'm assuming that some of my CSS is clashing but I'm stumped as to where exactly the problem is.
The issue is the size of your border. Change your 0.5px border to 1px instead and it will work. Live example: http://jsfiddle.net/tw16/WcrNA/
.content a {
border-bottom: 1px solid #A80532; /* instead of 0.5px */
color: #000022;
text-decoration: none;
}
You may want to use:
<a><span>I'm a link</span></a>
with the following CSS:
a {
color: blue;
}
span {
color: green;
}
The alternative being using a border-bottom. It's also a cross-browser solution. You'll just have to set its padding/margin/line-height to make it consistent from a browser to another.
I inherited a site that I'm working on finishing and there is this style applied to tags inside my footer (forgive me if I don't give enough info, just let me know and I'll put it up). The style puts a subtle background color around the header text and rounds the corners a bit:
h4 {
background: none repeat scroll 0 0 rgba(32, 37, 41, 0.3);
border-radius: 8px 8px 8px 8px;
color: #5CB414;
font-size: 26px;
font-weight: bold;
margin-bottom: 20px;
padding: 12px 0 8px 10px;
position: relative;
}
This works great in Chrome and FF but in IE8 it doesn't work. And in IE8 it doesn't float the columns next to each other. Here is the site. Scroll down to the bottom to see the issues (should be 3 columns but in IE it is only 2 and there is no background style applied to the H4.
I know IE is finicky, but I don't know what to do about it. Any help will be greatly appreciated. Thanks!
as far as losing the 3 columns at the bottom simple replace the ".col" width:300px to width:292px; It's just barely too big.
Also with the rounded corners being crossbrowser compatible I like to get my styles from here: http://css3please.com/
I do not know that rounded corners will work in ie8 or less so you might try doing it with jquery instead of css3
http://jquery.malsup.com/corner/
Versions of IE prior to 9 don't support RGBA or border radius, so these are simply being ignored. You can try the cross-browser syntax at http://css3please.com, but this won't give you rounded corners in versions of IE prior to 9.
Your column float issue stems from the use of an nth-child selector on line 1454 of your style.css:
.col:nth-child(3) { margin-right: 0; }
Again, IE8 and lower don't support this so you'll have to find a work around. You can add a class of "last" to the third column, and place this in your stylesheet:
col.last { margin-right: 0 !important; }
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.