This pen shows how CSS Grid (with flexbox fallback) can be used to create a responsive image gallery with no media queries.
A Pen by George W. Park 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
| <section id="gallery"> | |
| <div class="container"> | |
| <div id="image-gallery"> | |
| <div class="row"> | |
| <div class="col-lg-3 col-md-6 col-sm-6 col-xs-12 image"> | |
| <div class="img-wrapper"> | |
| <a href="https://unsplash.it/500"><img src="https://unsplash.it/500" class="img-responsive"></a> | |
| <div class="img-overlay"> | |
| <i class="fa fa-plus-circle" aria-hidden="true"></i> | |
| </div> |
rleaf
/ image-gallery-with-css-grid-flexbox.markdown
Created
December 4, 2019 01:05
Image Gallery with CSS Grid & Flexbox
Image gallery made with Flexbox and CSS Grid.
A Pen by Katherine Kato on CodePen.
rleaf
/ changing-background-color-while-scrolling.markdown
Created
October 7, 2019 03:44
Changing Background Color while scrolling
I wanted to create something simple with a jQuery plugin that I am working on.
A Pen by JP Nothard on CodePen.
A Pen by Obada Qawwas on CodePen.
rleaf
/ element-fade-out-on-scroll.markdown
Created
October 6, 2019 03:45
Element Fade Out on Scroll
A Pen by Nick Ciliak 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
| <canvas id="canvas"></canvas> |
rleaf
/ animated-background-gradient.markdown
Created
May 26, 2019 17:28
Animated Background Gradient
A Pen by Mario Klingemann on CodePen.
rleaf
/ animated-background-gradient.markdown
Created
February 11, 2019 18:23
Animated Background Gradient
A Pen by Captain Anonymous on CodePen.
Example treatment for a custom round checkbox.
A Pen by Matt Smith on CodePen.