diff options
| author | Patrick Davison <snapwilliam@gmail.com> | 2012-01-29 22:44:14 -0800 |
|---|---|---|
| committer | Patrick Davison <snapwilliam@gmail.com> | 2012-01-29 22:44:14 -0800 |
| commit | af8bcf8c2cb0944c47f028d8022cf2733d261fca (patch) | |
| tree | cf4e0285012a9995ef78722407ad6e0ca892d62a | |
| parent | 22b729d697107fa7e59db509cd9f92e9605e8e02 (diff) | |
| download | pathery-af8bcf8c2cb0944c47f028d8022cf2733d261fca.tar.xz | |
CSS3 animations for notifications.
| -rw-r--r-- | css/page.css | 69 |
1 files changed, 69 insertions, 0 deletions
diff --git a/css/page.css b/css/page.css index 0237797..ef26a0a 100644 --- a/css/page.css +++ b/css/page.css @@ -154,3 +154,72 @@ table.score th { vertical-align: text-bottom;
overflow: hidden;
}
+
+@keyframes notifiAnimate
+{
+0% {top:-200px;}
+50% {height:700px;top:-200px;}
+65% {height:200px;top:200px;}
+80% {height:250px;top:175px;}
+100% {height:200px;top:200px;}
+}
+@-moz-keyframes notifiAnimate /* Firefox */
+{
+0% {top:-200px;}
+50% {height:700px;top:-200px;}
+65% {height:200px;top:200px;}
+80% {height:250px;top:175px;}
+100% {height:200px;top:200px;}
+}
+@-webkit-keyframes notifiAnimate /* Safari and Chrome */
+{
+0% {top:-200px;}
+45% {height:700px;top:-200px;}
+65% {height:180px;top:200px;}
+80% {height:250px;top:175px;}
+100% {height:200px;top:200px;}
+}
+@-o-keyframes notifiAnimate /* Opera */
+{
+0% {top:-200px;}
+45% {height:700px;top:-200px;}
+65% {height:180px;top:200px;}
+80% {height:250px;top:175px;}
+100% {height:200px;top:200px;}
+}
+
+.notification
+{
+ animation: notifiAnimate 1s;
+ -moz-animation: notifiAnimate 1s; /* Firefox */
+ -webkit-animation: notifiAnimate 1s; /* Safari and Chrome */
+ -o-animation: notifiAnimate 1s; /* Opera */
+ position:fixed;
+ left:50%;
+ margin-left: -150px;
+ top:200px;
+ text-align: center;
+ width:300px;
+ height:200px;
+ color: #ddd;
+ background-color: #334;
+ padding: 1px 1px;
+ border-radius: 5px;
+ text-decoration: none;
+ border: 2px solid #446;
+ box-shadow: 0 0 3px #445;
+
+}
+
+.name_color_select span
+{
+ background-color:#111;
+ margin-right:15px;
+}
+.name_color_select span:hover
+{
+ background-color:#356;
+ cursor:default;
+}
+
+
|