Web Development

10 beautiful examples of CSS3 design

CSS3 Transitions

CSS3 Transitions Gallery by AlexandtheWeb demonstrates CSS3 transitions, transform, rotate, border radius, and masking to create this stunning example.

About

Ryan has performed in a broad range of technology support roles for electric-generation utilities, including nuclear power plants, and for the telecommunications industry. He has worked in web development for the restaurant industry and the Federal g...

15 comments
nugaray
nugaray

i need good looking css fonts for my menu links. help

IndianaTux
IndianaTux

I have to echo many of the previous comments. One thing we make sure of with our customer facing site is that anything we add works in all browsers, even though 95% of our traffic is IE. We do not want anyone to be alienated from the site and thus miss out on viewing our product. Bells and whistles are nice, they make your site look current and flashy, but if they get in the way of the core functionality of the site and ability to communicate with your visitors, they are defeating the very purpose for which the site exists.

david_horsman
david_horsman

I agree that this site should have a standard menu in addition to the search bar menu but otherwise it seems to be fairly typical in layout. I actually agree with the loaded up bottom zone and feel that is the appropriate location to offer both the corporate links (a standard?) and smorgasbord pseudo site map (a growing layout option) I am not aware of any of this being a standard. These are user interface (layout) conventions, not standards. I do agree it is unwise to ignore these conventions and frustrate users. In fact, I agree with much of what has been said in the comments, but do not feel it applies to TechRepublic nearly as much as other sites.

david_horsman
david_horsman

It took me quite some time to figure out that a visible top and bottom border with transparent sides and no content would form an hour glass like shape (two triangles pointing to each other). I hadn't used transparent as a border color before. And by adjusting the border widths the triangles change shape. Very clever and flexible.

RJBoudreaux
RJBoudreaux

This gallery is an offshoot of the original post: http://www.techrepublic.com/blog/webmaster/css3-technology-in-action-design-examples/1011?tag=content;blog-list-river From the post: "While CSS3 and HTML5 technologies are still fresh for most organizations, there are many trend-setting web developers who are taking the new tools by storm. This post will highlight several examples which utilize the full potential of CSS3 in delivering excellence in design, look, and feel. The first group includes several projects and experiments by individuals tinkering with CSS3."

fedupwithjunk
fedupwithjunk

I am not disputing the skill or beauty of any design but as an ICT teacher I despair at the slow progress made. Given the number of people involved and the commercial interests, computers / web pages should be 10 times quicker and more reliable than they are. Even Microsoft are guilty of sloppy non standard and inefficient coding. Unfortunately it appears that what something looks like is more important than its functionality! It's almost enough to make me want to change career. Now... back to trying to get Ikea's 3d kitchen designer to work.

sjohnson
sjohnson

The purpose of this site is to communicate an idea or process. And it fails at that goal because the developer of the whistles and bells has forgotten the purpose of every website which is to communicate. If you do not adhere to a standard you will miss the opportunity to get your messge out. The example here is becoming more typical every day. So, as an example, this program is created on a MAC using Safari and then it's published to the world, of which a limited number of people natively can view it. And because more non-Safari users are viewiing the site they will need to navigate to another site to load another web browser, and then close their cutrrent one and navigate back to the site again. I don't see that as a well thought our plan.

NZJester
NZJester

Its all very well for the websites to use stuff like CSS3 as long as it is necessary for the function. But a lot of websites just use all this extra stuff because it is there! Its also ok for those people who have fast internet connections with an unlimited data cap. I have a 20GB per month data cap and if I go over that my connection is slowed down to 64kbps till the start of my next internet month, as this option does not cost me extra in overage charges. They finally just upgraded my local telephone exchange last month to from ADSL to ADSL2+ and the center of town looks a bit of a mess with all the holes dug all over the place as they have been installing fiber optic cables for most of this year around the city. I have so much trouble viewing a lot of websites once I go over my cap due to all the overuse of gimmicky graphical tricks, I hate to think how hard it is for those still on dial-up connections.

jcqs.bchrd
jcqs.bchrd

Just for fun, as I love clocks... the arms position is not realistic. The minute arm should be on the 5 as the second arm is at 59.5 seconds. Obviously the mecanic behind is not properly adjusted....

jdayman
jdayman

Until fairly recently I thought we were making progress toward web standards. While the examples in Ryan's post are quite compelling and beautiful, I think it's a step backward in some ways, when a web site "works best in Chrome" or "only displays correctly in Safari". Is this a problem caused by the web developers, or does the fault lie with the various browser development teams? Can't CSS3 code be implemented in a way that does not make it browser dependant?

todd_dsm
todd_dsm

Functionality is the purpose of any site, but design is what lends to its authenticity. It is the unique character that gives personality and makes the user truly [i]connect[/i] with the site on a personal level.

david_horsman
david_horsman

That is because they don't like to work with other browser development teams (kidding). One could also look at the standards creation process. It essentially stops at the level of documentation you see at W3C. There is no process by which any one feature is broken down further and the exact implementation and behaviors detailed out. Given that CSS3 isn't implemented the way we would like, what remains is the logic of the common denominator. Web developers must adhere to that or have extremely high standards for feature and regression testing across the major browsers.

poldito
poldito

I don't see the point of walking back to the painful past to make progress. We took years getting to some kind of "standards", please don't spoil it with hidden commercial interest behind some beauty (yes, think about that...).

Kent Lion
Kent Lion

Just what we needed, a CSS3 clock...that doesn't work in FireFox or Internet Explorer. Cool! todd_dsm is correct. Unfortunately, most web sites (as well as Microsoft's most recent "improvements" to Office) clearly place "look and feel" over functionality. Take this web page, for example: At the top, I see 5 groups of words or links or buttons that could be menus or tabs or links or combinations thereof. At the bottom are 6 or 7 more, on the right are yet another 5 (or so), some within each other, and scattered all over the page are a great number of individual "in context" links. About the only things I don't see are tabs (but that's just on this page), and a real honest-to-god menu from which you can access everything anyone would want to do on this page. Now I understand that a sometimes reasonable and appropriate wish to have certain menu entries available on every site page, and others only available from some pages, would required 2 menus on a page, or a menu row and a tab row, etc.; however, the enforced requirement to scroll all over a web page (surf) to find something specific only wastes time and causes frustration. That's not functional. A web page is supposed to be a source of information, not a living being. Be honest; the purpose of giving a web page character or personality, without contributing to, or even at the expense of functionality, is to manipulate people (normally to make them do something they wouldn't otherwise do, like buy products, spend - ok, waste - more time on the site, believe lies or distortions, go to other sites...). It is unfortunate that people don't recognize that the stages of growth that apply to a living organism also apply to the things we make. So instead of allowing (e.g.) software to "evolve" to the point where it provides the best functionality and only needs minor improvement as things change (i.e., a "standard"), we change (or create new) for the sake of change (but really to justify a continued need for - e.g. - armies of software developers that are really no longer needed). Of course, to the extent that where something has evolved is pretty much ideal, change for the sake of change leads to things getting worse (devolving?). When life or life forms begin to change for the worse, they die or become extinct. Instead of creating standards, everyone does their own thing (e.g., Linux desktops, web development systems), or undoes the good things they've done (e.g., Microsoft), at the expense of functionality and therefore usefulness. Instead of developing new technologies to a point where they save us time and improve productivity, we have a free-for-all that replaces the old slow way of doing things with fast ways that consume all the time they save unproductively. As jdayman asks below, why can't we standardize.