Todo 3D

Diseño / Inspiracional / Todo 3D — No Comments
23
Jun 09

3d graffiti ‘Complex’

3d graffiti

I was inspired by twisted metal and spilled fuel on the road – the force behind the crash was the type of energy that I always want to inject into my 3d graff work.

View Original Article Creattica

Desarrollo / Todo 3D — No Comments
22
Jun 09

Fun with 3D CSS and video

How about starting the week with something fun. Zach Stronaut has been having fun with 3D effects via CSS such as his isocube above, which is brought to you with simple HTML (including a video tag for a playing video on the surface!) and some CSS like this:

PLAIN TEXT
CSS:

  1.  
  2. .face {
  3.     position: absolute;
  4.     width: 200px;
  5.     height: 200px;
  6.     overflow: hidden;
  7.     font-family: monospace;
  8.     font-size: 24px;
  9. }
  10.  
  11. .top {
  12.     top: 0;
  13.     left: 89px;
  14.     background: #fff;
  15.     color: #999;
  16.     -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  17.     -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  18. }
  19.  
  20. .left {
  21.     top: 155px;
  22.     left: 0;
  23.     background: #999;
  24.     color: #333;
  25.     -webkit-transform: rotate(15deg) skew(15deg, 15deg);
  26.     -moz-transform: rotate(15deg) skew(15deg, 15deg);
  27. }
  28.  
  29. .right {
  30.     top: 155px;
  31.     left: 178px;
  32.     background: #ccc;
  33.     color: #666;
  34.     -webkit-transform: rotate(-15deg) skew(-15deg, -15deg);
  35.     -moz-transform: rotate(-15deg) skew(-15deg, -15deg);
  36. }
  37.  
  38. .shadow {
  39.     top: 310px;
  40.     left: -89px;
  41.     background: black;
  42.     opacity: 0.5;
  43.     -webkit-transform: rotate(-45deg) skew(15deg, 15deg);
  44.     -moz-transform: rotate(-45deg) skew(15deg, 15deg);
  45. }
  46.  

Chris Blizzard posted his Open Video Conf talk on connecting HTML5 video showcasing the great demos of Paul Rouget :)

View Original Article

Blogged with the Flock Browser