]> git.scottworley.com Git - picsort/commitdiff
projects / picsort / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: 2d325f4)
Add a message-displaying area
authorScott Worley <scottworley@scottworley.com>
Fri, 28 Feb 2014 07:08:22 +0000 (23:08 -0800)
committerScott Worley <scottworley@scottworley.com>
Fri, 28 Feb 2014 07:10:45 +0000 (23:10 -0800)
picsorter.css patch | blob | blame | history
picsorter.html patch | blob | blame | history

diff --git a/picsorter.css b/picsorter.css
index d6cd666969aed65d0fcb7c6771921b6d3855f458..b99fc9e334a5be1cb9cdbc27a0eb45d187ad53bd 100644 (file)
--- a/picsorter.css
+++ b/picsorter.css
@@ -1,3 +1,32 @@
+@-webkit-keyframes fadeOut {
+  from { opacity: 1; }
+    to { opacity: 0; }
+}
+@keyframes fadeOut {
+  from { opacity: 1; }
+    to { opacity: 0; }
+}
+
+#message {
+  position: fixed;
+  font-size: 18pt;
+  margin: 2em;
+  border-radius: 10px;
+  padding: .3em;
+  color: white;
+  font-weight: bold;
+  font-family: sans-serif;
+  background-color: rgba(200,200,200,0.5);
+}
+
+.fade {
+  opacity: 0;
+  animation-duration: 2s;
+  animation-name: fadeOut;
+  -webkit-animation-duration: 2s;
+  -webkit-animation-name: fadeOut;
+}
+
 .fit_view {
   max-width: 100%;
   max-height: 100%;
 .fit_view {
   max-width: 100%;
   max-height: 100%;
diff --git a/picsorter.html b/picsorter.html
index a6bbaa9bc21065dce4290e10dc3032b42871233e..f60906069b1be2e157c6142fa8b2392148afa62f 100644 (file)
--- a/picsorter.html
+++ b/picsorter.html
@@ -7,6 +7,7 @@
     <script src="picsorter.js"></script>
   </head>
   <body>
     <script src="picsorter.js"></script>
   </head>
   <body>
+    <div id="message" class="fade">Welcome to picsorter</div>
     <img id="pic"></img>
   </body>
 </html>
     <img id="pic"></img>
   </body>
 </html>
Ad hoc personal picture sorter