Archiv der Kategorie ‘css3‘

 
 

ZTXT 3.2 (coming soon)

I’ve been working on the ZTXT code editor for over two years now and its really come a long way. See the below link for how to install and take a look at this youtube video demoing the prerelease:

(demo video)


(download ide)

https://github.com/ZevanRosser/ztxt/

(intsallation instructions)

https://github.com/ZevanRosser/ztxt/

04. January 2014 | ActionScript, canvas, chrome, css3, hacks, html, html5, jquery, snippets, video, webkit | Comments (3)

Webkit CSS3 Arm

CSS3 is great. I look forward to a time when we don’t need to use -webkit -moz -o etc…

Note, this is webkit only so use chrome, safari, mobile safari or some other webkit browser at supports 3d transformations.

Here’s the code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title></title>
    <style>
      div{
        position : absolute;
        width : 100px;
        height : 20px;
        left : 20%;
        top : 50%;
        background-color : #7e9fc2;
        -webkit-transform : rotateZ(45deg) scale3d(0.9,0.9,1);
        -webkit-transform-origin : 0px 10px;
        -webkit-animation : rotate 3s infinite linear;
        -webkit-box-shadow : 0px 0px 10px 5px rgba(0,0,0,0.2);
      }
 
      div div{
        left : 100px; 
        top :0px;
      }
 
      @-webkit-keyframes rotate{
        from {
          -webkit-transform : rotateZ(0deg) scale3d(0.9,0.9,1);
        } 
        to {
          -webkit-transform : rotateZ(360deg) scale3d(0.9,0.9,1);
        } 
      }
    </style>
  </head>
  <body>
    <div>
      <div>
        <div>
          <div>
          </div>
        </div>
      </div>
    </div> 
  </body>
</html>

I use all 3d transformations here so that it gets hardware accelerated on the iphone/ipad.

10. March 2012 | css3, html, html5, webkit | Comments (0)

-webkit-transform : Use 3D for 2D

My students are often surprised when I show them web app demos for the iphone. They simply weren’t aware that you could use SVG or webkit-transform/transition to get some really smooth running interactive animation and graphics.

I’ve been wanting to post an intermediate level example on this site for awhile but haven’t gotten around to it until now.

This will only work in a webkit browser like chrome, safari/safari mobile etc…

Den ganzen Beitrag lesen…

15. June 2011 | css3, html5, javascript, jquery, misc, snippets, Uncategorized, webkit | Comments (3)

« Ältere Beiträge