CSS has come a long way, but keeping up with new features and remembering everything to help users as much as possible can be a difficult task.
Often is because we are prioritise our design/development base on main functionality and leave little things untouched.
Unfortunately when we use the “text-shadow” property on css this sometimes could cause a little tiny problem that makes the text slightly difficult to read or fuzzy.
Most people may say forget that it’s nothing major, however I believe from a design perspective this is terrible because people use this highlight feature way too often and if someone is trying to highlight and copy the text, if it is fuzzy and too hard to read there could be a genuine problem.
Here is a website which I love and helps me a lot on daily bases but with the minor highlight on the header.
http://www.colorzilla.com/gradient-editor/ (try to highlight the header and see how the white text-shadow does not look good.
A simple fix for this using css.
::selection{
text-shadow: 0 1px 0 rgba(255,255,255,0.25);
background: #333999;
color: #fff;
}
Also please read this blog which demonstrates it with images.
Remember the design is all:
- Design is your greeter.
- Design is your first impressions and thats most memorable.
- Design is beauty and if you don’t get it right you most likely won’t do that well or achieve your full potential.