Today, I would like to share with you how to make a Breadcrumbs. Breadcrumbs show the hierarchy of content between the site's root and the user's current location.
This file contains 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
| - const POSITIONS = ['middle', 'left', 'right', 'bottom'] | |
| mixin shirt(posIndex) | |
| svg.t-shirt(class=`t-shirt--${POSITIONS[posIndex]}` xmlns='http://www.w3.org/2000/svg' width='245' height='230' viewbox='0 0 64.8 60.9') | |
| defs | |
| if (posIndex === 0) | |
| clipPath#clipMain | |
| rect(width="65" height="61") | |
| if (posIndex === 1) | |
| clipPath#clipLeft | |
| rect(width="22.5" height="61") |
Chat bubble to close animation
A Pen by Mikael Ainalem on CodePen.
w3tweaks
/ css-in-css-with-a-lot-of-c-and-s.markdown
Created
October 12, 2020 23:35
CSS in CSS with a lot of C and S
A Pen by Giulia Cardieri on CodePen.
A Pen by Álex S. Lérida on CodePen.
w3tweaks
/ css-shapes-forest-collection-spring-summer-2020.markdown
Created
October 11, 2020 00:41
CSS Shapes Forest Collection spring summer 2020
A set of fun one-div css shapes
A Pen by Paulina Hetman on CodePen.
A tongue-in-cheek checklist to give to your next client. 😛
Uses sass, emoji, vanilla JS (tried Vue at first, but it turned out to be less complicated to just handle everything in vanilla JS than to implement the proper watchers), and a sprinkling of variable fonts transformation.
A Pen by Josh Collinsworth on CodePen.
A Pen by Manan Tank on CodePen.
This file contains 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="poster"> | |
| <div class="subtitle-reverse"> | |
| <h2 class="subtitle-clipped--title">Reservoir</h2> | |
| </div> | |
| <div class="title-clipped"> | |
| <h1 class="title-clipped--title">Dog</h1> | |
| </div> | |
| <div class="tagline"> | |
| <p>The story of a dog who loved standing in the water bowl</p> |
w3tweaks
/ clipped-overlapping-grid-items.markdown
Created
September 30, 2020 16:59
Clipped overlapping grid items
NewerOlder