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

@@ -0,0 +1,110 @@
+<html>
+<head>
+<title>CSS Checkboxes example</title>
+<style>
+.checklist {
+  padding: 50px;
+  position: relative;
+  background: #043b3e;
+  border-top: 50px solid #03a2f4;
+}
+.checklist h2 {
+  color: lightblue;
+  font-size: 25px;
+  padding: 10px 0;
+  margin-left: 10px;
+  display: inline-block;
+  border-bottom: 4px solid #f3f3f3;
+}
+.checklist label {
+  position: relative;
+  display: block;
+  margin: 40px 0;
+  color: #fff;
+  font-size: 24px;
+  cursor: pointer;
+}
+/*
+ * Style the checkbox next via CSS rules:
+ */
+.checklist input[type="checkbox"] {
+  -webkit-appearance: none;
+}
+.checklist i {
+  position: absolute;
+  top: 2px;
+  display: inline-block;
+  width: 25px;
+  height: 25px;
+  border: 2px solid #fff;
+}
+/*
+ * This part is when the checkbox is checked. */
+.checklist input[type="checkbox"]:checked ~ i {
+  top: 1px;
+  height: 15px;
+  width:  25px;
+  border-top:   none;
+  border-right: none;
+  transform: rotate(-45deg);
+}
+.checklist span {
+  position: relative;
+  left: 40px;
+  transition: 0.5s;
+}
+.checklist span:before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #fff;
+  transform: translateY(-50%) scaleX(0);
+  transform-origin: left;
+  transition: transform 0.5s;
+}
+/*
+ * The next CSS rule will do a strange strike-through
+ * effect. I don't like that effect so I removed it
+ * here; others may want to try it out on their own
+ * though.
+ */
+/*
+.checklist input[type="checkbox"]:checked ~ span:before {
+  transform: translateY(-50%) scaleX(1);
+  transform-origin: right;
+  transition: transform 0.5s;
+}
+*/
+/*
+ * The active checkbox has a lightgreen colour.
+ */
+.checklist input[type="checkbox"]:checked ~ span {
+  color: lightgreen;
+}
+</style>
+</head>
+<body>
+<div class="checklist">
+  <h2>Item Checklist with CSS</h2>
+  <label>
+  <input type="checkbox" name="" id="" />
+  <i></i>
+  <span>Item #1</span>
+  </label>
+  <label>
+  <input type="checkbox" name="" id="" />
+  <i></i>
+  <span>Item #2</span>
+  </label>
+  <label>
+  <input type="checkbox" name="" id="" />
+  <i></i>
+  <span>Item #3</span>
+  </label>
+</div>
+</body>
+</html>

data/examples/css/css_drag_and_drop.html CHANGED Viewed

@@ -1,7 +1,6 @@
 <html>
 <head>
 <title>Testing CSS drag and drop</title>
 <style>
 #mydiv {
@@ -25,14 +24,12 @@
 </head>
 <body>
  <!-- Draggable DIV -->
 <div id="mydiv">
   <!-- Include a header DIV with the same name as the draggable DIV, followed by "header" -->
   <div id="mydivheader">Click here to move</div>
   <p>Move</p>
-  <img src="/home/x/DATA/images/FUN/WARNING_BUFFALOS_ARE_DANGEROUS.gif">
+  <img src="/home/x/data/images/FUN/WARNING_BUFFALOS_ARE_DANGEROUS.gif">
   <p>DIV</p>
 </div>
