Posted inCSS Front-end Dev

Difference Between width: 100% and width: auto

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Document</title> <style> div { color: #fff; font-size: 2rem; text-align: center; } .parent { width: 600px; height: 600px;…
Posted inCSS Front-end Dev

CSS + Regex = Efficiency

CSS offers us three simple yet powerful regex-like tools: Caret (^): Finds elements where the class starts with specific characters. Example: div[class^="card"] targets all elements whose class names start with card, no matter what follows.…
Posted inCSS

a Simple CSS One-liner

The Simple CSS Code for Background Blur backdrop-filter: blur(6px); See the Pen Blurred by El Diablo (@diablo) on CodePen.
Posted inJavascript UI/UX

Simple CSS variables like A Pro

Using DOM access, you may create variables, save them, and reuse them across your style sheet. :root{ /*CSS variable*/ --primary:#900c3f; --secondary:#ff5733; } .btn{ padding:1rem 1.5 rem; background:transparent; font-weight: 700; color:…
Posted inDesign

Most Developers Fail This Simple CSS 

The Test Given the following HTML and CSS code, do you know what would be the color of the text ‘test’? <body> <div class="hello"> <p class="abc">test</p> </div></body> p.abc { color: purple;}.hello p {…