How is this done?

[speedude87]

Hi,
I’m new to css-tricks and I saw that this community is so helpful so I decided to register as I’ve somethings that I need help with. Firstly, I like to say that I love the layout of this website and the search bar at the top right hand corner, how is it being done? Because I use safari on a mac and every time i create and click a search box, there’s always that glow around it. Could you advise on how to remove the glow and make it like what it is on css-tricks?

The other thing is that I came across a website, MacHeist.com. I noticed their fonts look pressed when viewed in Safari. Does anyone know how it’s done? Thanks in advance!

[apostrophe]

Firstly you need to be absolutely sure you want to remove that glow as it is an important usability feature. If you really want to do it then add this to your CSS:

Code:

*:focus {
outline: 0;
}

The text feature on the MacHeist site is done using the CSS3 property text-shadow thus:

Code:

body {
font-family:”Helvetica Neue”,Helvetica,Arial,sans-serif;
text-shadow:0 0 1px rgba(0, 0, 0, 0.01);
}

Unfortunately Safari is the only browser that supports it at the moment.

[speedude87]

wow…. thanks appreciate it!! I’ll try it now! :D

[Author]

Posts