@@ -84,6 +81,5 @@ function dragElement(elmnt) {
 </script>
 </body>
 </html>

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

@@ -0,0 +1,161 @@
+<html>
+<head>
+<style>
+body, html {
+  margin: 0;
+  padding: 0;
+}
+.cats {
+  display: grid;
+  grid-auto-flow: dense;
+  overflow: hidden;
+}
+@media screen and (min-width: 45em) {
+  .cats {
+	  height: 100vh;
+	  grid-template-columns: 29% 29% 43.5%;
+	  grid-template-rows: 50% 16% 34%;
+	}
+}
+ @media screen and (max-width: 45em) and (min-width: 25em) {
+  .cats {
+	  grid-template-columns: repeat(2, 50vw);
+	  grid-template-rows: repeat(3, 1fr);
+	}
+}
+ @media screen and (max-width: 25em) {
+  .cats {
+	  grid-template-columns: 100vw;
+	  grid-template-rows: repeat(5, 1fr);
+	}
+}
+ .cat img {
+  width: 100%;
+}
+ .cat.cat--1 {
+  background-color: #abe7db;
+}
+ .cat.cat--2 {
+  background-color: #f67c61;
+}
+ .cat.cat--3 {
+  background-color: #fff9e8;
+}
+ .cat.cat--4 {
+  background-color: #58a5a3;
+}
+ .cat.cat--5 {
+  background-color: #172535;
+}
+ .cat.cat--1 {
+  grid-column-start: 1;
+  grid-column-end: 3;
+  grid-row-start: 1;
+  grid-row-end: 3;
+}
+ .cat.cat--2 {
+  grid-column-start: 1;
+  grid-column-end: 2;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+ .cat.cat--3 {
+  grid-column-start: 2;
+  grid-column-end: 3;
+  grid-row-start: 3;
+  grid-row-end: 4;
+}
+ .cat.cat--4 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 1;
+  grid-row-end: 2;
+}
+ .cat.cat--5 {
+  grid-column-start: 3;
+  grid-column-end: 4;
+  grid-row-start: 2;
+  grid-row-end: 4;
+}
+ @media screen and (max-width: 45em) and (min-width: 25em) {
+  .cat.cat--4 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 4;
+	  grid-row-end: 5;
+	}
+  .cat.cat--5 {
+	  grid-column-start: 2;
+	  grid-column-end: 3;
+	  grid-row-start: 4;
+	  grid-row-end: 5;
+	}
+}
+ @media screen and (max-width: 25em) {
+  .cat.cat--1 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 1;
+	  grid-row-end: 2;
+	}
+  .cat.cat--2 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 2;
+	  grid-row-end: 3;
+	}
+  .cat.cat--3 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 3;
+	  grid-row-end: 4;
+	}
+  .cat.cat--4 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 4;
+	  grid-row-end: 5;
+	}
+  .cat.cat--5 {
+	  grid-column-start: 1;
+	  grid-column-end: 2;
+	  grid-row-start: 5;
+	  grid-row-end: 6;
+	}
+}
+body {
+  margin: auto;
+  background-color: black;
+}
+</style>
+</head>
+<body>
+<div class="cats" style="width: 1200px;">
+<div class="cat cat--1">
+<img src="https://cdn.dribbble.com/users/218750/screenshots/2090988/sleeping_beauty.gif" alt="">
+</div>
+<div class="cat cat--2">
+<img src="https://cdn.dribbble.com/users/6191/screenshots/1192777/catpurr.gif" alt="">
+</div>
+<div class="cat cat--3">
+<img src="https://cdn.dribbble.com/users/6191/screenshots/2211315/meal.gif" alt="">
+</div>
+<div class="cat cat--4">
+<img src="https://cdn.dribbble.com/users/6191/screenshots/1189704/walkingcat.gif" alt="">
+</div>
+<div class="cat cat--5">
+<img src="https://cdn.dribbble.com/users/6191/screenshots/3661586/cat_sleep_dribbble.gif" alt="">
+</div>
+</div>
+</body>
+</html>

data/examples/css/css_neon_glow_effects.html CHANGED Viewed

