Comments on: The hidden power of border-radius http://blog.creativityden.com/the-hidden-power-of-border-radius-2/ creative crazy! Tue, 07 Sep 2010 09:54:44 +0000 hourly 1 http://wordpress.org/?v=3.0.1 By: buzukhhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2635 buzukh Mon, 02 Aug 2010 20:14:36 +0000 http://blog.creativityden.com/?p=3266#comment-2635 Nice post good work I visit your site daily and work on it daily <a href="http://hi-pk.com/" rel="nofollow">Hacking & Blogging</a> Nice post good work I visit your site daily
and work on it daily Hacking & Blogging

]]> By: Wszystko o HTML5 i CSS3 | Blog Staircase.plhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2633 Wszystko o HTML5 i CSS3 | Blog Staircase.pl Mon, 19 Jul 2010 22:38:13 +0000 http://blog.creativityden.com/?p=3266#comment-2633 [...] The hidden power of border-radius So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images. [...] [...] The hidden power of border-radius So hopefully after reading – Understanding CSS – Padding, Positioning and CSS3 – you understand the basics of CSS and have been experimenting with other properties. It is important to remember that some properties will allow you to achieve effects that aren’t necessarily stated. In this post we will explore the property border-radius and how it can be used to create circles, semi-cricles and quarter-circles. It also has the potential to produce some terrific designs using just CSS – no images. [...]

]]> By: Jerryhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2619 Jerry Wed, 23 Jun 2010 02:08:41 +0000 http://blog.creativityden.com/?p=3266#comment-2619 Depending what your constraints are, to get text that follows a vector path you can look at the canvas tag (HTML5), or SVG. Canvas s supported by all recent browsers except IE, and Google has a script you can link to that adds canvas to IE. Not sure which versions of IE it works on.For graphics you want to generate in real time on the server, SVG is pretty dang cool. It's XML-based and you can write scripts that directly manipulate the elements of the image as well. IE support requires a plugin from Adobe that is a little less transparent to the user than Google's canvas script.Both methods include gradients and time-based animation as well, so you can have your letters chase each other along a path, or have your bar charts "grow" from the baseline. I don't know enough about either to declare one 'better' than the other; they were both developed to fix the same problems. Depending what your constraints are, to get text that follows a vector path you can look at the canvas tag (HTML5), or SVG. Canvas s supported by all recent browsers except IE, and Google has a script you can link to that adds canvas to IE. Not sure which versions of IE it works on.

For graphics you want to generate in real time on the server, SVG is pretty dang cool. It’s XML-based and you can write scripts that directly manipulate the elements of the image as well. IE support requires a plugin from Adobe that is a little less transparent to the user than Google’s canvas script.

Both methods include gradients and time-based animation as well, so you can have your letters chase each other along a path, or have your bar charts “grow” from the baseline. I don’t know enough about either to declare one ‘better’ than the other; they were both developed to fix the same problems.

]]> By: Julio Bitencourthttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2618 Julio Bitencourt Tue, 22 Jun 2010 21:56:12 +0000 http://blog.creativityden.com/?p=3266#comment-2618 Thanks Andy! I tried the webkit-border-radius and it works very well ! Thanks Andy! I tried the webkit-border-radius and it works very well !

]]> By: CSS3 – Let’s play Ball… » …undsoweiterundsofort… - alles zwischen 0 und 1http://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2613 CSS3 – Let’s play Ball… » …undsoweiterundsofort… - alles zwischen 0 und 1 Mon, 21 Jun 2010 07:11:26 +0000 http://blog.creativityden.com/?p=3266#comment-2613 [...] es möglich. Es finden sich viele Tutorials im Netz, wie man eine Kreisform zeichnet (u.a. auf CreativityDen). Das CSS3-Statement border-radius erlaubt es, durch die numerische Angabe der Rundung in Pixeln, [...] [...] es möglich. Es finden sich viele Tutorials im Netz, wie man eine Kreisform zeichnet (u.a. auf CreativityDen). Das CSS3-Statement border-radius erlaubt es, durch die numerische Angabe der Rundung in Pixeln, [...]

]]> By: Maunneshttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2554 Maunnes Thu, 03 Jun 2010 01:27:07 +0000 http://blog.creativityden.com/?p=3266#comment-2554 Very helpful, thanks! Very helpful, thanks!

]]> By: Having fun with transparency – CreativityDenhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2534 Having fun with transparency – CreativityDen Fri, 28 May 2010 19:07:37 +0000 http://blog.creativityden.com/?p=3266#comment-2534 [...] the border-radius property, on first glance it just just rounds off corners, but when you begin to delve deeper and experiment you realise that the property can do much more than just round off corners. To be creative you [...] [...] the border-radius property, on first glance it just just rounds off corners, but when you begin to delve deeper and experiment you realise that the property can do much more than just round off corners. To be creative you [...]

]]> By: Zoe Gillenwaterhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2530 Zoe Gillenwater Wed, 26 May 2010 03:04:53 +0000 http://blog.creativityden.com/?p=3266#comment-2530 Great article and clever examples. Would be nice, though, if you linked to real demos instead of just showing images of each effect. That way we can test it in various browsers. I know that Chrome has problems drawing perfect circles created with border-radius (see circle at top of www.stunningcss3.com for example), and I wondered if your examples displayed this problem too. Great article and clever examples. Would be nice, though, if you linked to real demos instead of just showing images of each effect. That way we can test it in various browsers. I know that Chrome has problems drawing perfect circles created with border-radius (see circle at top of http://www.stunningcss3.com for example), and I wondered if your examples displayed this problem too.

]]> By: Zeichnen mit CSS und SVGhttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2507 Zeichnen mit CSS und SVG Fri, 21 May 2010 12:14:09 +0000 http://blog.creativityden.com/?p=3266#comment-2507 [...] CSS CSS CSS SVG [...] [...] CSS CSS CSS SVG [...]

]]> By: Liam McCabehttp://blog.creativityden.com/the-hidden-power-of-border-radius-2/#comment-2487 Liam McCabe Thu, 13 May 2010 09:40:05 +0000 http://blog.creativityden.com/?p=3266#comment-2487 An interesting thought. They only way I can think of achieving this would be to rotate each letter individually. Refer to this article: http://snook.ca/archives/html_and_css/css-text-rotationI'm sure a javascript pro could develop a loop that rotates each letter corresponding to it's position but in the meantime you'll have to stick with individual letter rotation.Or you could just use an image? An interesting thought. They only way I can think of achieving this would be to rotate each letter individually. Refer to this article: http://snook.ca/archives/html_and_css/css-text-rotation

I’m sure a javascript pro could develop a loop that rotates each letter corresponding to it’s position but in the meantime you’ll have to stick with individual letter rotation.

Or you could just use an image?

]]>