diff --git a/.project b/.project new file mode 100644 index 0000000..960893e --- /dev/null +++ b/.project @@ -0,0 +1,11 @@ + + + css3please + + + + + + + + diff --git a/index.html b/index.html index deef8f6..a207d36 100644 --- a/index.html +++ b/index.html @@ -4,28 +4,28 @@ CSS3 Please! The Cross-Browser CSS3 Rule Generator + + + - - - - + + + + + - -
-
-

- CSS3, please! -

-

- This element will receive inline changes as you edit the CSS rules on the left. Enjoy! -

-
+
+

+ CSS3, please! +

+

+ This element will receive inline changes as you edit the CSS rules on the left. Enjoy! +

- 
 /* -------------------------------------------------------------
       CSS3, Please! The Cross-Browser CSS3 Rule Generator
@@ -71,8 +71,8 @@ 

      -moz-box-shadow: 0px 0px 4px #ffffff; /* FF3.5+ */
   -webkit-box-shadow: 0px 0px 4px #ffffff; /* Saf3.0+, Chrome */
           box-shadow: 0px 0px 4px #ffffff; /* Opera 10.5, IE 9.0 */
-              filter:  progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff'); /* IE6,IE7 */
-          -ms-filter: "progid:DXImageTransform.Microsoft.dropshadow(OffX=0px, OffY=0px, Color='#ffffff')"; /* IE8 */
+
 }
   
/* */
@@ -93,9 +93,9 @@ 

 .box_gradient {
   background-image: -moz-linear-gradient(top, #444444, #999999); /* FF3.6 */
-  background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
-            filter:  progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999'); /* IE6,IE7 */
-        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#444444', endColorstr='#999999')"; /* IE8 */
+  background-image: -webkit-gradient(linear,left bottom,left top,color-stop(0, #444444),color-stop(1, #999999)); /* Saf4+, Chrome */
+
 }
   
/* */
@@ -117,8 +117,8 @@

.box_rgba { background-color: #B4B490; background-color: rgba(180, 180, 144, 0.6); /* FF3+, Saf3+, Opera 10.10+, Chrome */ - filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490'); /* IE6,IE7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr='#99B4B490',endColorstr='#99B4B490')"; /* IE8 */ + } 
/* */
@@ -141,8 +141,10 @@

-moz-transform: rotate(7.5deg); /* FF3.5+ */ -o-transform: rotate(7.5deg); /* Opera 10.5 */ -webkit-transform: rotate(7.5deg); /* Saf3.1+, Chrome */ - filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083); /* IE6,IE7 */ - -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=0.083)"; /* IE8 */ + zoom: 1; + filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104) /* IE6,IE7 */ + -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.9914448613738104, M12=-0.13052619222005157, M21=0.13052619222005157, M22=0.9914448613738104)" /* IE8 */ + } 
/* */
@@ -196,22 +198,11 @@

© 2010; a Paul Irish and Jonathan Neal joint, in association w/ Boaz Sender if you like this, you'll probably also dig yayQuery. <3 - */ - - - -
-/*  
-    __Changelog__
-    2010.03.25: Fixed the gradient flipflop. Fixed fixed positioning bug.
-*/
-
-
-
 
+
diff --git a/javascript/javascript.js b/javascript/javascript.js index 685b1ac..60d70f0 100644 --- a/javascript/javascript.js +++ b/javascript/javascript.js @@ -27,6 +27,36 @@ window.cssMath = { d2r: function (d) { return d / 90; }, + + /* Degrees to Radians */ + d2rad: function (d){ + return (d) * Math.PI / 180; + }, + + /* Radians to Degrees */ + rad2d: function (r) { + return (180*r)/Math.PI + 360; + }, + + /* matrix to IE String */ + m2s: function (M) { + return 'M11=' + M.e(1, 1) + ', M12=' + M.e(1,2) + ', M21=' + M.e(2,1) + ', M22=' + M.e(2,2); + }, + + s2m: function (s) { + + var entries = s.split(','); + var values = new Array(); + + for (var i=0; i 4) { return value; } @@ -165,14 +206,31 @@ window.cssMath = { }, rot: function (value, allValues) { return cssMath.round(cssMath.d2r(value), 3); + } , + + matrix2deg: function (value, allValues) { + + + var M = cssMath.s2m(value); + var asin1 = Math.asin(M.e(2,1)); + var asin2 = Math.asin(M.e(1,2)); + var cos = Math.acos(M.e(1,1)); + + + if (cssMath.areClose(asin1, -asin2) && cssMath.areClose(M.e(1,1),M.e(2,2))) { + return asin1; + } else { + return "NaN"; + } }, - xy2rs : function( value, allValues ,elem){ - var children = $(elem).parent().parent().parent().find('b'), - x = parseInt(children.eq(0).text(),10), - y = parseInt(children.eq(1).text(),10); - console.log( elem, cssMath.xy2rs(x,y) ); - return cssMath.xy2rs(x,y).r; + + deg2matrix: function (value, allValues) { + var num = cssMath.d2rad(value); + + return cssMath.m2s(Matrix.Rotation(num)); } + + } }; @@ -235,13 +293,13 @@ window.generator = { itemValue = ''; if (input) { - value = cssMath.eval[input](value, allValues,elem); + value = cssMath.eval[input](value, allValues); } while (++item < allValues.length) { if (allValues[item].group == group) { if (allValues[item].output) { - itemValue = cssMath.eval[ allValues[item].output ](value, allValues, elem); + itemValue = cssMath.eval[ allValues[item].output ](value, allValues); } else { itemValue = value; } @@ -412,11 +470,3 @@ $('.rule_wrapper .comment a').live('click',function(){ return false; }) - - - - - - - -