CSS Ninja and get used to practice SCSS syntax
VSCode extension - Live Sass Compiler
// .vscode/settings.json
{
"liveSassCompile.settings.formats": [
// This is Default.
{
"format": "expanded",
"extensionName": ".css"
// "savePath": "~/../css"
}
],
"liveSassCompile.settings.generateMap": false
}
And click "Watch sass" on the bottom bar
Click to Contract/Expend
.loader {
transform-style: preserve-3d;
transform: perspective(500px) rotateX(60deg);
}
// For loop
@for $i from 1 through 15 {
span:nth-child(#{$i}) {
top: ($i - 1) * 10 + px;
left: ($i - 1) * 10 + px;
bottom: ($i - 1) * 10 + px;
right: ($i - 1) * 10 + px;
animation-delay: ($i - 1) / 10 + s;
}
}
ionicons - apple logo: open source icons
blobs.app - blob shape generator
* {
background-attachment: fixed;
backdrop-filter: blur(4px);
}
section img#moon {
mix-blend-mode: screen;
white-space: nowrap;
}
.details .table {
border-collapse: collapse;
}
.main.active .toggle {
left: initial;
}
CSS initial Keyword - W3schools
.container .block {
background-attachment: fixed;
}