Page 1 of 2 12 LastLast
Results 1 to 10 of 14

Thread: playing with css 3

  1. #1
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default playing with css 3 5 Nov 2010 @ 14.46

    I have been playing with css 3 this morning, and I created some buttons.

    please let me know what you think: CSS3 buttons by welshstew

    Code:
    <div class="buttons"> 
        <a href=""><span>1</span></a> 
        <a href=""><span>2</span></a> 
        <a href=""><span>3</span></a> 
        <a href=""><span>4</span></a> 
    </div>
    Code:
    html body { background:#575759; }
    .buttons { width: 390px; margin: 0 auto; }
    .buttons a { width:77px; height:77px; float: left; position: relative; margin: 0 0 0 15px; font: bold 45px Arial, sans-serif; text-decoration: none; color: #efefef; text-shadow: #0a3b7b 0 1px 0, rgba(255, 255, 255, 0.5) 0 0 5px; border: solid 1px #0a3b7b; -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; background-color: #2098e4; background-image: -moz-linear-gradient(top, #2098e4, #105cbe 75%); background-image: -webkit-gradient(radial, center center, 10, center center, 300, from(rgba(150, 0, 0, 0)), to(rgba(150, 0, 0, 1.00)) ), -webkit-gradient(linear, left top, left bottom, color-stop(0, #2098e4), color-stop(0.75, #105cbe)); }
    .buttons a:after { left: 0; top: 0; right: 0; bottom: 0; border: solid 1px rgba(255, 255, 255, 0.5); -webkit-border-radius: 50px; -moz-border-radius: 50px; border-radius: 50px; content: ""; position: absolute; }
    .buttons a:before { left: -5px; top: -5px; right: -5px; bottom: -5px; border: solid 4px rgba(0, 0, 0, 0.2); -webkit-border-radius: 55px; -moz-border-radius: 55px; border-radius: 55px; content: ""; position: absolute; }
    .buttons a:hover { background-color: #22a1f1; background-image: -moz-linear-gradient(top, #22a1f1, #1162ca 75%); background-image: -webkit-gradient(radial, center center, 10, center center, 300, from(rgba(150, 0, 0, 0)), to(rgba(150, 0, 0, 1.00)) ), -webkit-gradient(linear, left top, left bottom, color-stop(0, #22a1f1), color-stop(0.75, #1162ca)); }
    .buttons span { position:absolute; margin:12px 0px 0px 25px; }
      Reply With Quote

  2. #2
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 5 Nov 2010 @ 15.32

    now in green too:

    green css3 round buttons
      Reply With Quote

  3. #3
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 5 Nov 2010 @ 15.33

    They are looking really good.

    I currently use border-radius and box-shadow in designs.

    The thing that puts me off using CSS3 currently is the huge amount of code it requires. Take border-radius for example.

    Code:
    div { border-radius:10px; -moz-border-radius:10px; -webkit-border-radius:10px; }
    I have to use 3 declarations to do exactly the same thing. It just looks and feels messy. This is why I still often find myself using :hover and tweaking the background image position.

    CSS3 usage is also a little limited as you can only use it to progressively enhance design's. In many situations this is fine. However, often I find clients surfing the web in IE7/IE8 asking where the magic is. Answering, "it's in Chrome / Firefox / Opera / IE9" just doesn't cut it.

    Of course, your buttons are just another example of the exciting opportunities CSS3 gives designers. As IE9 will eventually be rolled out over IE8 and IE6/7 continue to fall away more and more projects will be able to better utilize these features.

    Here is another good example that featured recently on nettuts: Tuts
      Reply With Quote

  4. #4
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 5 Nov 2010 @ 15.55

    Thanks Jason, much appreciated. I am just having some fun and learning for now.

    I agree that at the moment it is a mess, but hopefully it will sort itself out soon and we can get a consistent implementation across browsers.

    green round with a floating sub

    Not sure about this one, as it blurs the numbers on the transition.

    [edit] the blurring only happens on fiddle so copy the code locally to see it in all it's glory [/edit]
      Reply With Quote

  5. #5
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 5 Nov 2010 @ 16.32

    I just hacked this in chrome. I prefer this effect if you was going to have text coming down underneath. It is a little more subtle and as the background merges with the circle it looks like it is all part of the same element.

    Stew's Green Buttons Updated
    Last edited by Jason; 5 Nov 2010 at @ 16.34.
      Reply With Quote

  6. #6
    Tom
    Tom is offline
    Trusted Guru Tom's Avatar
    Join Date
    Jan 2009
    Posts
    1,022
    Blog Entries
    16

    Default 5 Nov 2010 @ 17.23

    excellent stuff, guess its best to learn now rather than later, which is pretty much what my mentality has been as its not practical to use on a live website just yet.
    Inexpensive Themes <<-- Affiliate link but it won't cost you.
      Reply With Quote

  7. #7
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 5 Nov 2010 @ 18.38

    quote
    I just hacked this in chrome. I prefer this effect if you was going to have text coming down underneath. It is a little more subtle and as the background merges with the circle it looks like it is all part of the same element.

    Stew's Green Buttons Updated
    Originally Posted by Jason View Post
    Awesome, I was practising for a css3 comp - is it ok if I enter this and we split the prize?

    Actually, going to enter this, but only if you are ok and we split the prize.
    Stew's Green Buttons Update 12
      Reply With Quote

  8. #8
    Senior Member Jason's Avatar
    Join Date
    Dec 2008
    Posts
    911

    Default 5 Nov 2010 @ 18.48

    quote
    Awesome, I was practising for a css3 comp - is it ok if I enter this and we split the prize?
    Originally Posted by WelshStew View Post
    Go for it. Whats the prize? Its 95% your work, i think I added like 4 lines, there is not need to split the prize... unless it is something awesome, in which case Gimmie!

    There is a little display bug going on. Due to transparency doubling up, the bottom half of the circle border becomes darker when you hover over the text. You might want to sort that out before submitting.
      Reply With Quote

  9. #9
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 5 Nov 2010 @ 19.00

    Credit where it is worth mate! The prize isn't much - mugs and t-shirts I think so happy to share to love (that is if I win)
      Reply With Quote

  10. #10
    New Registered User dreadingjs's Avatar
    Join Date
    Mar 2009
    Posts
    38

    Default 9 Nov 2010 @ 01.01

    These look really good. I love the gradient effect. Great job.
      Reply With Quote

Page 1 of 2 12 LastLast

Similar Threads

  1. MAG - Anyone going to be playing?
    By Tom in forum Coffee House
    Replies: 8
    Last Post: 5 Feb 2010, @ 18.33
  2. flash not playing in ie6
    By sudhakararaog in forum Imagery, Graphics & Typography
    Replies: 0
    Last Post: 23 Nov 2009, @ 20.37
  3. What are you playing?
    By Tom in forum Coffee House
    Replies: 39
    Last Post: 10 Jun 2009, @ 09.46

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •