TwitSpark™ Betadesign 2

12 Responses

1. Pro Davy Kestens

   Hi Everyone, I need your help :p
   I would like to use as little as possible images while developing the new skin for twickets.net…

   Anyone got a great solution to create the "put on hold" label with css3?
   It's the rounded point on the left of it that's giving me a headache :)

   about 1 year ago

2. Pro Bram Devries

   .triangle:before{
   width:0px;
   height:0;
   content: "";
   border-top: 10px solid transparent;
   border-bottom: 10px solid transparent;
   border-right:50px solid blue}

   Doesn't work in Chrome and cuts of the edge of the triangle

   3likes

   about 1 year ago

3. Pro Eric Miller

   Hey Davy, I see why you were looking for that solution! Sorry I don't have one for you! This looks great though.

   1likes

   about 1 year ago

4. Theo Wiersema

   Make a div with an id of alert. Then put an empty span with a class of arrow inside as well as the text. Like so:

   div#alert
   span.arrow
   your text
   close div...

   With this CSS:

   #alert {
   background: #faf8fb;
   border-left:none;
   color:#222;
   text-shadow:0 1px #fff;
   font:bold 9pt/24px Helvetica;
   display:inline-block;
   padding:0 8px 0 2px;
   border-top-right-radius:3px;
   border-bottom-right-radius:3px;
   height:24px;
   position:relative;
   }
   .arrow {
   width:0;
   height:0;
   border-right:15px solid #faf8fb;
   border-top:12px solid transparent;
   border-bottom:12px solid transparent;
   position:absolute;
   left:-15px;
   }

   That will give you a similar effect. Check out the entire code on Gist:

   https://gist.github.com/996956

   about 1 year ago

5. Pro Ant Ekşiler

   Those wont create a rounded point for the triangle

   about 1 year ago

6. Joe Barrett

   Instead of a triangle you could just make a box with rounded borders and then just transform: rotate(45deg). The only problem you'll be running into is having the shadow under the left points, if you can handle is just being under your main 'Put on hold' side you can just make is seem to subtly disappear.

   Edit: Made it work, It's not perfect but pretty dang close just by using color pickers - http://jsfiddle.net/T4Jg4/6/

   Tested it in Safari, Chrome, and Firefox 4. I really didn't want to target mozilla specifically but just to fudge it right now I did. You might be able to get by without targeting it at a smaller/larger size.

   Just a note - you can adjust your gradients as needed - on your stops, just need to make it a 45 deg on the arrow edge since you're also rotating it. This is all done with one div, little markup. Hope it can work for you!

   Edit #2: And then we animate for fun - http://jsfiddle.net/T4Jg4/14/

   10likes

   about 1 year ago

7. Pro Davy Kestens

   Hey Joe, as said on twitter, you have no idea how awesome I think you are now :)

   12 months ago

8. Pro Davy Kestens

   Only 3 more and we have another 1,000 subscribers for www.twickets.net ! :) #happy

   12 months ago

9. Christian Philippsen

   @Joe Barrett: You're truly a wizard! Amazing job.

   1likes

   12 months ago

10. Pro Davy Kestens

    Sadly, due to compatibility issues, I'll still have to use images and javascript :(

    12 months ago

11. Pro Davy Kestens

    NameChange -> TwitSpark™ http://www.twitspark.com

    9 months ago

12. Julian Leiss

    Awesome!

    9 months ago