@@ -294,7 +294,7 @@ p a:hover {
     BLUE
   </a></p>
-  <p><a href="https://en.wikipedia.org/wiki/Yellow">
+  <p><a href="https://en.wikipedia.org/wiki/Yellow" style="font-style: italic">
     Yellow
   </a></p>

data/examples/css/css_rotate_these_words.html ADDED Viewed

@@ -0,0 +1,83 @@
+<html>
+<style>
+body {
+  background-color:#3757D0;
+  background-image:radial-gradient(#81BCFF, #303391);
+  background-size:100%;
+  background-repeat:no-repeat;
+  background-attachment:fixed;
+  color:#fff;
+  text-align:center;
+}
+#rotate_these_words {
+  max-width:400px;
+  margin:auto;
+  padding:20% 0;
+  font-size:2.2em;
+  text-transform:uppercase;
+  font-family: 'Hack', sans-serif;
+}
+#rotate_these_words span {
+  display:block;
+  height:50px;
+  font-size:.7em;
+  text-transform:lowercase;
+  opacity:.8;
+  font-family: 'Rubik', sans-serif;
+}
+#rotate_these_words div {
+ position:absolute;
+ opacity:0;
+ overflow:hidden;
+ left:10vw;
+ width:80vw;
+ line-height:1.2em;
+ animation: rotate-word 32s linear infinite 0s;
+}
+@keyframes rotate-word {
+    0% { opacity: 0;  transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
+    3% { opacity: 1;  transform: translateX(0);filter:blur(0px);transform:scale(.9)}
+    12% { opacity: 1; transform: translateX(0);filter:blur(0px);transform:scale(1)}
+    16% { opacity: 0; transform: translateX(0);filter:blur(10px);transform:scale(1.2)}
+    80% { opacity: 0}
+    100% { opacity: 0}
+}
+#rotate_these_words div:nth-child(2) { animation-delay:  4s}
+#rotate_these_words div:nth-child(3) { animation-delay:  8s}
+#rotate_these_words div:nth-child(4) { animation-delay: 12s}
+#rotate_these_words div:nth-child(5) { animation-delay: 16s}
+#rotate_these_words div:nth-child(6) { animation-delay: 20s}
+#rotate_these_words div:nth-child(7) { animation-delay: 24s}
+#rotate_these_words div:nth-child(8) { animation-delay: 28s}
+@keyframes author {
+    0% { opacity: 0;  transform: translateY(100px);filter:blur(10px);transform: scaleY(2)}
+    20% { opacity:0; transform: translateY(200px);filter:blur(10px); transform: scaleY(2)}
+    30% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(1)}
+    90% { opacity:1; transform: translateY(0);filter:blur(0px);transform: scaleY(.9)}
+    100% { opacity:0; transform: translateY(0);filter:blur(10px);transform: scale(2)}
+}
+</style>
+<body>
+<div id="rotate_these_words">
+<div>Cinematic, Animated Text Effect<br />  <span>Someone</span></div>
+<div>Perfect for Any Movie<br />  <span>No one</span></div>
+<div>Loops for Eternity<br />  <span>Anyone</span></div>
+<div>Simple CSS Tricks<br />  <span>Everyone</span></div>
+<div>Cinematic, Animated Text Effect<br />  <span>Everyone</span></div>
+<div>Perfect for Any Movie<br />  <span>Someone</span></div>
+<div>Loops for Eternity<br />  <span>No one</span></div>
+<div>Simple CSS Tricks<br />  <span>Someone</span></div>
+</div>
+</body>
+</html>

data/examples/css/css_text_decoration_example.html CHANGED Viewed

