The final demo. Read the full tutorial for more details.
A Pen by Envato Tuts+ on CodePen.
The final demo. Read the full tutorial for more details.
A Pen by Envato Tuts+ on CodePen.
| <h4>Trying to recreate <a target="_blank" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/full.jpg">this</a> using CSS Grid and Clip-path.</h4> | |
| <section class="grid"> | |
| <figure> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg" alt=""> | |
| <figcaption> | |
| <div><div><h3>Ms Marvel</h3></div></div> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg" alt=""> |
| <h4>Trying to recreate <a target="_blank" href="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/full.jpg">this</a> using CSS Grid and Clip-path.</h4> | |
| <section class="grid"> | |
| <figure> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/1.jpg" alt=""> | |
| <figcaption> | |
| <div><div><h3>Ms Marvel</h3></div></div> | |
| </figcaption> | |
| </figure> | |
| <figure> | |
| <img src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/3794/2.jpg" alt=""> |
Recreation of a print layout from The Intelligent Lifestyle Magazine book using CSS Grid.
A Pen by Jules Forrest on CodePen.
Recreation of a print menu from The Phoenicia Diner in Phoenicia, NY using CSS Grid.
A Pen by Jules Forrest on CodePen.
| form | |
| input(type="checkbox",id="sideways") | |
| label(for="sideways")="Turn Sideways" | |
| main | |
| .col | |
| table | |
| thead | |
| tr | |
| th(colspan=2)="Subjective score instructor use only" | |
| tbody |
Just another CSS grid demo. This time, it’s an interactive Apple USB keyboard (without the cable).
Update 6/7/18: reduced JS code
A Pen by Jon Kantner on CodePen.
My very first CSS Grid Experiment!
So I can't actually group them together in a cluster like an actual periodic table or it wouldn't make sense or would look too forced 😔
One of my fondest memories of 2018 is when I found the resolve to deactivate Facebook, only to have my team lead tell me I'm in charge of Facebook ads a week later. No escape from Zuckerberg!