/css-practice

Youtube Online Tutorials

Primary LanguageCSS

CSS Practice

Youtube Online Tutorials

Goal

CSS Ninja and get used to practice SCSS syntax

Setup

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

details

Click to Contract/Expend

1115. Remake | CSS 3D Wavy Circle Loader Animation Effects

.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;
  }
}

1856. CSS Water Drop Logo Effect | Html CSS Dropmorphism

ionicons - apple logo: open source icons

1848. Smooth Animated Blob using CSS & SVG | Html CSS Blobs Animation Effects

blobs.app - blob shape generator

1837. Ambient Light Effects | CSS 3D Glowing Cube Animation Effects

sass maps

1794. Quick CSS Loading Animation | Html CSS Animation Effects

Fancy Border Radius Generator

1701. CSS Glassmorphism Product Card Slider UI Design | Html CSS and Javascript

* {
  background-attachment: fixed;
  backdrop-filter: blur(4px);
}

1690. Parallax Scrolling Website | How to Make Website using Html CSS & Javascript

section img#moon {
  mix-blend-mode: screen;
  white-space: nowrap;
}

1808. Create Responsive Admin Dashboard

.details .table {
  border-collapse: collapse;
}
.main.active .toggle {
  left: initial;
}

CSS initial Keyword - W3schools

1811. Chart JS Integration | Responsive Admin Dashboard

Chart JS

1866. Thanos | Image Distortion Effect using Html CSS & Anime.js

.container .block {
  background-attachment: fixed;
}