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
 
[zilla_button url=”http://www.clicktorelease.com/code/css3dclouds/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

2. Cubic-Bezier

cubic-bezier_com
 
[zilla_button url=”http://cubic-bezier.com/#.04,.74,.79,.22″ style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

3. Clock

andrew-hoyer-clock
 
[zilla_button url=”http://andrew-hoyer.com/experiments/clock/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

4. Wave

hakim_se_experiments_html5_wave_03
 
[zilla_button url=”http://hakim.se/experiments/html5/wave/03/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

5. Experimental CSS3 Animations

tympanus_net_Development_ImageTransitions_index3_html
 
[zilla_button url=”http://tympanus.net/Development/ImageTransitions/index3.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

6. 3D City

cubiq_org_dropbox_3dcity_index2_html
 
[zilla_button url=”http://cubiq.org/dropbox/3dcity/index2.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

7. CSS3 Animation : Why not Zoidberg?

beta_theexpressiveweb_com
 
[zilla_button url=”http://www.cssplay.co.uk/menu/css3-animation.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

8. Windows 7 Start Menus

sekaratmutlak_blogspot_ro_2011_11_pure-css3-windows7-start-menu_html
 
[zilla_button url=”http://sekaratmutlak.blogspot.ro/2011/11/pure-css3-windows7-start-menu.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

9. Every Second One Hour of Video

onehourpersecond_com
 
[zilla_button url=”http://www.onehourpersecond.com/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

10. CSS3 Patterns

lea_verou_me_css3patterns
 
[zilla_button url=”http://lea.verou.me/css3patterns/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

11. Typography Rain

andrew-hoyer_com_experiments_rain
 
[zilla_button url=”http://andrew-hoyer.com/experiments/rain/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

12. Vlog.it

vlog_it
 
[zilla_button url=”http://vlog.it/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

13. Sudoku Solver

andrew-hoyer_com_experiments_sudoku
 
[zilla_button url=”http://andrew-hoyer.com/experiments/sudoku/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

14. Cursor Monster

lab_simurai_com_monster
 
[zilla_button url=”http://lab.simurai.com/monster/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

15. FlashLight

lab_simurai_com_flashlight
 
[zilla_button url=”http://lab.simurai.com/flashlight/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

16. Lolwut

lolwut
 
[zilla_button url=”http://flashtml5.com/labs/lolwut/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

17. Walking

andrew-hoyer_com_experiments_walking
 
[zilla_button url=”http://andrew-hoyer.com/experiments/walking/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

18. Solar System

neography_com_experiment_circles_solarsystem
 
[zilla_button url=”http://neography.com/experiment/circles/solarsystem/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

19. CSS3 Classic Train

sekaratmutlak_blogspot_ro_2011_12_pure-css3-classic-train_html
 
[zilla_button url=”http://sekaratmutlak.blogspot.ro/2011/12/pure-css3-classic-train.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

20. Practicals

hakim_se_experiments_html5_particles
 
[zilla_button url=”http://hakim.se/experiments/html5/particles/01/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

21. Homer

developer_mozilla_org_en-US_demos_detail_pure-css3-homer_launch
 
[zilla_button url=”https://developer.mozilla.org/en-US/demos/detail/pure-css3-homer/launch” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

22. Fractals

andrew-hoyer_com_experiments_fractals
 
[zilla_button url=”http://andrew-hoyer.com/experiments/fractals/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

23. Kinect, CSS3 & Animatable

developer_mozilla_org_en-US_demos_detail_css-tricks_launch
 
[zilla_button url=”https://developer.mozilla.org/en-US/demos/detail/css-tricks/launch” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

24. 3d Animations Using Pure CSS3

3d_animation_css3
 
[zilla_button url=”http://demo.marcofolio.net/3d_animation_css3/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

25. Linjer

lab_hakim_se_linjer
 
[zilla_button url=”http://lab.hakim.se/linjer/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

26. HTML5 Interactive Infographic

lab_4muladesign_com_dribbble
 
[zilla_button url=”http://lab.4muladesign.com/dribbble/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

27. The Cloth Simulation

andrew-hoyer_com_experiments_cloth_simulation
 
[zilla_button url=”http://andrew-hoyer.com/experiments/cloth/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

28. 3D CSS Cube

cube-3d
 
[zilla_button url=”http://www.paulrhayes.com/experiments/cube-3d/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

29. TiltShift Text

lab_simurai_com_tilt-shift_text
 
[zilla_button url=”http://lab.simurai.com/tilt-shift/” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

30. Morphing Cubes

morphing-cubes
 
[zilla_button url=”http://www.webkit.org/blog-files/3d-transforms/morphing-cubes.html” style=”red” size=”medium” type=”square” target=”_blank”] Source [/zilla_button]
 

[zilla_alert style=”grey”] Visit the CSS Properties Index to stay abreast of the latest CSS updates. [/zilla_alert]

Get Our Feeds Delivered To Your Inbox

Like This Post

  1 Like

AUTHOR INFO

Tech Gaming Geek trapped inside Tron.

Feedback 2 Comments

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


Leave a Reply