steven chaplinski ichoake
ichoake
/ fullscreen-youtube-video-background-in-pure-css.markdown
Created
November 13, 2022 16:03
FullScreen YouTube Video Background In Pure CSS
ichoake
/ fullscreen-youtube-video-background-in-pure-css.markdown
Created
November 13, 2022 15:58
FullScreen YouTube Video Background In Pure CSS
ichoake
/ basic-fullscreen-video-background.markdown
Created
November 13, 2022 15:57
Basic Fullscreen Video Background
Nifty newish html5 in a simple format.
A Pen by Matt Gross on CodePen.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css" rel="stylesheet"> | |
| <header id="banner" class="navbar navbar-defalt navbar-fixed-top"> | |
| <div class="container"><a href="#top" class="scrollable"><img src=http://www.zootemplate.com/wp-content/uploads/2014/04/bootstrap-html5-css3.png alt="HTML5 Bootstap and css" title="Saad Web Development"/></a> | |
| <button type="button" data-toggle="collapse" data-target="#navbar" aria-expanded="false" class="navbar-toggle collapsed"><span class="sr-only">Toggle navigation</span><span class="icon-bar"></span><span class="icon-bar"></span><span class="icon-bar"></span></button> | |
| <nav id="navbar" role="navigation" class="collapse navbar-collapse"> | |
| <ul class="nav navbar-nav navbar-right"> | |
| <li><a href="#top" class="scrollable">About</a></li> | |
| <li><a href="#portfolio" class="scrollable">Portfolio</a></li> | |
| <li><a href="#contact" class="scrollable">Contact</a></li> | |
| </ul> |
ichoake
/ index.html
Created
November 13, 2022 15:42
Interactive Before-After Image Comparison with visible divider
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div style="width: 80%; margin: 0 auto"> | |
| <div id="inked-painted"> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/inked-panel.png" id="inked" alt> | |
| <div id="colored"></div> | |
| </div> |
This is an Etsy shop featuring a responsive, column-based "masonry" layout written in pure CSS. Listings and pagination are handled via jQuery with an AJAX call to the Etsy API returning JSONP. In this example, I'm using a publicly available key to grab all active listings.
Simply update the AJAX url and api_key to pull listings from your own Etsy shop and display them on your website.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="😀"></div> |
ichoake
/ full-screen-video-with-parallax-scrolling.markdown
Created
November 13, 2022 15:29
Full Screen Video with Parallax Scrolling
This is a responsive layout that features a full screen "hero" video with a hardware accelerated parallax scrolling effect. You can play/pause the video at any time, set different scroll rates to as many elements as you like as well as add additional CSS transitions using jQuery.
ichoake
/ 3d-text-with-text-shadow.markdown
Created
November 13, 2022 15:27
3D-Text with Text-Shadow