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

cyberweb 0.4.174 → 0.5.225

Potentially problematic release.

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

Files changed (625) hide show

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

@@ -0,0 +1,441 @@
+<html>
+<head>
+<style>
+@import url("https://fonts.googleapis.com/css?family=PT+Sans+Narrow");
+body {
+  font: 14px/1.5 "PT Sans Narrow", sans-serif;
+  background: #080e24 url(http://neography.com/experiment/circles/solarsystem/bg.jpg) repeat;
+}
+/* Solar System Styles */
+ul.the_solarsystem_navigation_on_the_right {
+  position: relative;
+  list-style: none;
+  -webkit-transition: all 0.09s ease-in;
+  -moz-transition: all 0.09s ease-in;
+  -o-transition: all 0.09s ease-in;
+  transition: all 0.09s ease-in;
+  overflow: hidden;
+  height: 640px;
+}
+ul.the_solarsystem_navigation_on_the_right li {
+  text-indent: -9999px;
+  display: block;
+  position: absolute;
+  border: 2px solid #394057;
+/*  opacity: 0.7;*/
+}
+ul.the_solarsystem_navigation_on_the_right li span {
+  display: block;
+  position: absolute;
+  width: 10px;
+  height: 10px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+}
+ul.the_solarsystem_navigation_on_the_right li.active {
+  border-color: #aa4200;
+}
+ul.the_solarsystem_navigation_on_the_right li.active.sun,
+ul.the_solarsystem_navigation_on_the_right li.active span {
+  -webkit-transform: scale(1.3);
+  -moz-transform: scale(1.3);
+  -o-transform: scale(1.3);
+  transform: scale(1.3);
+}
+ul.the_solarsystem_navigation_on_the_right li.active.sun span,
+ul.the_solarsystem_navigation_on_the_right li.active.earth .moon {
+  border: none;
+  -webkit-box-shadow: none;
+  -moz-box-shadow: none;
+  box-shadow: none;
+}
+ul.the_solarsystem_navigation_on_the_right li.sun {
+  width: 40px;
+  height: 40px;
+  -webkit-border-radius: 20px;
+  -moz-border-radius: 20px;
+  border-radius: 20px;
+  background: #fc3;
+  background-image: -webkit-gradient(
+    linear,
+    left bottom,
+    left top,
+    color-stop(0.22, rgb(204,153,0)),
+    color-stop(1, rgb(255,219,112))
+  );
+  background-image: -moz-linear-gradient(
+    center bottom,
+    rgb(204,153,0) 22%,
+    rgb(255,219,112) 100%
+  );
+  top: 302px;
+  left: 462px;
+  border: none;
+  -webkit-box-shadow: 0 0 50px #c90;
+  -moz-box-shadow: 0 0 50px #c90;
+  box-shadow: 0 0 50px #c90;
+  z-index: 100;
+  -webkit-transition: all 0.2s ease-in;
+  -moz-transition: all 0.2s ease-in;
+  -o-transition: all 0.2s ease-in;
+  transition: all 0.2s ease-in;
+}
+ul.the_solarsystem_navigation_on_the_right li.sun span {
+  width: 60px;
+  height: 60px;
+  -webkit-border-radius: 30px;
+  -moz-border-radius: 30px;
+  border-radius: 30px;
+}
+ul.the_solarsystem_navigation_on_the_right li.mercury {
+  width: 100px;
+  height: 100px;
+  -webkit-border-radius: 52px;
+  -moz-border-radius: 52px;
+  border-radius: 52px;
+  top: 270px;
+  left: 430px;
+  z-index: 99;
+}
+ul.the_solarsystem_navigation_on_the_right li.mercury span {
+  background: #b6bac5;
+  top: 10px;
+  left: 10px;
+}
+ul.the_solarsystem_navigation_on_the_right li.venus {
+  width: 160px;
+  height: 160px;
+  -webkit-border-radius: 82px;
+  -moz-border-radius: 82px;
+  border-radius: 82px;
+  top: 240px;
+  left: 400px;
+  z-index: 98;
+}
+ul.the_solarsystem_navigation_on_the_right li.venus span {
+  background: #bf8639;
+  top: 118px;
+  left: 5px;
+}
+ul.the_solarsystem_navigation_on_the_right li.earth {
+  width: 220px;
+  height: 220px;
+  -webkit-border-radius: 112px;
+  -moz-border-radius: 112px;
+  border-radius: 112px;
+  top: 210px;
+  left: 370px;
+  z-index: 97;
+}
+ul.the_solarsystem_navigation_on_the_right li.earth span {
+  background: #06c;
+  top: 56px;
+  left: 5px;
+}
+ul.the_solarsystem_navigation_on_the_right li.earth span.moon {
+  width: 4px;
+  height: 4px;
+  -webkit-border-radius: 2px;
+  -moz-border-radius: 2px;
+  border-radius: 2px;
+  background: #ccc;
+  top: 12px;
+  left: 12px;
+}
+ul.the_solarsystem_navigation_on_the_right li.mars {
+  width: 280px;
+  height: 280px;
+  -webkit-border-radius: 142px;
+  -moz-border-radius: 142px;
+  border-radius: 142px;
+  top: 180px;
+  left: 340px;
+  z-index: 96;
+}
+ul.the_solarsystem_navigation_on_the_right li.mars span {
+  background: #aa4200;
+  top: 0px;
+  left: 175px;
+}
+ul.the_solarsystem_navigation_on_the_right li.asteroids_meteorids {
+  top: 155px;
+  left: 315px;
+  z-index: 1;
+  background: url(http://neography.com/experiment/circles/solarsystem/asteroids_meteorids.png) no-repeat 0 0;
+  width: 330px;
+  height: 330px;
+  -webkit-border-radius: 165px;
+  -moz-border-radius: 165px;
+  border-radius: 165px;
+  border: none;
+}
+ul.the_solarsystem_navigation_on_the_right li.jupiter {
+  width: 340px;
+  height: 340px;
+  -webkit-border-radius: 172px;
+  -moz-border-radius: 172px;
+  border-radius: 172px;
+  top: 150px;
+  left: 310px;
+  z-index: 95;
+}
+ul.the_solarsystem_navigation_on_the_right li.jupiter span {
+  background: #e0ae6f;
+  top: 67px;
+  left: 24px;
+}
+ul.the_solarsystem_navigation_on_the_right li.saturn {
+  width: 400px;
+  height: 400px;
+  -webkit-border-radius: 202px;
+  -moz-border-radius: 202px;
+  border-radius: 202px;
+  top: 120px;
+  left: 280px;
+  z-index: 94;
+}
+ul.the_solarsystem_navigation_on_the_right li.saturn span {
+  background: #dfd3a9;
+  top: 24px;
+  left: 300px;
+}
+ul.the_solarsystem_navigation_on_the_right li.saturn span.ring {
+  width: 12px;
+  height: 12px;
+  -webkit-border-radius: 8px;
+  -moz-border-radius: 8px;
+  border-radius: 8px;
+  background: none;
+  border: 2px solid #5a4e34;
+  left: -3px;
+  top: -3px;
+  -webkit-transform: skewY(50deg);
+  -moz-transform: skewY(50deg);
+  -o-transform: skewY(50deg);
+  transform: skewY(50deg);
+}
+ul.the_solarsystem_navigation_on_the_right li.uranus {
+  width: 460px;
+  height: 460px;
+  -webkit-border-radius: 232px;
+  -moz-border-radius: 232px;
+  border-radius: 232px;
+  top: 90px;
+  left: 250px;
+  z-index: 93;
+}
+ul.the_solarsystem_navigation_on_the_right li.uranus span {
+  background: #82b3d1;
+  top: 7px;
+  left: 300px;
+}
+ul.the_solarsystem_navigation_on_the_right li.neptune {
+  width: 520px;
+  height: 520px;
+  -webkit-border-radius: 262px;
+  -moz-border-radius: 262px;
+  border-radius: 262px;
+  top: 60px;
+  left: 220px;
+  z-index: 92;
+}
+ul.the_solarsystem_navigation_on_the_right li.neptune span {
+  background: #77c2ec;
+  top: 0px;
+  left: 200px;
+}
+ul.the_solarsystem_navigation_on_the_right li.pluto {
+  width: 580px;
+  height: 580px;
+  -webkit-border-radius: 292px;
+  -moz-border-radius: 292px;
+  border-radius: 292px;
+  top: 30px;
+  left: 190px;
+  z-index: 91;
+}
+ul.the_solarsystem_navigation_on_the_right li.pluto span {
+  background: #7c6a5c;
+  top: 79px;
+  left: 79px;
+}
+ul#descriptions {
+  position: absolute;
+  top:   150px;
+  right: 100px;
+  list-style: none;
+}
+ul#descriptions h2 {
+  cursor: pointer;
+  color: #386077;
+  -webkit-transition: all 0.15s ease-in;
+  -moz-transition: all 0.15s ease-in;
+  -o-transition: all 0.15s ease-in;
+  transition: all 0.15s ease-in;
+  position: relative;
+  z-index: 101;
+  -webkit-transform: scale(1);
+  -moz-transform: scale(1);
+  -o-transform: scale(1);
+  transform: scale(1);
+	margin-bottom: -15px;
+	font-size: 26px;
+}
+ul#descriptions h2:hover {
+   color: #aa4200;
+  -webkit-transform: scale(1.08);
+  -moz-transform:    scale(1.08);
+  -o-transform:      scale(1.08);
+  transform: scale(1.08);
+  font-size: 25px;
+}
+ul#descriptions li p {
+  position: absolute;
+  top: 0;
+  display: inline;
+  opacity: 0;
+  visibility: hidden;
+  font-size: 15px;
+  -webkit-border-radius: 5px;
+  -moz-border-radius: 5px;
+  border-radius: 5px;
+  -webkit-transition: all 0.3s ease-in;
+  -moz-transition: all 0.3s ease-in;
+  -o-transition: all 0.3s ease-in;
+  transition: all 0.3s ease-in;
+  background: #0f132c;
+  padding: 30px;
+  color: #767892;
+  line-height: 1.7;
+  z-index: 100;
+  border: 1px solid #1c203c;
+  width: 300px;
+  left: -550px;
+}
+ul#descriptions h2:hover+p {
+  visibility: visible;
+  opacity: 0.9;
+  left: -350px;
+  font-size: 20px;
+}
+/* CSS3 Animations */
+ul.the_solarsystem_navigation_on_the_right li {
+  -webkit-animation-iteration-count:infinite;
+  -webkit-animation-timing-function:linear;
+  -webkit-animation-name:orbit;
+  -moz-animation-iteration-count:infinite;
+  -moz-animation-timing-function:linear;
+  -moz-animation-name:orbit;
+}
+ul.the_solarsystem_navigation_on_the_right li.earth span {
+  -webkit-animation-iteration-count:infinite;
+  -webkit-animation-timing-function:linear;
+  -webkit-animation-name:moon;
+  -moz-animation-iteration-count:infinite;
+  -moz-animation-timing-function:linear;
+  -moz-animation-name:moon;
+}
+ul.the_solarsystem_navigation_on_the_right li.mercury    {-webkit-animation-duration:5s; -moz-animation-duration:5s;}
+ul.the_solarsystem_navigation_on_the_right li.venus      {-webkit-animation-duration:8s; -moz-animation-duration:8s;}
+ul.the_solarsystem_navigation_on_the_right li.earth      {-webkit-animation-duration:12s; -moz-animation-duration:12s;}
+ul.the_solarsystem_navigation_on_the_right li.earth span {-webkit-animation-duration:2s; -moz-animation-duration:2s;}
+ul.the_solarsystem_navigation_on_the_right li.mars       {-webkit-animation-duration:20s; -moz-animation-duration:20s;}
+ul.the_solarsystem_navigation_on_the_right li.asteroids_meteorids {-webkit-animation-duration:50s; -moz-animation-duration:50s;}
+ul.the_solarsystem_navigation_on_the_right li.jupiter    {-webkit-animation-duration:30s; -moz-animation-duration:30s;}
+ul.the_solarsystem_navigation_on_the_right li.saturn     {-webkit-animation-duration:60s; -moz-animation-duration:60s;}
+ul.the_solarsystem_navigation_on_the_right li.uranus     {-webkit-animation-duration:70s; -moz-animation-duration:70s;}
+ul.the_solarsystem_navigation_on_the_right li.neptune    {-webkit-animation-duration:100s; -moz-animation-duration:100s;}
+ul.the_solarsystem_navigation_on_the_right li.pluto      {-webkit-animation-duration:120s; -moz-animation-duration:120s;}
+@-webkit-keyframes orbit { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
+@-webkit-keyframes moon { from { -webkit-transform:rotate(0deg) } to { -webkit-transform:rotate(360deg) } }
+@-moz-keyframes orbit { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
+@-moz-keyframes moon { from { -moz-transform:rotate(0deg) } to { -moz-transform:rotate(360deg) } }
+</style>
+</head>
+<body>
+<div>
+ <ul class="the_solarsystem_navigation_on_the_right">
+   <li class="sun"><a href="#sun"><span>Sun</span></a></li>
+   <li class="mercury"><a href="#mercury"><span>Mercury</span></a></li>
+   <li class="venus"><a href="#venus"><span>Venus</span></a></li>
+   <li class="earth"><a href="#earth"><span>Earth<span class="moon"> &amp; Moon</span></span></a></li>
+   <li class="mars"><a href="#mars"><span>Mars</span></a></li>
+   <li class="asteroids_meteorids"><span>Asteroids &amp; Meteorids</span></li>
+   <li class="jupiter"><a href="#jupiter"><span>Jupiter</span></a></li>
+   <li class="saturn"><a href="#saturn"><span>Saturn &amp; <span class="ring">Ring</span></span></a></li>
+   <li class="uranus"><a href="#uranus"><span>Uranus</span></a></li>
+   <li class="neptune"><a href="#neptune"><span>Neptune</span></a></li>
+   <li class="pluto"><a href="#pluto"><span>Pluto</span></a></li>
+ </ul>
+ <ul id="descriptions">
+  <li>
+  <h2 id="sun">Sun</h2>
+  <p>The Sun is a star, a hot ball of glowing gases at the heart of our solar system. Its influence extends far beyond the orbits of distant Neptune and Pluto. Without the Sun's intense energy and heat, there would be no life on Earth. And though it is special to us, there are billions of stars like our Sun scattered across the Milky Way galaxy.</p>
+  </li>
+  <li>
+  <h2 id="mercury">Mercury</h2>
+  <p>Sun-scorched Mercury is only slightly larger than Earth's Moon. Like the Moon, Mercury has very little atmosphere to stop impacts and it is covered with craters. Mercury's dayside is super heated by the Sun, but at night temperatures drop hundreds of degrees below freezing. Ice may even exist in craters. Mercury's egg-shaped orbit takes it around the Sun every 88 days.</p>
+  </li>
+  <li>
+  <h2 id="venus">Venus</h2>
+  <p>Venus is a dim world of intense heat and volcanic activity. Similar in structure and size to Earth, Venus' thick, toxic atmosphere traps heat in a runaway 'greenhouse effect.' The scorched world has temperatures hot enough to melt lead. Glimpses below the clouds reveal volcanoes and deformed mountains. Venus spins slowly in the opposite direction of most planets.</p>
+  </li>
+  <li>
+  <h2 id="earth">Earth</h2>
+  <p>Earth is an ocean planet. Our home world's abundance of water - and life - makes it unique in our solar system. Other planets, plus a few moons, have ice, atmospheres, seasons and even weather, but only on Earth does the whole complicated mix come together in a way that encourages life - and lots of it.</p>
+  </li>
+  <li>
+  <h2 id="mars">Mars</h2>
+  <p>Though details of Mars' surface are difficult to see from Earth, telescope observations show seasonally changing features and white patches at the poles. For decades, people speculated that bright and dark areas on Mars were patches of vegetation, that Mars could be a likely place for life-forms, and that water might exist in the polar caps. When the Mariner 4 spacecraft flew by Mars in 1965, many were shocked to see photographs of a bleak, cratered surface. Mars seemed to be a dead planet. Later missions, however, have shown that Mars is a complex member of the solar system and holds many mysteries yet to be solved.</p>
+  </li>
+  <li>
+  <h2 id="jupiter">Jupiter</h2>
+  <p>The most massive planet in our solar system, with four large moons and many smaller moons, Jupiter forms a kind of miniature solar system. Jupiter resembles a star in composition. In fact, if it had been about 80 times more massive, it would have become a star rather than a planet.</p>
+  </li>
+  <li>
+  <h2 id="saturn">Saturn</h2>
+  <p>Saturn was the most distant of the five planets known to the ancients. Like Jupiter, Saturn is made mostly of hydrogen and helium. Its volume is 755 times greater than that of Earth. Winds in the upper atmosphere reach 500 meters (1,600 feet) per second in the equatorial region. These super-fast winds, combined with heat rising from within the planet's interior, cause the yellow and gold bands visible in the atmosphere.</p>
+  </li>
+  <li>
+  <h2 id="uranus">Uranus</h2>
+  <p>The first planet found with the aid of a telescope, Uranus was discovered in 1781 by astronomer William Herschel. The seventh planet from the Sun is so distant that it takes 84 years to complete one orbit.</p>
+  </li>
+  <li>
+  <h2 id="neptune">Neptune</h2>
+  <p>Nearly 4.5 billion kilometers (2.8 billion miles) from the Sun, Neptune orbits the Sun once every 165 years. It is invisible to the naked eye because of its extreme distance from Earth. Interestingly, the unusual elliptical orbit of the dwarf planet Pluto brings Pluto inside Neptune's orbit for a 20-year period out of every 248 Earth years</p>
+  </li>
+  <li>
+  <h2 id="pluto">Pluto</h2>
+  <p>Tiny, cold and incredibly distant, Pluto was discovered in 1930 and long considered to be the ninth planet. But after the discoveries of similar intriguing worlds even farther out, Pluto was reclassified as a dwarf planet. This new class of worlds may offer some of the best evidence of the origins of our solar system.</p>
+  </li>
+</ul>
+</div>
+<div style=" margin: auto; text-align: center; background-color: gold; padding: 0.5em; position:center; width: 300px; color: black;">
+<h2>This shows our solar system.</h2>
+</div>
+</body>
+</html>

data/examples/css/outline/outline_versus_border_example.html ADDED Viewed

@@ -0,0 +1,57 @@
+<html>
+<head>
+<style>
+.bblack1 { border: 1px solid black; }
+.container1 {
+  border:  2px solid  lightgreen;
+  outline: 5px dashed tomato;
+  padding: 10px;
+  margin: 5px;
+}
+.container2 {
+  border:  2px solid  lightgreen;
+  outline: 5px dashed tomato;
+  padding: 10px;
+  margin: 5px;
+  box-shadow: 5px 8px black;
+}
+button {
+  font-size: 2em;
+  font-weight: bold;
+  transition: box-shadow 180ms ease-in;
+}
+button:hover {
+  box-shadow: 0 0 0 3px tomato;
+}
+</style>
+</head>
+<body>
+<h2>Test #1</h2>
+<h2>Test #2</h2>
+<h2>Test #3</h2>
+<h2>Test #4</h2>
+<h2 class="bblack1">Test #5 - this is border: 1px solid black</h2>
+<h2 style="outline: solid;">Test #6 - this is outline: solid</h2>
+<h2 class="bblack1" style="outline: solid;">Test #7 - this tries to combine both</h2>
+<div class="container1">Container #1 - combines both</div>
+<div class="container2">Container #2 - combines both and uses box shadow</div>
+<p>
+You should be able to spot a difference between Test #5 and
+Test #6.
+</p>
+<button>button</button>
+<button>button</button>
+</body>
+</html>

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

@@ -0,0 +1,130 @@
+<html>
+<head>
+<style>
+body {
+  background-color: black;
+}
+.polaroid_card {
+  background-color: var(--background);
+  display:    block;
+  width:      600px;
+  min-height: 240px;
+  cursor: pointer;
+  padding: 15px;
+  margin: calc(50vh - 30px) auto 0 auto;
+  border: 3px solid var(--primary);
+  box-shadow:
+    10px -10px 0 -3px var(--background), 10px -10px var(--green),
+    20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+    30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+    40px -40px 0 -3px var(--background), 40px -40px var(--red);
+}
+.polaroid_card:hover {
+  animation: shadow_wave_animation 1s ease infinite;
+}
+@keyframes shadow_wave_animation {
+  0% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+  20% {
+    border: 3px solid var(--red);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--primary),
+      20px -20px 0 -3px var(--background), 20px -20px var(--green),
+      30px -30px 0 -3px var(--background), 30px -30px var(--yellow),
+      40px -40px 0 -3px var(--background), 40px -40px var(--orange);
+  }
+  40% {
+    border: 3px solid var(--orange);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--red),
+      20px -20px 0 -3px var(--background), 20px -20px var(--primary),
+      30px -30px 0 -3px var(--background), 30px -30px var(--green),
+      40px -40px 0 -3px var(--background), 40px -40px var(--yellow);
+  }
+  60% {
+    border: 3px solid var(--yellow);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--orange),
+      20px -20px 0 -3px var(--background), 20px -20px var(--red),
+      30px -30px 0 -3px var(--background), 30px -30px var(--primary),
+      40px -40px 0 -3px var(--background), 40px -40px var(--green);
+  }
+  80% {
+    border: 3px solid var(--green);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--yellow),
+      20px -20px 0 -3px var(--background), 20px -20px var(--orange),
+      30px -30px 0 -3px var(--background), 30px -30px var(--red),
+      40px -40px 0 -3px var(--background), 40px -40px var(--primary);
+  }
+  100% {
+    border: 3px solid var(--primary);
+    box-shadow: 10px -10px 0 -3px var(--background), 10px -10px var(--green),
+      20px -20px 0 -3px var(--background), 20px -20px var(--yellow),
+      30px -30px 0 -3px var(--background), 30px -30px var(--orange),
+      40px -40px 0 -3px var(--background), 40px -40px var(--red);
+  }
+}
+:root {
+  --primary:    #22D2A0;
+  --secondary:  #192824;
+  --background: #192824;
+  --green:      #1FC11B;
+  --yellow:     #FFD913;
+  --orange:     #FF9C55;
+  --red:        #FF5555;
+}
+.polaroid_card p {
+  font-family: "Archivo", sans-serif;
+  font-size: 25px;
+  text-transform: uppercase;
+  letter-spacing: 0.5px;
+  margin-bottom: 10px;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+.polaroid_card h2 {
+  font-size: 14px;
+  font-family: "Archivo Black", "Archivo", sans-serif;
+  font-weight: normal;
+  color: var(--primary);
+  box-sizing: border-box;
+}
+</style>
+</head>
+<div class="polaroid_card">
+  <p>Similar post</p>
+  <h2>
+    How I recreated a Polaroid camera with CSS gradients only
+  </h2>
+  <br>
+  <p style="font-size: 12px">By googling for it! \o/</p>
+</div>
+</html>