Add pure CSS Parallax effect (exp)

1 files changed, 85 insertions, 0 deletions

diff --git a/docs/css/spectre-exp.css b/docs/css/spectre-exp.css
index bf5d578..f98d190 100644
--- a/docs/css/spectre-exp.css
+++ b/docs/css/spectre-exp.css
@@ -46,6 +46,91 @@
 .meter:-moz-meter-sub-sub-optimum::-moz-meter-bar {
   background: #e85600;
 }
+.parallax {
+  display: block;
+  height: auto;
+  position: relative;
+  width: auto;
+}
+.parallax .parallax-content {
+  box-shadow: 0 2.5rem 5rem rgba(0, 0, 0, .45);
+  height: auto;
+  -webkit-transform: perspective(600px);
+  transform: perspective(600px);
+  -webkit-transform-style: preserve-3d;
+  transform-style: preserve-3d;
+  transition: all .4s ease;
+  width: 100%;
+}
+.parallax .parallax-content::before {
+  content: "";
+  display: block;
+  height: 100%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 100%;
+}
+.parallax .parallax-top-left {
+  height: 50%;
+  left: 0;
+  position: absolute;
+  top: 0;
+  width: 50%;
+  z-index: 99;
+}
+.parallax .parallax-top-left:hover ~ .parallax-content {
+  -webkit-transform: perspective(600px) rotateX(3deg) rotateY(-3deg);
+  transform: perspective(600px) rotateX(3deg) rotateY(-3deg);
+}
+.parallax .parallax-top-left:hover ~ .parallax-content::before {
+  background: linear-gradient(135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+}
+.parallax .parallax-top-right {
+  height: 50%;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 50%;
+  z-index: 99;
+}
+.parallax .parallax-top-right:hover ~ .parallax-content {
+  -webkit-transform: perspective(600px) rotateX(3deg) rotateY(3deg);
+  transform: perspective(600px) rotateX(3deg) rotateY(3deg);
+}
+.parallax .parallax-top-right:hover ~ .parallax-content::before {
+  background: linear-gradient(-135deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+}
+.parallax .parallax-bottom-left {
+  bottom: 0;
+  height: 50%;
+  left: 0;
+  position: absolute;
+  width: 50%;
+  z-index: 99;
+}
+.parallax .parallax-bottom-left:hover ~ .parallax-content {
+  -webkit-transform: perspective(600px) rotateX(-3deg) rotateY(-3deg);
+  transform: perspective(600px) rotateX(-3deg) rotateY(-3deg);
+}
+.parallax .parallax-bottom-left:hover ~ .parallax-content::before {
+  background: linear-gradient(45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+}
+.parallax .parallax-bottom-right {
+  bottom: 0;
+  height: 50%;
+  position: absolute;
+  right: 0;
+  width: 50%;
+  z-index: 99;
+}
+.parallax .parallax-bottom-right:hover ~ .parallax-content {
+  -webkit-transform: perspective(600px) rotateX(-3deg) rotateY(3deg);
+  transform: perspective(600px) rotateX(-3deg) rotateY(3deg);
+}
+.parallax .parallax-bottom-right:hover ~ .parallax-content::before {
+  background: linear-gradient(-45deg, rgba(255, 255, 255, .25) 0%, rgba(255, 255, 255, 0) 50%);
+}
 .progress {
   -webkit-appearance: none;
   -moz-appearance: none;