18 replies [Last post]
gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Wow, Tony! You're going all out on illustrating the various css properties and how they work.

These demos ought to really help everyone to develop a deeper understanding of what goes on under the hood (bonnet for the weirdly speaking) of css.

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Thanks Gary, Pretty happy

Thanks Gary,
Pretty happy with how they are turing out.
Not all examples work in the editor, so I leave off the live edit for those and we still have the usual browser support issue.

Have you ever used background-size? looks quite useful.

Suggestions on better examples or descriptions are welcome.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

BG size

I've not used it. I think I'd prefer that graphic designers not get wind of it. Wink Those guys and guyesses will take it as license to create even more image bound designs. "… but all you have to do is stretch it a bit."

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Great job sir, they're

Great job sir, they're looking great, and we've got traffic lights to boot (boot for the oddly worded ones means the biggish space at the back of ones car. Boot is also something placed on ones foot - Bonnet on the other hand is just plain weird, in my dictionary it's a summer hat for the ladies.)

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Transitions would be good

Transitions would be good one to cover as it will be fun to play with on screen - even though it should never have been included in the specs.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Uhm transitions would make a

Uhm transitions would make a good example when I can get to it.
Still updating all the existing ones.

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Hugo wrote:Transitions …

Hugo wrote:

Transitions … even though it should never have been included in the specs.

Granted it does smack of behavior, at least it doesn't involve linking to a 3GB jQuery library. If only people weren't allowed to use J. Arthur Gargantua Query until they could prove their competence in stripping the library down to the bare requirements of the site. :sigh:

cheers,

gary

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Got through the list of ones

Got through the list of ones worth of an example. Now if only I could stand looking at another example I would add transition. Think I will have a break for a day or so Glasses

gary.turner
gary.turner's picture
Offline
Moderator
Dallas
Last seen: 2 days 22 min ago
Dallas
Timezone: GMT-6
Joined: 2004-06-25
Posts: 9774
Points: 3856

Wuss!

Big smile

If your web page is as clever as you can make it, it's probably too clever for you to debug or maintain.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Yesterday I had to implement

Yesterday I had to implement a simple hover popup for an existing site- needed to be simple and lightweight, so simply added span content in the parent and did the run of the mill css hide/show then thought hmm site has many effects throughout so wanted a smooth fade in / fade out effect; rather than write script though I'll try 'Transitions' but not so easy. 'Transition' and it's sibling 'transform' are quite tricky properties to use, could get a fade in but due to styles/markup could not get fade out; so as jquery already loaded fell back to scripting it. Sad

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Lucky it's winter here day's

Lucky it's winter here day's are short. Smile

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Actually scrub Transition

Actually scrub Transition (might take ages to get examples together), add in 'Transform', think that's an easier and perhaps more useful property to demonstrate - and you do seem to be at a lose end at the moment Tongue

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Transform not sure how much

Transform not sure how much easier that would be. Feel like throwing together a quick demo and description? Cool

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

is that the opening of my big

Cool is that the opening of my big mouth - if I get time I'll try and run up a demo and pass it along - that is if I get any peace from some troublesome jobs and haven't actually burned my puters and retired.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 4 days 13 hours ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5343
Points: 2964

Thanks Hugo, No worries if

Thanks Hugo,
No worries if you can't get to it.
I will keep work on transitions.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Made a start roughing out a

Made a start roughing out a page of examples - it's not a simple task these two properties are fiddly and have a slew of permutations and child properties.

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hugo wrote: Made a start

Hugo wrote:

Made a start roughing out a page of examples - it's not a simple task these two properties are fiddly and have a slew of permutations and child properties.

Where can we see the demo Hugo?

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 46 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

Not sure I got dragged back

Not sure I got dragged back to client issues and haven't had a chance to look at if further; got through quite a few examples and realised there were still a ton more. Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me

mihirc
mihirc's picture
Offline
Leader
Pune, Maharashtra, India
Last seen: 6 years 16 weeks ago
Pune, Maharashtra, India
Timezone: GMT+5.5
Joined: 2007-05-09
Posts: 728
Points: 204

Hugo wrote: Not sure I got

Hugo wrote:

Not sure I got dragged back to client issues and haven't had a chance to look at if further; got through quite a few examples and realised there were still a ton more. Smile

Looking forward for your posts soon! I took inspiration from you and created a tutorial myself - using :target - not posting the link here (mod's will call me a spammer) Smile . But Tony has been gracious to give its link in the psuedo-classes list! Do take a look Smile

Regards,
Mihir.

Proprietor - Thoughtfulviewfinder Services
Web Development | Design | Merchandise | Photography
My personal blog: MihirChhatre.com