@@ -57,14 +57,14 @@ body {
 <body style="margin-top: 1em">
 <a href="#">The cat plays with a mouse.</a> <br/><br>
-<span class="sample">The cat plays with a mouse.</span> <br/><br>
-<span class="element3">The cat plays with a mouse.</span> <br/><br>
-<span class="through">The cat plays with a mouse.</span><br><br>
-<span class="wavy">The cat plays with a mouse.</span><br>
+<span class="sample">The cat plays with a mouse. (CSS class: sample)</span> <br/><br>
+<span class="element3">The cat plays with a mouse. (CSS class: element3)</span> <br/><br>
+<span class="through">The cat plays with a mouse. (CSS class: through)</span><br><br>
+<span class="wavy">The cat plays with a mouse. (CSS class: wavy)</span><br>
 <br>
-<p class="thin">Here's some text with a 1px red underline.</p>
-<p class="thick">This one has a 5px red underline.</p>
-<p class="shorthand">This uses the equivalent shorthand.</p>
+<p class="thin">Here's some text with a 1px red underline. (CSS class: thin)</p>
+<p class="thick">This one has a 5px red underline. (CSS class: thick)</p>
+<p class="shorthand">This uses the equivalent shorthand. (CSS class: shorthand)</p>
 </body>
 </html>

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

@@ -0,0 +1,91 @@
+<html>
+<head>
+<title>CSS Thermometer</title>
+<style>
+@import url(https://fonts.googleapis.com/css?family=Dosis:200,400,500,600);
+html, body { height: 100%; }
+body { background: #f2f2f2; }
+.container { width: 300px; margin: 10px auto 0; }
+.de .den, .de .dene, .de .denem, .de .deneme { position: absolute; left: 50%; top: 50%; }
+.de {
+ position: relative;
+ width: 240px;
+ height: 240px;
+ border-radius: 100%;
+ box-shadow: 0 0 10px rgba(0, 0, 0, .1);
+ background-color: transparent;
+}
+.den {
+ position: relative;
+ width: 210px;
+ height: 210px;
+ margin: -105px 0 0 -105px;
+ border-radius: 100%;
+ box-shadow: inset 0 2px 10px rgba(0, 0, 0, .5), 0 2px 20px rgba(255, 255, 255, 1);
+ background: #df3341;
+ background: -moz-linear-gradient(left, #df3341 0%, #d4f355 50%, #61c0ec 100%);
+ background: -webkit-gradient(linear, left top, right top, color-stop(0%,#df3341), color-stop(50%,#d4f355), color-stop(100%,#61c0ec));
+ background: -webkit-linear-gradient(left, #df3341 0%,#d4f355 50%,#61c0ec 100%);
+ background: linear-gradient(to right, #df3341 0%,#d4f355 50%,#61c0ec 100%);
+ position:relative;
+}
+.dene {
+ width: 180px;
+ height: 180px;
+ margin: -90px 0 0 -90px;
+ border-radius: 100%;
+ box-shadow: inset 0 2px 2px rgba(255, 255, 255, .4), 0 3px 13px rgba(0, 0, 0, .85);
+ background: #f2f6f5;
+ background: -moz-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f2f6f5), color-stop(100%, #cbd5d6));
+ background: -webkit-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
+ background: -o-linear-gradient(top, #f2f6f5 0%, #cbd5d6 100%);
+}
+.denem {
+ width: 160px;
+ height: 160px;
+ margin: -80px 0 0 -80px;
+ border-radius: 100%;
+ background: #cbd5d6;
+ background: -moz-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
+ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #cbd5d6), color-stop(100%, #f2f6f5));
+ background: -webkit-linear-gradient(top, #cbd5d6 0%, #f2f6f5 100%);
+}
+.deneme {
+ padding: 3px 10px 0 10px;
+ width: 120px;
+ height: 137px;
+ display: inline-block;
+ margin: -70px 0 0 -70px;
+ color: #555;
+ text-shadow: 1px 1px 1px white;
+ font-family: 'Dosis';
+ font-size: 100px;
+ font-weight: 400;
+ text-align: center;
+}
+.deneme span { font-size: 30px; font-weight: 200; }
+.deneme strong { position: absolute; right: 10px; top: 25px; font-size: 34px; }
+</style>
+</head>
+</body>
+<div class="container">
+ <div class="de">
+ <div class="den">
+ <div class="dene">
+ <div class="denem">
+ <div class="deneme">
+ 23<span>.9</span><strong>&deg;</strong>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</div>
+</html>

data/examples/css/{css_tooltip.html → css_tooltip/css_tooltip.html} RENAMED Viewed

@@ -1,5 +1,8 @@
 <!DOCTYPE html>
 <html>
+<head>
+<title>CSS Tooltip example</title>
+</head>
 <style>
 .tooltip {
@@ -10,12 +13,12 @@
 .tooltip .tooltiptext {
   visibility: hidden;
-  width: 120px;
+  width: 150px;
+  color: steelblue;
   background-color: black;
-  color: #fff;
   text-align: center;
-  border-radius: 6px;
-  padding: 12px 0;
+  border-radius: 7px;
+  padding: 14px 0;
   /* Position the tooltip */
   position: absolute;
@@ -23,9 +26,8 @@
   width: 150px;
   bottom: 100%;
   left: 50%;
-  margin-left: -60px; /* Use half of the width (120/2 = 60), to center the tooltip */
+  margin-left: -75px; /* Use half of the width (120/2 = 60), to center the tooltip */
   font-size: larger;
 }
 .tooltip:hover .tooltiptext {