CSSPLAY
Doing it with style
Doing it with style
Please note. I get a few hundred emails a week from visitors asking for help, or posing questions on how to modify my demos to suit their application and I read them all. Unfortunately I only have a limited amount of time to spend answering these questions.
So if I do not reply, please do not be offended, and if I do reply then you are one of the lucky ones.
If you are asking for permission to use any of my demonstration then please email me with your request stu{at}cssplay.co.uk.
Stu:-
oleastre, I could have used a single image for the whole spiral, but that would have defeated the object of the exercise which was to use just four images (quarter circles) and css. It doesn't serve any other purpose but to show that using em sizes you can scale your images, which, incidentally, I have done with my site logo and button on the home page. Try increasing the font size and watch the images grow as well (and the page stay in shape).
(30.06.2005, 10:40)
oleastre:-
The question was just, your original image is somewhat small, whay not using a bigger one that is scaled down (here your images are scaled up). Personally, I use scaled images to create corners on my home page (www.oleastre.be), the images are huge, but scaled down using em units. So keep using the four quarter circles of course, but scaling down results generally in nicer images than scaling up :)
(30.06.2005, 14:26)
Stu:-
oleastre, ah I see. The only problem then would be that the smallest image would be too thin to show. It's a pity that SVG is not supported by many browsers ;o)
(30.06.2005, 15:25)
cliffdavidson:-
The Spiral is also known as the Golden Spiral and is used by many graphic designers. If you take the relationship between, say, the top long box and the bottom sort of square box, they will be graphically harmonized to create perfect balance. You can find out more searching for the golden sprial, golden mean or golden rectangle on google. Happy designing.
(30.06.2005, 18:02)
Stu:-
cliff, the golden spiral is very slightly different at low values but yes they are basically the same. I have now used larger graphics as suggested by oleatre with a slight taper so that on curve fits the next with a reduced size.
(30.06.2005, 19:33)
silver13:-
Thanks, Stu. Yes, you are correct about the number sequence. The Graphics Designer uses it throughout Nature. Leonardo of Pisa is simply credited with having recognized it. Question: why not use CSS to create the spiral without images?
(01.07.2005, 02:18)
Stu:-
silver13, I was aiming at a pure css method without images, but could not find a way of drawing a high resolution curve large enough. Bullet points are an obvious choice but they will only scale up so far before becoming unmanageable. I will keep trying though ;o)
I also have a chunky css solution which I may publish.
(01.07.2005, 07:54)
oleastre:-
Now with your new images it's nicer :) For the pure CSS solution, maybe something can be done using the CSS3 border-radius property (-moz-border-radius under gecko browser)... but it is still experimental.
(01.07.2005, 15:45)
silver13:-
Yin Yang renders nicely. Perhaps several of the Yang's only, in varying proportions, adjusted to the number sequence?
P.S. Although Nature provides thickening lines (for example, trees) as the spiral increases for added strength, it's not necessary to graphically portray Fibonacci's number sequence purely in this way. As long as the distance between the lines continues to expand conforming to the number sequence, then the lines can all be a constant width.
(01.07.2005, 16:08)
Stu:-
silver13, using 4 images and scaling them up as the spiral expands will automatically increase the line width. using the taper on each curve blends them so that the step up is not so pronounced. The css only version shows this step effect.
(01.07.2005, 17:32)
10 of 15 comments (part 1). [ » ] [ * ]
Thanks to Alex for this script.
Please enter your comments for this site page.
Please note that all posts are moderated.
HTML is turned off
Maximum word length is 80 characters.
Messages limited to 1200 characters.
Web links should not include 'https://'
Your donations keep CSS PLAY running.
If your donation is for the use of a demo then please email me with the demo url after making your donation.
