Out of this world CSS examples?

Please paste a link to an out of this world CSS examples.

I would like to see a few, I had a friend and he said there was this guy called code ninja and he designed audio player buttons and everything from complete CSS code only.

Does anyone have any links to plain crazy CSS emaples.


Thanks,
Chris

 

A LOT of the fancy examples, whilst cool, are... well... rubbish that doesn't belong on websites. It's sad, but a good deal of the stuff people do with it simply detracts from what's actually important -- the content. The same way a lot of the artsy fartsy PSD jockey bullshit pisses on websites from orbit, or all the idiotic mouth-breathing halfwit nonsense people crap together with jQuery does.

That said, a LOT of times for simple things, it's really nice. For things like player buttons I like to use webfonts, but enhance them with CSS3 effects to make them prettier.

I generally don't go in for the really fancy stuff, but on my crappy personal page (who's skin still sucks out loud) I've got two interesting usage scenarios where I recreated two vintage 1980's computer monitors -- A Tandy CM-7 and a Commodore 1701 -- as a frame around some java based emulators (for DOS and Commodore 64 respectively).

On these two pages:
http://www.deathshadow.com/pakuPakuLiveC64
http://www.deathshadow.com/pakuPakuLive

The "monitors" are nothing more than nested DIV, generated content, and CSS3. No images involved.

That's about as extreme as I've gotten with it, and that was years ago now. I've really dialed back a lot on such things of late as it's too easy to get so obsessed with looks, you neglect usability and content. I've come to the conclusion that long-term, such things are best used with an eye-dropper, not a paint roller.

 

Wow they are great to be designed by CSS from scratch. Just for referencing, how much time is involved in created something on that level with CSS?

Thanks,
Chris

 

With all the views this thread is getting, it only got one response. Please add some more links!

 

Here's a funky spoiler alert example that uses nothing but css:

https://jsfiddle.net/vtast51c/1/

 

That's awesome! Lol, I love it!

 

5000 Views with 5 reply's. I'm disappointed. PEOPLE POST OUT OF THIS WORLD CSS EXAMPLES

 

i was asked to make this by someone on another forum...

CSS only traffic lights​

Unfortunately, it's rather depressing and may possibly,
depending upon your nature, induce road rage.
​

coothead

 

Maybe it's because those of us who have been around a while are no longer entertained by "out of this world" UIs. We've found that showing off how smart we are is not (usually) beneficial to the site's visitors, and is seldom conducive to inexpensive debugging and maintenance*. Not to mention, if it's as clever as you can make it, it's likely too clever for you to maintain at all.

Learn and use best practice, non-complex markup and presentation. The fancy stuff will dawn on you as your state of knowledge allows. If your UI shows off your ego, you're doing it wrong.

gary

* In a non-trivial web site, yearly maintenance and debugging costs will meet or exceed 2½ times the initial development cost.

 

....and here is another bit of silliness that was made for a forum request...

A radial menu​

I am not really certain who is the more stupid the requester or the creator.

​

coothead

 

That's kind of what I meant by "getting to easily obsessed with looks" -- and there are other concerns too.

The one @qwikad.com included being a good working example of how cool can bite you. It's a halfway decently coded effect, it appears useful... but it also fails miserably on a number of fronts... such as how is that useful to non-mouse users? Neither keyboard navigation or touch has any way to trigger it. These are the types of usability concerns that make those sorts of effects problematic.

The fancier and fancier you get with that sort of stuff, the harder and harder it becomes to maintain usability, and the more and more you are driving the focus of the page away from what's REALLY important -- delivering your CONTENT to as many users as possible in as accessible a manner as possible.

Which is why in a proper web development forum, you're not gonna get a lot of respondents waving their pricks around over the big fancy animated nonsense. You go to some art and design area where the posters are under the DELUSION that they are designers -- when in point of fact they don't know enough about accessibility to be designing jack **** -- that's when you'll see that type of stuff being slapped into everything and promoted all over the place.

... which is why you'll see that type of stuff far more often on sites BY "designers" than you will on sites FOR users. A great example of this is deviantart -- the site is FOR the artsy fartsy types, and many of the artsy fartsy types on there bitch and moan about how non-artsy the site is... but it remains simple because simple is more useful to the people using the site. 99% of what gets posted ON deviant art by "interface designers" being useless bloated rubbish more akin to the type of halfwit trash you see in TV or movies than you'd ever see on a useful computer UI.

... as Microsoft is finding out with their letting the artsy-fartsy types piss all over Win 8 and 10 in a mix of 1997 AOL games and Microsoft Bob style UI design.

 

That's a great point. I guess it depends on your prospective. I guess from a web developer prospective, delivering what the client requests is all that matters. From a web masters prospective, deliver content to your audience with maximum usability. From a graphic designers prospective, probably too much hassle to produce a pure CSS graphic for modern websites as you said focusing on usability.

 

Mate, some of those CSS examples are awesome!

 

Okay, I usually don't do this, but... you used it 4 times, at least. It's "perspective", not "prospective"

 

I thought I was spelling something wrong... I wrote perspective in one and prospective in the other and I'm thinking to myself. Something doesn't look right. I was just to tired that I changed them all over to the wrong one... Thanks.

 

Don't get me wrong, but I thought you could only use the "ID" tag once on a page for a unique purpose and the "class" multiple times? I'm amazed at what you can do with CSS only using un-ordered lists.

 

ID is not a tag, it's an attribute. You can use the ID atttribute as many times as you like, but each time you use it in the markup the VALUE must be different.

In the CSS, you can use it as much as you want... as such this:

<div id="container"> 

<input id="cb" type="checkbox">

<div id="menu"><label for="cb">&#xe800;</label></div>

<ul>
 <li id="a0"><a href="#"><span>&#xe801;</span></a></li>
 <li id="a1"><a href="#"><span>&#xe803;</span></a></li>
 <li id="a2"><a href="#"><span>&#xe802;</span></a></li>
 <li id="a3"><a href="#"><span>&#xe806;</span></a></li>
 <li id="a4"><a href="#"><span>&#xe807;</span></a></li>
 <li id="a5"><a href="#"><span>&#xe805;</span></a></li>
 <li id="a6"><a href="#"><span>&#xe800;</span></a></li>
 <li id="a7"><a href="#"><span>&#xe804;</span></a></li>
</ul>

<div id="circle"></div>

<!-- #container --></div>

Code (markup):

Is valid because the VALUE of all those ID's is unique. Now, if he had two elements set to <div id="circle">, THEN it would be invalid. In the markup he has only one #container, one #circle, one #cb, one #a0, one #a1, etc, etc, etc...

As to the "unique purpose" an ID exists as a target for "for" attributes, you can use it as a target for hash links just like the NAME attribute, it's one of the easiest and fastest ways to hook onto a single element from JavaScript... that you can use it as a CSS selector that trumps all other selectors is just icing on the cake.

 

Thanks, for popping in the full explanation for me.

coothea

 

Is there a difference between the "ID" attribute and the "CLASS"? I'm referring to selectors in CSS.

 

Look at your driver's license. It has and ID number, a name class, birth date class, an address class, restrictions class, &c.. Note that all of the classes may have duplicate values, e.g. there may millions with your same eye color, or bunch even live at the same address while the license number is unique within the state and belongs only to the one person.

Likewise, for a given ID value, it may apply to only a single element within the page, compared to a particular class value that may apply to many elements.