Graphicless States

Tags

1. 12 redesign
2. 11 css3
3. 9 personal
4. 5 wordpress
5. 4 theme
6. 2 testing

9 Responses

1. Pro Dave McNally

   Another benefit of relying purely on CSS - A quick way to alter colors if needed which comes in handy when making changes for different states. It also makes development pretty rapid and aids quick style guide developing.

   almost 2 years ago

2. Pro Steven Ray

   So you're using CSS gradient here?

   almost 2 years ago

3. Pro Dave McNally

   Yup. Here's the CSS used for the default button if you're interested:

   #button a { font-size: 22px; padding: 10px; background: -webkit-gradient(linear,left top,left bottom,from(#1b63ab),to(#14487a)); background: -moz-linear-gradient(top, #1b63ab, #14487a); color: #061524; text-shadow: rgba(255, 255, 255, .2) 0 1px 0; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; border: 1px solid #225d97; -webkit-box-shadow: 0 2px 4px rgba(0,0,0, .8); -moz-box-shadow: 0 2px 4px rgba(0,0,0, .8); box-shadow: 0 2px 4px rgba(0,0,0, .8); }

   almost 2 years ago

4. Pro Dave McNally

   Yikes....should probably link to a stylesheet from now on ;)

   almost 2 years ago

5. Pro Steven Ray

   Awesome! Thanks Dave!

   almost 2 years ago

6. Pro Steven Ray

   Hey I played around and used rgba with your gradient code.

   background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(27, 99, 171, 1)), to(rgba(20, 72, 122, 1)));
   background: -moz-gradient(linear, 0% 0%, 0% 100%, from(rgba(27, 99, 171, 1)), to(rgba(20, 72, 122, 1)));

   almost 2 years ago

7. Pro Dave McNally

   Unless I'm overlooking something there, it doesn't make much sense to use RGBA whilst you have 100% opacity for each color as the opacity declaration isn't needed and you would need to specify alternatives for other browsers anyway - rendering the RGBA declarations pointless.

   almost 2 years ago

8. Pro Steven Ray

   You are correct. I what I pasted here was at 100% opacity which would be pointless. I was just trying to see if it was possible since I really hadn't done css gradient. :)

   almost 2 years ago

9. Pro Dave McNally

   Ah! Yeah, it's great being able to get away with a minimal amount of imagery.

   almost 2 years ago