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/slide_checkbox_example/slide_checkbox_example.html ADDED Viewed

@@ -0,0 +1,564 @@
+<html>
+<head>
+<title>CSS3 Checkbox Styles</title>
+<style>
+/*.slideOne */
+.slideOne {
+  width: 50px;
+  height: 10px;
+  background: #333;
+  margin: 20px auto;
+  position: relative;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
+}
+.slideOne label {
+  display: block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: -3px;
+  left: -3px;
+  cursor: pointer;
+  background: #fcfff4;
+  background: linear-gradient(to bottom, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  border-radius: 50px;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
+  transition: all 0.4s ease;
+}
+.slideOne input[type=checkbox] {
+  visibility: hidden;
+}
+.slideOne input[type=checkbox]:checked + label {
+  left: 37px;
+}
+/* end.slideOne */
+/*.slideTwo */
+.slideTwo {
+  width: 80px;
+  height: 30px;
+  background: #333;
+  margin: 20px auto;
+  position: relative;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
+}
+.slideTwo:after {
+  content: '';
+  position: absolute;
+  top: 14px;
+  left: 14px;
+  height: 2px;
+  width: 52px;
+  background: #111;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
+}
+.slideTwo label {
+  display: block;
+  width: 22px;
+  height: 22px;
+  cursor: pointer;
+  position: absolute;
+  top: 4px;
+  z-index: 1;
+  left: 4px;
+  background: #fcfff4;
+  border-radius: 50px;
+  transition: all 0.4s ease;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+}
+.slideTwo label:after {
+  content: '';
+  width: 10px;
+  height: 10px;
+  position: absolute;
+  top: 6px;
+  left: 6px;
+  background: #333;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 1), 0px 1px 0px rgba(255, 255, 255, 0.9);
+}
+.slideTwo input[type=checkbox] {
+  visibility: hidden;
+}
+.slideTwo input[type=checkbox]:checked + label {
+  left: 54px;
+}
+.slideTwo input[type=checkbox]:checked + label:after {
+  background: #27ae60;
+	/*activeColor*/
+}
+/* end.slideTwo */
+/*.slideThree */
+.slideThree {
+  width: 80px;
+  height: 26px;
+  background: #333;
+  margin: 20px auto;
+  position: relative;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 0.2);
+}
+.slideThree:after {
+  content: 'OFF';
+  color: tomato;
+  position: absolute;
+  right: 10px;
+  z-index: 0;
+  font: 12px/26px Arial, sans-serif;
+  font-weight: bold;
+  text-shadow: 1px 1px 0px rgba(255, 255, 255,.15);
+}
+.slideThree:before {
+  content: 'ON';
+  color: #27ae60;
+  position: absolute;
+  left: 10px;
+  z-index: 0;
+  font: 12px/26px Arial, sans-serif;
+  font-weight: bold;
+}
+.slideThree label {
+  display: block;
+  width: 34px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  z-index: 1;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  border-radius: 50px;
+  transition: all 0.4s ease;
+  box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.3);
+}
+.slideThree input[type=checkbox] {
+  visibility: hidden;
+}
+.slideThree input[type=checkbox]:checked + label {
+  left: 43px;
+}
+/* end.slideThree */
+/*.roundedOne */
+.roundedOne {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  margin: 20px auto;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.roundedOne label {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  background: linear-gradient(top, #222 0%, #45484d 100%);
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
+}
+.roundedOne label:after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background: #27ae60;
+  background: linear-gradient(top, #27ae60 0%, #145b32 100%);
+  opacity: 0;
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.roundedOne label:hover::after {
+  opacity: 0.3;
+}
+.roundedOne input[type=checkbox] {
+  visibility: hidden;
+}
+.roundedOne input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.roundedOne */
+/*.roundedTwo */
+.roundedTwo {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  margin: 20px auto;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.roundedTwo label {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  cursor: pointer;
+  background: linear-gradient(top, #222 0%, #45484d 100%);
+  border-radius: 50px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
+}
+.roundedTwo label:after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  position: absolute;
+  top: 5px;
+  left: 4px;
+  border: 3px solid #fcfff4;
+  border-top: none;
+  border-right: none;
+  background: transparent;
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+.roundedTwo label:hover::after {
+  opacity: 0.3;
+}
+.roundedTwo input[type=checkbox] {
+  visibility: hidden;
+}
+.roundedTwo input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.roundedTwo */
+/*.squaredOne */
+.squaredOne {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  margin: 20px auto;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.squaredOne label {
+  width: 20px;
+  height: 20px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  cursor: pointer;
+  background: linear-gradient(top, #222 0%, #45484d 100%);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
+}
+.squaredOne label:after {
+  content: '';
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  background: #27ae60;
+  background: linear-gradient(top, #27ae60 0%, #145b32 100%);
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+  opacity: 0;
+}
+.squaredOne label:hover::after {
+  opacity: 0.3;
+}
+.squaredOne input[type=checkbox] {
+  visibility: hidden;
+}
+.squaredOne input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.squaredOne */
+/*.squaredTwo */
+.squaredTwo {
+  width: 28px;
+  height: 28px;
+  position: relative;
+  margin: 20px auto;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.squaredTwo label {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  left: 4px;
+  top: 4px;
+  background: linear-gradient(top, #222 0%, #45484d 100%);
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255, 1);
+}
+.squaredTwo label:after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border: 3px solid #fcfff4;
+  border-top: none;
+  border-right: none;
+  background: transparent;
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+.squaredTwo label:hover::after {
+  opacity: 0.3;
+}
+.squaredTwo input[type=checkbox] {
+  visibility: hidden;
+}
+.squaredTwo input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.squaredTwo */
+/*.squaredThree */
+.squaredThree {
+  width: 20px;
+  position: relative;
+  margin: 20px auto;
+}
+.squaredThree label {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(top, #222 0%, #45484d 100%);
+  border-radius: 4px;
+  box-shadow: inset 0px 1px 1px rgba(0, 0, 0, 0.5), 0px 1px 0px rgba(255, 255, 255,.4);
+}
+.squaredThree label:after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border: 3px solid #fcfff4;
+  border-top: none;
+  border-right: none;
+  background: transparent;
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+.squaredThree label:hover::after {
+  opacity: 0.3;
+}
+.squaredThree input[type=checkbox] {
+  visibility: hidden;
+}
+.squaredThree input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.squaredThree */
+/*.squaredFour */
+.squaredFour {
+  width: 20px;
+  position: relative;
+  margin: 20px auto;
+}
+.squaredFour label {
+  width: 20px;
+  height: 20px;
+  cursor: pointer;
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: #fcfff4;
+  background: linear-gradient(top, #fcfff4 0%, #dfe5d7 40%, #b3bead 100%);
+  border-radius: 4px;
+  box-shadow: inset 0px 1px 1px white, 0px 1px 3px rgba(0, 0, 0, 0.5);
+}
+.squaredFour label:after {
+  content: '';
+  width: 9px;
+  height: 5px;
+  position: absolute;
+  top: 4px;
+  left: 4px;
+  border: 3px solid #333;
+  border-top: none;
+  border-right: none;
+  background: transparent;
+  opacity: 0;
+  transform: rotate(-45deg);
+}
+.squaredFour label:hover::after {
+  opacity: 0.5;
+}
+.squaredFour input[type=checkbox] {
+  visibility: hidden;
+}
+.squaredFour input[type=checkbox]:checked + label:after {
+  opacity: 1;
+}
+/* end.squaredFour */
+ * {
+  box-sizing: border-box;
+}
+ body {
+  background: #3498db;
+  font-family: 'Open Sans', sans-serif;
+  font-weight: 300;
+}
+ body h1, body h2, body em {
+  color: #eee;
+  font-size: 30px;
+  text-align: center;
+  margin: 20px 0 0 0;
+  -webkit-font-smoothing: antialiased;
+  text-shadow: 0px 1px #000;
+}
+ body em {
+  font-size: 14px;
+  text-align: center;
+  display: block;
+  margin-bottom: 50px;
+}
+ body.ondisplay {
+  text-align: center;
+  padding: 20px 0;
+}
+ body.ondisplay section {
+  width: 100px;
+  height: 100px;
+  background: #555;
+  display: inline-block;
+  position: relative;
+  text-align: center;
+  margin-top: 5px;
+  border: 1px solid gray;
+  border-radius: 5px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
+}
+ body.ondisplay section:after {
+	/* visibility: hidden;
+  */
+  content: attr(title);
+  position: absolute;
+  width: 100%;
+  left: 0;
+  bottom: 3px;
+  color: #fff;
+  font-size: 12px;
+  font-weight: 400;
+  -webkit-font-smoothing: antialiased;
+  text-shadow: 0px 1px #000;
+}
+ </style>
+</head>
+<body>
+<h1>CSS3 Checkbox Styles</h1>
+<em>Click any button below</em>
+<div class="ondisplay">
+<section title=".slideOne">
+<!--.slideOne -->
+<div class="slideOne">
+<input type="checkbox" value="None" id="slideOne" name="check" checked />
+<label for="slideOne"></label>
+</div>
+<!-- end.slideOne -->
+</section>
+<section title=".slideTwo">
+<!--.slideTwo -->
+<div class="slideTwo">
+<input type="checkbox" value="None" id="slideTwo" name="check" checked />
+<label for="slideTwo"></label>
+</div>
+<!-- end.slideTwo -->
+</section>
+<section title=".slideThree">
+<!--.slideThree -->
+<div class="slideThree">
+<input type="checkbox" value="None" id="slideThree" name="check" checked />
+<label for="slideThree"></label>
+</div>
+<!-- end.slideThree -->
+</section>
+<section title=".roundedOne">
+<!--.roundedOne -->
+<div class="roundedOne">
+<input type="checkbox" value="None" id="roundedOne" name="check" checked />
+<label for="roundedOne"></label>
+</div>
+<!-- end.roundedOne -->
+</section>
+<section title=".roundedTwo">
+<!--.roundedTwo -->
+<div class="roundedTwo">
+<input type="checkbox" value="None" id="roundedTwo" name="check" checked />
+<label for="roundedTwo"></label>
+</div>
+<!-- end.roundedTwo -->
+</section>
+<section title=".squaredOne">
+<!--.squaredOne -->
+<div class="squaredOne">
+<input type="checkbox" value="None" id="squaredOne" name="check" checked />
+<label for="squaredOne"></label>
+</div>
+<!-- end.squaredOne -->
+</section>
+<section title=".squaredTwo">
+<!--.squaredTwo -->
+<div class="squaredTwo">
+<input type="checkbox" value="None" id="squaredTwo" name="check" checked />
+<label for="squaredTwo"></label>
+</div>
+<!-- end.squaredTwo -->
+</section>
+<section title=".squaredThree">
+<!--.squaredThree -->
+<div class="squaredThree">
+<input type="checkbox" value="None" id="squaredThree" name="check" checked />
+<label for="squaredThree"></label>
+</div>
+<!-- end.squaredThree -->
+</section>
+<section title=".squaredFour">
+<!--.squaredFour -->
+<div class="squaredFour">
+<input type="checkbox" value="None" id="squaredFour" name="check" checked />
+<label for="squaredFour"></label>
+</div>
+<!-- end.squaredFour -->
+</section>
+</div>
+</body>
+</html>

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

@@ -0,0 +1,109 @@
+<html>
+<head>
+<title>
+Speak Bubble Quote Example
+</title>
+<style>
+.bg .cont {
+  width: 500px;
+  margin: 0px auto;
+  padding: 50px;
+  text-align: center;
+}
+ .bg .cont .quote-cont {
+  display: block;
+}
+ .bg .cont .quote {
+  color: white;
+  background: #444;
+  border-radius: 10px;
+  padding: 10px;
+  font-size: 17px;
+  font-family: arial;
+  margin: 10px;
+  display: inline-block;
+  text-shadow: 1px 1px 0px #222;
+  max-width: 280px;
+  box-shadow: 0px 1px #999 inset, 0px 10px #555 inset, 0px 0px 30px #000;
+}
+/*
+ * If you want an arrow to appear.
+ */
+.bg .cont .arrow {
+  display: block;
+  width: 0px;
+  height: 0px;
+  border-top: 10px solid #444;
+  border-right: 10px solid transparent;
+  border-left: 10px solid transparent;
+  position: relative;
+  margin: -10px auto 10px auto;
+}
+/*
+ * The next part is for the voltaire picture to be roundish.
+ */
+.bg .cont .face {
+  border-radius: 600px;
+  overflow: hidden;
+  border: 5px solid white;
+  display: inline-block;
+  width: 90px;
+  height: 90px;
+}
+/*
+ * This relates to the Voltaire image.
+ */
+.bg .cont .face img {
+  width: 90px;
+  heoght: 90px;
+  margin-top: -10px;
+  margin-left: -5px;
+}
+/*
+ * This is for the celeb-text. Not really important
+ * to keep.
+ */
+.bg .cont .celeb {
+  color: white;
+  font: 13px arial;
+  text-shadow: 1px 1px 0px #111;
+}
+/*
+ * No clue about this here. Seems not necessary.
+ */
+.bg .cont .pixelware {
+  display: block;
+  width: 122px;
+  background: white;
+  height: 32px;
+  background: url('http://pixelwa.re/wp-content/uploads/2013/02/Pixelware-white-sel.png') center center no-repeat;
+  border-radius: 3px;
+  float: right;
+  opacity: 0.5;
+  transition: all 1s;
+}
+.bg .cont .pixelware:hover {
+  opacity: 0.9;
+}
+</style>
+</head>
+<body>
+<div class="bg">
+<div class="cont">
+<div class="quote-cont">
+<div class="quote">Common sense is not so common.</div>
+<div class="arrow"></div>
+</div>
+<div class="face">
+<img src="https://3.bp.blogspot.com/_9f6ZSKm2arg/TOaXOLHB8rI/AAAAAAAAAKI/0unw0AZtOco/s1600/voltaire.jpg"/>
+</div>
+<div class="celeb">Voltaire</div>
+<a class="pixelware" href="http://www.pixelwa.re"></a>
+</div>
+</div>
+</body>
+</html>