Janet-Lu · August 24, 2016 03:45 · Aug 24, 2016 · Aug 24, 2016 · Aug 24, 2016 · Aug 24, 2016
diff --git a/dabblet.css b/dabblet.css
@@ -6,12 +6,15 @@
     transform-origin: 1.4em 0em;
 }*/
 
+/******************************************************/
+
+/*
 @keyframes elastic-grow {
     from { transform: scale(0); }
     70% {
         transform: scale(1.1);
         animation-timing-function:
-            cubic-bezier(.5,.5,.5,.5); /* Reverse ease */
+            cubic-bezier(.5,.5,.5,.5); 
 
     }
 }
@@ -22,6 +25,20 @@ input:focus + .callout { animation: elastic-grow .5s; }
 
 .callout {transform-origin: 1.4em -.4em; }
 
+*/
+
+
+input:not(:focus) + .callout:not(:hover) {
+	transform: scale(0);
+	transition: .25s transform;
+}
+
+.callout {
+	transition: .5s cubic-bezier(.25,.1,.3,1.5) transform;
+	transform-origin: 1.4em -.4em;
+}
+
+
 
 
 

diff --git a/dabblet.css b/dabblet.css
@@ -9,7 +9,7 @@
 @keyframes elastic-grow {
     from { transform: scale(0); }
     70% {
-        transform: scale(2);
+        transform: scale(1.1);
         animation-timing-function:
             cubic-bezier(.5,.5,.5,.5); /* Reverse ease */
 

diff --git a/dabblet.css b/dabblet.css
@@ -9,9 +9,9 @@
 @keyframes elastic-grow {
     from { transform: scale(0); }
     70% {
-        transform: scale(1.1);
+        transform: scale(2);
         animation-timing-function:
-            cubic-bezier(.1,.25,.66,1.91); /* Reverse ease */
+            cubic-bezier(.5,.5,.5,.5); /* Reverse ease */
 
     }
 }

diff --git a/dabblet.css b/dabblet.css
@@ -0,0 +1,63 @@
+/*input:not(:focus) + .callout {
+    transform: scale(0); /* hid 
+}
+.callout {
+    transition: .5s;
+    transform-origin: 1.4em 0em;
+}*/
+
+@keyframes elastic-grow {
+    from { transform: scale(0); }
+    70% {
+        transform: scale(1.1);
+        animation-timing-function:
+            cubic-bezier(.1,.25,.66,1.91); /* Reverse ease */
+
+    }
+}
+
+input:not(:focus) + .callout { transform: scale(0); }
+
+input:focus + .callout { animation: elastic-grow .5s; }
+
+.callout {transform-origin: 1.4em -.4em; }
+
+
+
+
+/* Styling */
+body {
+	padding: 1.5em;
+	font: 200%/1.6 Baskerville;
+}
+
+input {
+	display: block;
+	padding: 0 .4em;
+	font: inherit;
+}
+
+.callout {	
+	position: absolute;
+	max-width: 14em;
+	padding: .6em .8em;
+	border-radius: .3em;
+	margin: .3em 0 0 -.2em;
+	background: #fed;
+	border: 1px solid rgba(0,0,0,.3);
+	box-shadow: .05em .2em .6em rgba(0,0,0,.2);
+	font-size: 75%;
+}
+
+.callout:before {
+	content: "";
+	position: absolute;
+	top: -.4em;
+	left: 1em;
+	padding: .35em;
+	background: inherit;
+	border: inherit;
+	border-right: 0;
+	border-bottom: 0;
+	transform: rotate(45deg);
+}
diff --git a/dabblet.html b/dabblet.html
@@ -0,0 +1,5 @@
+<label>
+    Your username: <input id="username" />
+    <span class="callout">Only letters, numbers,
+    underscores (_) and hyphens (-) allowed!</span>
+</label>
diff --git a/dabblet.js b/dabblet.js
@@ -0,0 +1 @@
+// alert('Hello world!');
diff --git a/settings.json b/settings.json
@@ -0,0 +1 @@
+{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		{"view":"split-vertical","fontsize":"100","seethrough":"","prefixfree":"1","page":"all"}
No results found