The final demo. Read the full tutorial for more details.
A Pen by Envato Tuts+ on CodePen.
CodeAkuma
CodeAkuma
/ css-grid-layout-and-comics-as-explained-by-barry-the-cat.markdown
Created
June 9, 2023 14:45
CSS Grid Layout and Comics (as Explained by Barry the Cat)
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
| <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=""> |
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
| <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.
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
| 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!
NewerOlder