Ryan Lin rleaf

Background Noise - Canvas

A Pen by Ibe on CodePen.

License.

Bootstrap Lightbox Image Gallery

Modal image gallery - lightbox built in Bootstrap.

A Pen by Patrycja on CodePen.

License.

Basic animation using jquery

Learning how to animate using basic jquery and some callback function.

A Pen by Febby Gunawan on CodePen.

License.

CSS3 on scroll fade in navigation background

I had a comment on a previous pen (http://codepen.io/willpaige/pen/optzh) that they had used exactly the same technique, but using CSS instead. So I decided to give it a go!

Its a useful animation/style when using a fixed nav which needs more definition further down the page.

A Pen by Will Paige on CodePen.

License.

CSS Click to enlarge image in light box

A Pen by Tiffany Ong on CodePen.

License.

	<script src="https://threejs.org/build/three.min.js"></script>
	<script src="https://threejs.org/examples/js/controls/OrbitControls.js"></script>
	<script src="https://threejs.org/examples/js/renderers/CSS3DRenderer.js"></script>

	<div id="css"></div>
	<div id="webgl"></div>

	<section class="container-fluid gallery bg-faded">
	<header>
	<h1 class="text-center">Masonry Gallery</h1>
	</header>
	<div class="grid">
	<a href="#" class="grid__item grid__sizer">
	<div class="item__overlay">
	<button class="js-button btn btn-secondary-outline center-block" data-toggle="modal" data-target="#modalPicture" type="button" value="Expand photo" role="button">Expand photo</button>
	</div>
	<img src="http://ultraimg.com/images/photo-1.jpg" alt="Credits to Unsplash.com" />

	<html ng-app="ionicApp">
	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">

	<title>Ionic Fullscreen Image</title>

	<link href="//code.ionicframework.com/1.0.0-rc.1/css/ionic.min.css" rel="stylesheet">
	<script src="//code.ionicframework.com/1.0.0-rc.1/js/ionic.bundle.js"></script>
	</head>

	<body>
	<h1 class="text-center">Responsive Bootstrap Masonry Gallery</h1>
	<div class="container">
	<div class="gallery row">


	<!-- 3 -->
	<div class="gallery-list col-md-4 col-xs-6">
	<div class="image-grid">
	<img src="https://static.pexels.com/photos/7919/pexels-photo.jpg">

	/*To-Do
	-Make gradients cross browser
	http://stackoverflow.com/questions/7546638/css3-cross-browser-linear-gradient
	-Clean up :before and :after structure for both html and body
	-Make every nth line 1px thicker, or less opaque(accomplished in gradient)
	*/

	/*
	background: rgba(87,196,250,1);
	background: -moz-radial-gradient(center, ellipse cover, rgba(87,196,250,1) 0%, rgba(10,128,254,1) 100%);