629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says

After reading this post on Nettuts+ I was bored at work today so I started playing with CSS ..

Long story short, It’s nothing groundbreaking but I figured it might prove useful to someone.

Check it out here: http://www.vagrantradio.com/demos/css_arrows/

659 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
luckykind says

Didn’t have problem accessing it…

It would be nice if webkit rendered angles as nicely as mozilla does… too much jaggedness in the edges for my taste… I’m sure IE probably looks just as bad… browsers still have a way to go before using CSS for things such as these… at least IMO …

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

Doesn’t look jagged at all. I like it. I’m not seeing how it’s actually being made with those angles, though. Looking at the code it looks like you’re using border, but did you forget to post the code for the ‘arrows’ class? Or was that just there for show? Forgive me if I’m missing something, I just woke up.

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says

@Uniq I have certain parts of Europe blocked by IP because of a certain content harvester that hits my site quite regularly, sorry about that.

@luckykind yes, the angles are quite jagged in IE and webkit unfortunately.

@Jar it’s just using border and the arrows class is for the jQuery fadein/fadeout.

659 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
luckykind says
Doesn’t look jagged at all.

What browser did you view it in?

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says
Doesn’t look jagged at all.
What browser did you view it in?

It looks good in FF, everything else looks jagged. Regardless, it killed a couple of hours at work. lol.

554 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 1+ members
  • Has sold $1,000+ on Envato Market
  • Has collected 1+ items on Envato Market
+2 more
Shaktal says
Doesn’t look jagged at all.
What browser did you view it in?
It looks good in FF, everything else looks jagged. Regardless, it killed a couple of hours at work. lol.

It doesn’t look jagged in Chrome to me. :)

@VagrantRadio: Nice arrows, looks really good! :)

738 posts
  • Has collected 10+ items on Envato Market
  • Has been part of the Envato Community for over 5 years
  • Located in United States
  • Sells items exclusively on Envato Market
Jar says

I looked at it in Chrome and FF.

659 posts
  • Has been part of the Envato Community for over 5 years
  • Has referred 50+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
luckykind says

I’m on a Mac… Chrome just came out of beta… but it still looks jagged on it and the same for Safari…

On Chrome:

It’s the same for Jeffrey’s tut as well…

not saying it’s not worth playing around with… just saying most of us are probably designers first and designers don’t like jagged edges… :) I’m assuming…

629 posts
  • Has been part of the Envato Community for over 4 years
  • Has referred 10+ members
  • Has collected 10+ items on Envato Market
  • Sells items exclusively on Envato Market
+2 more
VagrantRadio says

For this type of thing I usually use a black 1px by 1px square image with transparency set in photoshop before I save it as a png and set it as a repeating background image. It seems the easiest without the browser specific workarounds and what not.

It’s nice to explore other options and come up with ideas that could possibly work and be used for something that is usually done some other way, if only each browser didn’t render everything different.

by
by
by
by
by
by