400

Graphicless States

by Dave McNally Feb 28, 2010
Hover-states
Graphicless_teaser Graphicless Just playing around with various styles for a completely graphic-free, upcoming Wordpress theme. Screenshot (blown up) from Chrome. February 28, 2010

This shot is a Rebound of...

Graphicless

by Dave McNally

Tweet
162 views
http://drbl.in/cPL
Icon-colordrop

Tags

  1. 16
  2. 11
  3. 9
  4. 5
  5. 4
  6. 2

9 Responses

  1. 400 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.

    about 2 years ago

  2. Me-super-steve-dribbble Steven Ray

    So you're using CSS gradient here?

    about 2 years ago

  3. 400 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); }

    about 2 years ago

  4. 400 Dave McNally

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

    about 2 years ago

  5. Me-super-steve-dribbble Steven Ray

    Awesome! Thanks Dave!

    about 2 years ago

  6. Me-super-steve-dribbble 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)));

    about 2 years ago

  7. 400 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.

    about 2 years ago

  8. Me-super-steve-dribbble 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. :)

    about 2 years ago

  9. 400 Dave McNally

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

    about 2 years ago

keyboard shortcuts: ← previous shot → next shot L or F like