Initial commit - slide_in working

2026-08-18 13:52:00 +00:00 · 2017-02-17 01:33:51 +05:30
parent f87837a563
commit 7c5d96d3fa
2 changed files with 184 additions and 0 deletions
@@ -0,0 +1,162 @@
+*,*::before,*::after
+{
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+/*
+** All animation keyframes definitions here
+*/
+
+@-webkit-keyframes slide-in-from-right {
+    from { 
+        -webkit-transform: translateX(120%);
+        -ms-transform: translateX(120%);
+        -o-transform: translateX(120%);
+        transform: translateX(120%);
+    }
+    to {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+@-o-keyframes slide-in-from-right {
+    from { 
+        -webkit-transform: translateX(120%);
+        -ms-transform: translateX(120%);
+        -o-transform: translateX(120%);
+        transform: translateX(120%);
+    }
+    to {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+@-moz-keyframes slide-in-from-right {
+    from { 
+        -webkit-transform: translateX(120%);
+        -ms-transform: translateX(120%);
+        -o-transform: translateX(120%);
+        transform: translateX(120%);
+    }
+    to {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+@keyframes slide-in-from-right {
+    from { 
+        -webkit-transform: translateX(120%);
+        -ms-transform: translateX(120%);
+        -o-transform: translateX(120%);
+        transform: translateX(120%);
+    }
+    to {
+        -webkit-transform: translateX(0);
+        -ms-transform: translateX(0);
+        -o-transform: translateX(0);
+        transform: translateX(0);
+    }
+}
+
+/*
+** Keyframe definition ends here
+*/
+
+body
+{
+    overflow-x: hidden;
+}
+
+.slide-container
+{
+    position: absolute;
+
+    bottom: 2em;
+    right: 2em;
+
+    width: 20em;
+    height: 15em;
+}
+
+.slide
+{
+    position: relative;
+
+    width: 100%;
+    height: 100%;
+    
+    box-shadow: 0 0 3px rgba(0,0,0,.6);
+    padding: 1em;
+    
+    -webkit-animation: slide-in-from-right 1.5s;
+    -o-animation: slide-in-from-right 1.5s;
+    animation: slide-in-from-right 1.5s;
+}
+
+.slide-text
+{
+    font-family: sans-serif;
+    font-size: 1em;
+    color: rgb(50,50,50);
+
+    width: 100%;
+    height: 3em;
+
+    padding: 0.25em .25em;
+}
+
+.highlight
+{
+    font-size: 1.2em;
+}
+
+.quote::before,.quote::after
+{
+    content: "'";
+    width: 1em;
+    height: 1em;
+}
+
+.slide-img {
+  width: 100%;
+  height: 10em;
+
+  position: relative;
+}
+
+img {
+  display: block;
+  max-width: 100%;
+  max-height: 100%;
+  width: auto;
+  height: auto;
+
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  -webkit-transform: translate(-50%, -50%);
+  -ms-transform: translate(-50%, -50%);
+  -o-transform: translate(-50%, -50%);
+  transform: translate(-50%, -50%);
+}
+
+.slide-close-btn
+{
+    position: absolute;
+    top: 0;
+    right: 0;
+    
+    padding: .375em .5em;
+    background-color: rgba(255,255,255,0.5);
+
+    font-family: sans-serif;
+    font-size: .85em;
+}
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Fly-in Demo</title>
+    <link rel="stylesheet" type="text/css" href="index.css">
+</head>
+<body>
+    
+    <div class="slide-container">
+        <div class="slide">
+            <div class="slide-text">
+                Are you looking for <span class="highlight quote">White dresses</span>?
+            </div>
+            <div class="slide-img">
+                <img src="images/n1.jpg">
+            </div>
+            <div class="slide-close-btn">X</div>
+        </div>
+    </div>
+</body>
+</html>