Ken's public fiddles
-
0eefdLxn
No-Library (pure JS), HTML, CSS, JavaScript
-
Rotating Text Navigation (OK)
No-Library (pure JS), HTML, CSS, JavaScript
-
Spinning Image
CSS Only
-
f03u3mwL
No-Library (pure JS), HTML, CSS, JavaScript
-
u1er1yon
No-Library (pure JS), HTML, CSS, JavaScript
-
8wyztcdo
No-Library (pure JS), HTML, CSS, JavaScript
-
75g017p8
No-Library (pure JS), HTML, CSS, JavaScript
-
etm01wqj
jQuery 1.9.1, HTML, CSS, JavaScript
-
bnmwcgwr
jQuery 1.11.0, HTML, CSS, JavaScript
-
Random element selector
Apply float:left or float:right to a figure image upon page load.
-
Format
Web Format Exploration.
-
Hoverover img = show figcaption
section.image { padding-top:100px; } section.image figure.two-forth img { width:50%; } section.image figcaption { opacity:0; } /* figure { position: relative; display: inline-block; } figcaption { display: none; position: absolute; left: 0; bottom: 5px; right: 0; background-color: rgba(0,0,0,.15); } figure:hover img { opacity: .7; } figure:hover figcaption { display: block; } */
-
kqyvmjtz
HTML <div class="pagewrap"> <section class="text"> <h1 class="title"> Project Title </h1> <p class="information"> Project Text. A hidden class that was swapped with .title. </p> </section><!-- /text --> <section class="image"> <figure class="whole"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image01 caption, width:100%. </figcaption> </figure> <figure class="three-forth"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image02 caption, width:75%. </figcaption> </figure> <figure class="two-forth"> <img src="http://i58.tinypic.com/rvf574.jpg"/> <figcaption> Image03 caption, width:50%. </figcaption> </figure> </section><!-- /image --> </div><!-- /pagewrap --> CSS /* General */ html, body { height:100%; width:100%; font-size:100%; color:#212121; } html, html a, section, p, h1, body, img, figure, figcaption { margin:0; padding:0; } /* Wrap */ div.pagewrap { width:80%; max-width:960px; margin:0 auto; } /* Text */ section.text { padding-top:20px; position:fixed; } section.text h1.title { opacity:1; } section.text p.information { opacity:0; } /* Image */ section.image { padding-top:100px; } section.image figure.whole img { width:100%; } section.image figure.three-forth img { width:75%; } section.image figure.two-forth img { width:50%; } section.image figcaption { opacity:0; } /* Typography */ body, h1 { font-family:"HelveticaNeue"; font-size:20px; line-height:24px; letter-spacing:0.06em; font-weight:normal; font-style:normal; }
-
Hoverover subject title, swap with subject text
http://stackoverflow.com/questions/27614481/how-to-make-hoverover-table-not-effect-other-divs/27614562?noredirect=1#comment43651245_27614562 FUNCTIONAL DEFAULT: HTML <div class="page"> <div class="text"> <span class="title">Formwork</span> <span class="info"> Formwork is a new stackable desktop storage system designed by Sam Hecht and Kim Colin for Herman Miller.<p> Sold internationally, the packaging needed to communicate the breadth and versatility of the range without text. Using pared-back props, softly-focused environments and decisive colour the carefully art-directed photography emphasises Formwork’s precision as well as its considered and playful functionality.</p> </span> </div> <div class="image"> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-SmallTray-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-LargeBox-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Formwork1_RGB-WEB.jpg" alt="" /> </div> </div> CSS html, body { margin: 0; padding: 0; width:100%; height:100%; } body { font-family: helvetica; font-size: 18px; line-height: 26px; } div.page { width:80%; max-width:960px; margin:0 auto; height:100%; } div.text { width:80%; max-width:960px; margin:0 auto; } div.text span.title { display:inline; } div.text:hover span.title { display:none; } div.text span.info { display:none; } div.text:hover span.info { display:inline; } .image img { width: 100%; height: auto; padding-top: 10px; } .text{ position: absolute; z-index: 9999; } .image{ position:relative; top:20px; }
-
Swap Text: With Bar
No-Library (pure JS), HTML, CSS, JavaScript
-
Hoverover subject title, swap with subject text
http://stackoverflow.com/questions/27614481/how-to-make-hoverover-table-not-effect-other-divs/27614562?noredirect=1#comment43651245_27614562 FUNCTIONAL DEFAULT: HTML <section class="page"> <article class="text"> <span class="title">Title ( More)</span> <span class="info"> Title Information Goes here. <p>Information Text</p> <p>Information Text</p> </span> </article> <div class="image"> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> <img src="http://webvision.med.utah.edu/wp-content/uploads/2012/06/50-percent-gray.jpg" alt=""/> </div> </section> CSS section.page article.text { width:80%; max-width:960px; margin:0 auto; } section.page article.text span.title { display:inline; } section.page article.text:hover span.title { display:none; } section.page article.text span.info { display:none; } section.page article.text:hover span.info { display:inline; } /* Irrelevent Stuff */ .image img { width: 100%; height: auto; padding-top: 10px; } .text{ position: absolute; z-index: 9999; } .image{ position:relative; top:20px; } html, body { margin: 0; padding: 0; width:100%; height:100%; } body { font-family: helvetica; font-size: 18px; line-height: 26px; } section.page { width:80%; max-width:960px; margin:0 auto; height:100%; }
-
Hoverover subject title, swap with subject text
http://stackoverflow.com/questions/27614481/how-to-make-hoverover-table-not-effect-other-divs/27614562?noredirect=1#comment43651245_27614562 FUNCTIONAL DEFAULT: HTML <div class="page"> <div class="text"> <span class="title">Formwork</span> <span class="info"> Formwork is a new stackable desktop storage system designed by Sam Hecht and Kim Colin for Herman Miller.<p> Sold internationally, the packaging needed to communicate the breadth and versatility of the range without text. Using pared-back props, softly-focused environments and decisive colour the carefully art-directed photography emphasises Formwork’s precision as well as its considered and playful functionality.</p> </span> </div> <div class="image"> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-SmallTray-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/FW-LargeBox-WEB.jpg" alt="" /> <img src="http://www.graphicthoughtfacility.com/media/uploads/images/Formwork1_RGB-WEB.jpg" alt="" /> </div> </div> CSS html, body { margin: 0; padding: 0; width:100%; height:100%; } body { font-family: helvetica; font-size: 18px; line-height: 26px; } div.page { width:80%; max-width:960px; margin:0 auto; height:100%; } div.text { width:80%; max-width:960px; margin:0 auto; } div.text span.title { display:inline; } div.text:hover span.title { display:none; } div.text span.info { display:none; } div.text:hover span.info { display:inline; } .image img { width: 100%; height: auto; padding-top: 10px; } .text{ position: absolute; z-index: 9999; } .image{ position:relative; top:20px; }
-
prven5sy
No-Library (pure JS), HTML, CSS, JavaScript
-
8og9ng0u
No-Library (pure JS), HTML, CSS, JavaScript
-
zy88d9rm
1 ROTATED NAVS Rotated left and right navigations HTML <a class="right" href="xyz">Right</a> <a class="left" href="xyz">Left</a> CSS nav a.right { right:-5px; top:26px; -webkit-transform:rotate(90deg);-moz-transform:rotate(90deg);-ms-transform:rotate(90deg);-o-transform:rotate(90deg); } nav a.left { left:0px; bottom:20px; -webkit-transform:rotate(-90deg);-moz-transform:rotate(-90deg);-ms-transform:rotate(-90deg);-o-transform:rotate(-90deg); } 2 MORE INFO Button that shows and hides info. HTML <div id="show"> <a href = "#" tabindex = "1"><span>(i)</span><span>Less Info -</span></a> <p>The second “Less info” is pressed, the “More Info” abruptly appears, shifting the “Less Info” text downwards for a split second.</p> </div> CSS #show > a:not(:focus) + p, #show > a:not(:focus) > span + span, #show > a:focus > span:first-of-type { opacity: 0; } #show > a { position: relative; display: table; margin-bottom: 30px; } #show > a > span { position: absolute; left: 0; white-space: nowrap; } #show > a:focus > span + span { opacity: 1; } #show span, #show p { transition: opacity 0.3s linear; } #show > a:focus { pointer-events: none; }