inserindo duas propriedades de css columns

tableless · Mar 25, 2012 · 0ebc464 · 0ebc464
1 parent 027511f
commit 0ebc464
Show file tree

Hide file tree

Showing 8 changed files with 47 additions and 27 deletions.
diff --git a/css3-columns.html b/css3-columns.html
@@ -19,6 +19,8 @@
 			-moz-column-width: 200px; 
 			-webkit-column-width: 200px; 
 
+			-webkit-column-gap:50px;
+			-webkit-column-rule:1px solid black;
 
 			}
 	</style>

diff --git a/css3-shadow.html b/css3-shadow.html
@@ -17,8 +17,8 @@
             border:0px solid rgba(0,0,0,1);
             width:300px;
 			height:200px;
-			margin:100px 300px;
-			float:right;
+			margin:100px 0 0 400px;
+
 
 			text-shadow: 10px 10px 14px rgba(0,0,0,1);
 			box-shadow: 10px 10px 14px 20px rgba(0,0,0,0.5);

diff --git a/css3d/cardflip/cardflip.html b/css3d/cardflip/cardflip.html
@@ -5,22 +5,32 @@
 	<meta charset="utf-8">
 	<title>Perspective</title>
 	<style>
+
+@-webkit-keyframes gira {
+  0% {
+
+  }
+}
+
 .geral { 
 	width: 200px;
 	height: 293px;
 	position: relative;
-	-webkit-perspective: 500;
+	-webkit-perspective: 1200;
 	margin:10% auto 0;
+  outline:1px solid red;
 }
 
 .carta {
   width: 100%;
   height: 100%;
+  outline:1px solid orange;
   position: absolute;
   -webkit-transition: -webkit-transform 1s;
+  -webkit-transform-origin:0 0;
 }
 .carta:hover {
-  -webkit-transform: rotateY(-180deg);
+  -webkit-transform: rotateX(-180deg);
 }
 
 .atras{-webkit-transform: rotateY(180deg);}

diff --git a/css3d/index.html b/css3d/index.html
@@ -25,20 +25,11 @@
 	        float:left;
 	        text-align:center;
 	        position:relative;
+            outline:1px solid red;
 	        margin-right:20px;        	
         	-webkit-perspective: 600; 
 	    }
 
-	    .destaque:hover img {
-	        -webkit-transition:0.4s;
-	        -webkit-transform: rotateY(0deg);
-	    }
-	    .destaque:hover article {
-	        background:rgba(255,255,255,1);
-
-	        -webkit-transition:0.4s;
-            -webkit-transform: translateZ(0px) rotateY(0deg);	        
-	    }
 
 	    .destaque img {
 	        width:370px;
@@ -64,6 +55,20 @@
 
 	    }
 
+
+        .destaque:hover img {
+            -webkit-transition:0.4s;
+            -webkit-transform: rotateY(0deg);
+        }
+        .destaque:hover article {
+            background:rgba(255,255,255,1);
+
+            -webkit-transition:0.4s;
+            -webkit-transform: translateZ(0px) rotateY(0deg);           
+        }
+
+
+
 	    article {
 	        display:block; -webkit-box-shadow:0px 0px 40px rgba(0,0,0,0.8);
 	    }

diff --git a/cssanimation.html b/cssanimation.html
@@ -113,7 +113,7 @@
 	margin:35px auto 0;
 	background:black;
 	-webkit-transform: rotate(0deg);
-	-webkit-transform-origin: 10px 10px;
+	-webkit-transform-origin: 0px 0px;
 
 	-moz-transform: rotate(0deg);
 	-moz-transform-origin: 10px 10px;
@@ -127,6 +127,8 @@
 
 }
 
+.pendura:hover {-webkit-animation-play-state:paused;}
+
 	</style>
 </head>
 <body>

diff --git a/lightboxcss/index.html b/lightboxcss/index.html
@@ -30,7 +30,7 @@
 	}
 
 	.overlay:target {
-		opacity:2;
+		opacity:1;
 		z-index:0;
 		-webkit-transform:scale(1);
 	}

diff --git a/multiple-background/index.html b/multiple-background/index.html
@@ -9,16 +9,17 @@
 			width:500px;
 			height:500px;
 			border:1px solid black;
-
-			background-color:red;
 
+			background-color:red;
 
 			background: 
 			url(gradiente-baixo.png) bottom right repeat-X,
 			url(gradiente-esquerda.png) top left repeat-Y,
 			url(gradiente-top.png) top right repeat-X,
 			url(gradiente-direita.png) top right repeat-Y; 
 		}
+
+
 	</style>
 </head>
 <body>

diff --git a/template-layout-css/index.html b/template-layout-css/index.html
@@ -24,18 +24,18 @@
 	margin:auto;
 		background:red;
 		display:
-		    "a    a   a"
-		    ".    .   ." /10px
-			"b    c   e"
-			".    .   ." /10px 
-			"d    d   d"
-			150px * 150px;
+		"a      a      a"
+		".       .       ." /10px
+		"b      c      e"
+		".    .   ." /10px 
+		"d    d   d"
+		150px * 150px;
 		}
 
 	.geral::slot(b) {background:gray;}
 
 	aside.menulateral {
-	    position:b;
+	    position:a;
 	    background:gray;
 	    padding:10px;
 	}
@@ -50,8 +50,8 @@
 	    background:lightgray;
 	}
 
-	header {position:d;}
-	footer {position:a;}
+	header {position:b;}
+	footer {position:d;}
 
 	header, footer {
 		background:purple;