RubyGems - cyberweb - Versions diffs - 0.4.174 → 0.5.225 - Mend

cyberweb 0.4.174 → 0.5.225

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of cyberweb might be problematic. Click here for more details.

Files changed (625) hide show

data/examples/css/css_typewriter_example/css_typewriter_example.html ADDED Viewed

@@ -0,0 +1,226 @@
+<html>
+<head>
+<style>
+.the_CSS_for_the_typewriter {
+  --blue: #5c86ff;
+  --blue-dark: #275efe;
+  --key: #fff;
+  --paper_for_the_typewriter: #eef0fd;
+  --text: #d3d4ec;
+  --tool: #fbc56c;
+  --duration: 3s;
+  position: relative;
+  animation: bounce var(--duration) linear infinite;
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter {
+  width: 92px;
+  height: 20px;
+  border-radius: 3px;
+  margin-left: 14px;
+  transform: translateX(14px);
+  background: linear-gradient(var(--blue), var(--blue-dark));
+  animation: slide_of_the_typewriter var(--duration) ease infinite;
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter:before,
+.the_CSS_for_the_typewriter .slide_of_the_typewriter:after,
+.the_CSS_for_the_typewriter .slide_of_the_typewriter i:before {
+  content: '';
+  position: absolute;
+  background: var(--tool);
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter:before {
+  width: 2px;
+  height: 8px;
+  top: 6px;
+  left: 100%;
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter:after {
+  left:   94px;
+  top:    3px;
+  height: 14px;
+  width:   6px;
+  border-radius: 3px;
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter i {
+  display: block;
+  position: absolute;
+  right: 100%;
+  width: 6px;
+  height: 4px;
+  top: 4px;
+  background: var(--tool);
+}
+.the_CSS_for_the_typewriter .slide_of_the_typewriter i:before {
+  right: 100%;
+  top: -2px;
+  width: 4px;
+  border-radius: 2px;
+  height: 14px;
+}
+.the_CSS_for_the_typewriter .paper_for_the_typewriter {
+  position: absolute;
+  left: 24px;
+  top: -26px;
+  width: 40px;
+  height: 46px;
+  border-radius: 5px;
+  background: var(--paper_for_the_typewriter);
+  transform: translateY(46px);
+  animation: paper_for_the_typewriter var(--duration) linear infinite;
+}
+.the_CSS_for_the_typewriter .paper_for_the_typewriter:before {
+  content: '';
+  position: absolute;
+  left: 6px;
+  right: 6px;
+  top: 7px;
+  border-radius: 2px;
+  height: 4px;
+  transform: scaleY(0.8);
+  background: var(--text);
+  box-shadow: 0 12px 0 var(--text), 0 24px 0 var(--text), 0 36px 0 var(--text);
+}
+.the_CSS_for_the_typewriter .keyboard_of_the_typewriter {
+  width: 120px;
+  height: 56px;
+  margin-top: -10px;
+  z-index: 1;
+  position: relative;
+}
+.the_CSS_for_the_typewriter .keyboard_of_the_typewriter:before,
+.the_CSS_for_the_typewriter .keyboard_of_the_typewriter:after {
+  content: '';
+  position: absolute;
+}
+.the_CSS_for_the_typewriter .keyboard_of_the_typewriter:before {
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 7px;
+  background: linear-gradient(135deg, var(--blue), var(--blue-dark));
+  transform: perspective(10px) rotateX(2deg);
+  transform-origin: 50% 100%;
+}
+.the_CSS_for_the_typewriter .keyboard_of_the_typewriter:after {
+  left: 2px;
+  top: 25px;
+  width: 11px;
+  height: 4px;
+  border-radius: 2px;
+  box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+  animation: keyboard_of_the_typewriter var(--duration) linear infinite;
+}
+@keyframes bounce {
+  85%, 92%, 100% {
+    transform: translateY(0);
+  }
+  89% {
+    transform: translateY(-4px);
+  }
+  95% {
+    transform: translateY(2px);
+  }
+}
+@keyframes slide_of_the_typewriter {
+  5% {
+    transform: translateX(14px);
+  }
+  15%, 30% {
+    transform: translateX(6px);
+  }
+  40%, 55% {
+    transform: translateX(0);
+  }
+  65%, 70% {
+    transform: translateX(-4px);
+  }
+  80%, 89% {
+    transform: translateX(-12px);
+  }
+  100% {
+    transform: translateX(14px);
+  }
+}
+@keyframes paper_for_the_typewriter {
+  5% {
+    transform: translateY(46px);
+  }
+  20%, 30% {
+    transform: translateY(34px);
+  }
+  40%, 55% {
+    transform: translateY(22px);
+  }
+  65%, 70% {
+    transform: translateY(10px);
+  }
+  80%, 85% {
+    transform: translateY(0);
+  }
+  92%, 100% {
+    transform: translateY(46px);
+  }
+}
+@keyframes keyboard_of_the_typewriter {
+  5%, 12%, 21%, 30%, 39%, 48%, 57%, 66%, 75%, 84% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  9% {
+   box-shadow: 15px 2px 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  18% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 2px 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  27% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 12px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  36% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 12px 0 var(--key), 60px 12px 0 var(--key), 68px 12px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  45% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 2px 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  54% {
+   box-shadow: 15px 0 0 var(--key), 30px 2px 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  63% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 12px 0 var(--key);
+ }
+  72% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 2px 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 10px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+  81% {
+   box-shadow: 15px 0 0 var(--key), 30px 0 0 var(--key), 45px 0 0 var(--key), 60px 0 0 var(--key), 75px 0 0 var(--key), 90px 0 0 var(--key), 22px 10px 0 var(--key), 37px 12px 0 var(--key), 52px 10px 0 var(--key), 60px 10px 0 var(--key), 68px 10px 0 var(--key), 83px 10px 0 var(--key);
+ }
+}
+ html {
+  box-sizing: border-box;
+  -webkit-font-smoothing: antialiased;
+}
+ * {
+  box-sizing: inherit;
+}
+ *:before, *:after {
+  box-sizing: inherit;
+}
+body {
+  min-height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background: #fff;
+}
+</style>
+</head>
+<div class="the_CSS_for_the_typewriter">
+  <div class="slide_of_the_typewriter"></div>
+  <div class="paper_for_the_typewriter"></div>
+  <div class="keyboard_of_the_typewriter"></div>
+</div>
+</html>

data/examples/css/cyberweb_animated_logo/cyberweb_animated_logo.html ADDED Viewed

@@ -0,0 +1,179 @@
+<html>
+<head>
+<title>CSS Cyberweb animated logo (a CSS-shaded cube)</title>
+<style>
+body, html {
+  height: 100%;
+  color: #fff;
+}
+body {
+  font: bold 90%/1.2 Arial;
+  perspective: 500px;
+  background: #000;
+  text-align: center;
+}
+/* the cube */
+.cube {
+  position: absolute;
+  top:  25%;
+  left: 48%;
+  margin-left: -150px;
+  margin-top:  -150px;
+  width:       100px;
+  height:      100px;
+  line-height: 100px;
+  text-align:  center;
+  transform-style: preserve-3d;
+  transform: translateZ(-100px);
+  transition: transform 1s;
+}
+.face {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: #fff;
+  background-position: 0 100%;
+  background-size: 100% 400%;
+  backface-visibility: hidden;
+  transition: background-position 1s;
+  font-size: 600%;
+  color: #000;
+}
+/* transform the faces and use a big grad for shading */
+.face:first-child {
+  transform: rotateX(90deg) translateY(50%) rotateX(-90deg);
+  background-image: linear-gradient(rgba(0,0,0,1) 10%, rgba(0,0,0,0) 66%);
+}
+.face:last-child {
+  transform: translateY(50%) rotateX(-90deg) ;
+  background-image: linear-gradient(rgba(0,0,0,0) 33%, rgba(0,0,0,1) 90%);
+}
+/* some test candidates */
+#red1 {
+  left: 60px;
+}
+#red1 .face {
+  background-color: #c33;
+}
+#green2 {
+  left: 180px;
+  z-index: 1;
+}
+#green2 .face {
+  background-color: #ad3;
+}
+#blue3 {
+  left: 300px;
+}
+#blue3 .face {
+  background-color: #3ac;
+}
+#steelblue4 {
+  left: 420px;
+}
+#steelblue4 .face {
+  background-color: steelblue;
+}
+#tomato5 {
+  left: 540px;
+}
+#tomato5 .face {
+  background-color: steelblue;
+}
+#seagreen6 {
+  left: 660px;
+}
+#seagreen6 .face {
+  background-color: seagreen;
+}
+#mediumspringgreen7 {
+  left: 780px;
+}
+#mediumspringgreen7 .face {
+  background-color: mediumspringgreen;
+}
+/* use the checkbox to toggle manual / autoplay */
+/* auto-play */
+#manual:not(:checked) ~ .cube {
+  animation: rotate 1s alternate infinite ease-in-out;
+}
+#manual:not(:checked) ~ .cube .face {
+  animation: shade 1s alternate infinite ease-in-out;
+}
+@keyframes rotate {
+  to { transform: translateZ(-100px) rotateX(90deg); }
+}
+@keyframes shade {
+  to { background-position: 0 0 }
+}
+/* hover to animate */
+#manual:checked ~ .cube:hover {
+  transform: translateZ(-100px) rotateX(90deg);
+}
+#manual:checked ~ .cube:hover > .face:first-child,
+  #manual:checked ~ .cube:hover > .face:last-child {
+    background-position: 0 0
+}
+</style>
+</head>
+<body>
+<input id="manual" type="checkbox" checked hidden>
+<div class="cube" id="red1">
+  <div class="face">C</div>
+  <div class="face">C</div>
+</div>
+<div class="cube" id="green2">
+  <div class="face">Y</div>
+  <div class="face">Y</div>
+</div>
+<div class="cube" id="blue3">
+  <div class="face">B</div>
+  <div class="face">B</div>
+</div>
+<div class="cube" id="steelblue4">
+  <div class="face">E</div>
+  <div class="face">E</div>
+</div>
+<div class="cube" id="tomato5">
+  <div class="face">R</div>
+  <div class="face">R</div>
+</div>
+<div class="cube" id="seagreen6">
+  <div class="face">W</div>
+  <div class="face">W</div>
+</div>
+<div class="cube" id="mediumspringgreen7">
+  <div class="face">E</div>
+  <div class="face">E</div>
+</div>
+<div class="cube" id="blue">
+  <div class="face">B</div>
+  <div class="face">B</div>
+</div>
+</body>
+</html>