30 CSS3 and HTML5 Creative Experiments


CSS :THE WORLD WIDE WEB LANGUAGE

CSS is a language which is continually growing and expanding whilst building upon itself and creating new possibilities by which designers and developers can utilize to produce and create some extraordinary effects when it comes to web design.


With the new web standards and CSS3 supporting media-specific style sheets as well as many other elements across all browsers ( save IE *cough dIE* ) , such as aural devices, printers, braille devices, handheld devices, etc., the list of CSS properties, values and styles are constantly evolving.

CSS USER INTERFACE

With the introduction of Media Queries, which now extend the functionality of media types by allowing more precise labeling of style sheets, presentations can be tailored to a specific range of output devices without changing the content itself.

css3

CSS is the primary language for describing the rendering of HTML and XML documents on screen, on paper, in speech, etc. It uses various selectors, properties and values to style basic user interface elements within a document. This specification describes those user interface related selectors, properties and values that are proposed for CSS level 3 to style HTML and XML, including XHTML and XForms.

PRESENTATION AND STRUCTURE

Prior to CSS, nearly all of the presentation attributes of HTML documents were contained within the HTML markup, such as: all font colors, background styles, element alignments, borders and sizes had to be explicitly described, often repeatedly, within the HTML.Document authors who wanted to assign such typographic characteristics to, say: all h2 headings had to repeat HTML presentation markup for each occurrence of each particular heading type.

This made documents more complex, larger, and more difficult to maintain. CSS allows the separation of presentation from structure. With CSS we can now define color, font, text alignment, size, borders, spacing, layout and many other typographic characteristics, and can do so independently for on-screen and printed views.

CSS also defines non-visual styles such as the speed and emphasis with which text is read out by aural text readers. CSS now allows authors to move much of that information to another file, the style sheet, resulting in considerably simpler HTML.

MEETING DESIGNERS DEMANDS

Style sheets have existed in one form or another since the beginnings of SGML in the 1980s. Cascading Style Sheets were developed as a means for creating a consistent approach to providing style information for web documents.

As HTML grew, it has come to encompass a wider variety of stylistic capabilities to meet the demands of web developers. This evolution grants designers more control over site appearance, but at the cost of more complex HTML.

html5

Despite the availability of CSS-capable browsers making CSS a viable technology, the adoption of CSS is still held back by designers’ struggles with browsers, incorrect CSS implementation and patchy CSS support. Even today, these problems continue to make the business of CSS design more complex and costly than it was intended to be, and cross-browser testing remains a necessity.

In this article, we wanted to present users with some old & new CSS & HTML techniques which were deemed extraordinary during the advent of CSS, and some new techniques which may offer a point of inspiration for users to go out and venture on their own personal project.

Because not all browsers correctly parse CSS code properly, coding techniques known as CSS hacks can either filter specific browsers or target specific browsers (generally both are known as CSS filters), by which to render many of the CSS experiments below ( and we use the term experiment due to the fact that some of these techniques are not yet supported by all browsers ); thus we recommend that you view them in web-kit browsers such as Safari & Chrome, ( a few may work in Firefox but many of them wont ).

Nevertheless, we hope you derive some personal inspiration for producing your very own CSS masterpiece.

1. CSS3D Clouds

clicktorelease_com_code_css3dclouds
 
Source
 

2. Cubic-Bezier

cubic-bezier_com
 
Source
 

3. Clock

andrew-hoyer-clock
 
Source
 

4. Wave

hakim_se_experiments_html5_wave_03
 
Source
 

5. Experimental CSS3 Animations

tympanus_net_Development_ImageTransitions_index3_html
 
Source
 

6. 3D City

cubiq_org_dropbox_3dcity_index2_html
 
Source
 

7. CSS3 Animation : Why not Zoidberg?

beta_theexpressiveweb_com
 
Source
 

8. Windows 7 Start Menus

sekaratmutlak_blogspot_ro_2011_11_pure-css3-windows7-start-menu_html
 
Source
 

9. Every Second One Hour of Video

onehourpersecond_com
 
Source
 

10. CSS3 Patterns

lea_verou_me_css3patterns
 
Source
 

11. Typography Rain

andrew-hoyer_com_experiments_rain
 
Source
 

12. Vlog.it

vlog_it
 
Source
 

13. Sudoku Solver

andrew-hoyer_com_experiments_sudoku
 
Source
 

14. Cursor Monster

lab_simurai_com_monster
 
Source
 

15. FlashLight

lab_simurai_com_flashlight
 
Source
 

16. Lolwut

lolwut
 
Source
 

17. Walking

andrew-hoyer_com_experiments_walking
 
Source
 

18. Solar System

neography_com_experiment_circles_solarsystem
 
Source
 

19. CSS3 Classic Train

sekaratmutlak_blogspot_ro_2011_12_pure-css3-classic-train_html
 
Source
 

20. Practicals

hakim_se_experiments_html5_particles
 
Source
 

21. Homer

developer_mozilla_org_en-US_demos_detail_pure-css3-homer_launch
 
Source
 

22. Fractals

andrew-hoyer_com_experiments_fractals
 
Source
 

23. Kinect, CSS3 & Animatable

developer_mozilla_org_en-US_demos_detail_css-tricks_launch
 
Source
 

24. 3d Animations Using Pure CSS3

3d_animation_css3
 
Source
 

25. Linjer

lab_hakim_se_linjer
 
Source
 

26. HTML5 Interactive Infographic

alt="lab_4muladesign_com_dribbble" width="625" height="351" />
 
Source
 

27. The Cloth Simulation

andrew-hoyer_com_experiments_cloth_simulation
 
Source
 

28. 3D CSS Cube

cube-3d
 
Source
 

29. TiltShift Text

lab_simurai_com_tilt-shift_text
 
Source
 

30. Morphing Cubes

morphing-cubes
 
Source
 

Visit the CSS Properties Index to stay abreast of the latest CSS updates.

Get Our Feeds Delivered To Your Inbox

Like This Post

  1 Like

Feedback 2 Comments

  1. [...] 30 CSS3 and HTML5 Creative Experiments : Dezign Matterz [...]


Leave a Reply