629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
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 been a member for 5-6 years
  • United States
  • Bought between 10 and 49 items
  • Exclusive Author
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
luckykind says
Doesn’t look jagged at all.

What browser did you view it in?

629 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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
  • Bought between 1 and 9 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 1 and 9 users
  • Sold between 1 000 and 5 000 dollars
  • United Kingdom
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 been a member for 5-6 years
  • United States
  • Bought between 10 and 49 items
  • Exclusive Author
Jar says

I looked at it in Chrome and FF.

659 posts
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 5-6 years
  • Referred between 50 and 99 users
  • Sold between 10 000 and 50 000 dollars
  • United States
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
  • Bought between 10 and 49 items
  • Exclusive Author
  • Has been a member for 4-5 years
  • Referred between 10 and 49 users
  • Repeatedly Helped protect Envato Marketplaces against copyright violations
  • United States
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