Me, just doing silly stuff with CSS. https://codepen.io/dyarfi/pen/Vwvrmxy

CSS Preprocessor Are Fun To Use, Especially SCSS

Making Layouts, Cards, Buttons, and Hover Effects has never been this playful

Photo by Erik Mclean on Unsplash

Introduction

CSS is a very talented famous escape artist. He creates beautiful colors, is a master magician of tricks, hypnosis, and is a great deceiver.

SCSS / SASS is the CSS preprocessor that I used almost all in my front-end web development projects. SCSS help me a lot in organizing with designing my CSS workflow on BEM design and minifying the final CSS build assets.

Making Magazine Layouts

Magazine look-alike layout in HTML Screenshot

Responsive magazine layout with Bootstrap framework and SCSS library.

HTML:

Magazine look-alike layout a in HTML

SCSS:

Magazine look-alike layout SCSS

CodePen:

Magazine layout in CodePen

Making Cards

Dark custom Bootstrap cards

A dark custom Bootstrap card with hover effect using SCSS and responsive design.

HTML:

Dark custom Bootstrap cards HTML

SCSS:

Dark custom Bootstrap cards SCSS

CodePen:

Making Buttons

Button icons hover reveal with Bootstrap

A collection of button hover reveals libraries from Font Awesome, Material Design, Ionicons, and Typicons with the framework from the Bootstrap CSS.

HTML:

Button hover reveal HTML

SCSS:

Button hover reveal SCSS

CodePen:

Making a Text Glowing Animation

Glowing hello world text

HTML and SCSS setup with minimal tags such as HELLO WORLD, start the CSS magic begin.

HTML:

Glowing hello world text HTML

SCSS:

Glowing hello world text SCSS

CodePen:

Result of Glowing hello world text in CodePen.

Making an Offside Text

HTML and SCSS setup with minimal tags and library from Bootstrap for offside text.

HTML:

Offside text HTML

SCSS:

Offside text SCSS

CodePen:

Offside text CodePen HTML result

Further Reading:

HTML and SCSS development in Visual Studio Code

Button icon hover reveal with CSS / SCSS

Front End Development with Gulp, Twig, and SCSS — HTML Pages