Twitter CSS button
The button was coded in HTML5 and CSS 3. Note that it has no images! The button adjusts for three states: normal, hover and active.
View the button →
It displays a slightly different version of the original design — bird is looking to the right and has different feathers — but that’s not an issue. The problem I encountered was how to code the shadow inside of the bird (text). As developers know, CSS text-shadow property doesn’t have an inset modifier like box-shadow has. The solution I came up with was to stack text shadows on top of each other.
Inset text-shadow with CSS
The method of creating a pseudo-inset effect is simple. Have the bottom text-shadow without feather far above from the text. Stack the next text-shadow on top of it, lower, with some feathering and lighter colour. Finally, add another text-shadow even lower with feathering and an even lighter colour. The last text-shadow should match the colour of the text.
When tested on Chrome it looks somewhat bad. It’s a bit blurry. I am aware that there are other solutions on the Internet but none of them work on Firefox, yet. And I’m on Firefox, so…
Check out my portfolio: SicanStudios
Follow me on Twitter: @sican
View the button →
It displays a slightly different version of the original design — bird is looking to the right and has different feathers — but that’s not an issue. The problem I encountered was how to code the shadow inside of the bird (text). As developers know, CSS text-shadow property doesn’t have an inset modifier like box-shadow has. The solution I came up with was to stack text shadows on top of each other.
Inset text-shadow with CSS
The method of creating a pseudo-inset effect is simple. Have the bottom text-shadow without feather far above from the text. Stack the next text-shadow on top of it, lower, with some feathering and lighter colour. Finally, add another text-shadow even lower with feathering and an even lighter colour. The last text-shadow should match the colour of the text.
When tested on Chrome it looks somewhat bad. It’s a bit blurry. I am aware that there are other solutions on the Internet but none of them work on Firefox, yet. And I’m on Firefox, so…
Check out my portfolio: SicanStudios
Follow me on Twitter: @sican
