Daily micro-tips for C#, SQL, performance, and scalable backend engineering.
🎨 Filter Effects = Visual Magic Images need effects. CSS filters apply visual effects. Blur, brightness, contrast — no Photoshop needed. 📝 Filter Functions /* Blur */ filter: blur(5px); filter: blur(2px); /* Brightness */ filter: brightness(0.8); filter: brightness(1.2); filter: brightness(200%); /* Contrast */ filter: contrast(1.5); filter: contrast(200%); /* Grayscale */ filter: grayscale(100%); filter: grayscale(0.5); /* […]
🌈 Gradients = Color Transitions Solid colors are basic. Gradients create smooth transitions. Modern, vibrant, professional. 📝 Gradient Types /* Linear Gradient */ background: linear-gradient(to right, red, blue); background: linear-gradient(45deg, red, blue); background: linear-gradient(to bottom, red, yellow, green); /* Radial Gradient */ background: radial-gradient(circle, red, blue); background: radial-gradient(ellipse, red, blue); background: radial-gradient(circle at 50% 50%, […]
🔵 Border Radius = Rounded Corners Sharp corners are harsh. Border radius creates smooth corners. Modern, friendly, professional. 📝 Border Radius Basics /* Single value (all corners) */ border-radius: 10px; border-radius: 50%; /* Circle/ellipse */ /* Two values (top-left/bottom-right top-right/bottom-left) */ border-radius: 10px 20px; /* Three values */ border-radius: 10px 20px 30px; /* Four values […]
📍 Position = Layout Control Elements need precise positioning. Position property controls layout. Static, relative, absolute, fixed, sticky. 📝 Position Types /* Static (default) */ position: static; – Normal flow – No positioning /* Relative */ position: relative; – Relative to normal position – Offset with top, right, bottom, left – Other elements not affected […]
📐 Display = Layout Control Display controls layout. Block, inline, flex, grid — choose right display for perfect layout. 📝 Display Types /* Block */ display: block; – Full width – Line break before/after – Margin, padding, width, height – Examples: div, p, h1, section /* Inline */ display: inline; – Only as wide as […]
📦 Box Model = Layout Foundation CSS layout starts with box model. Understanding box model creates perfect layouts. Margin, border, padding, content. 📝 Box Model Properties /* Content area */ width: 200px; height: 100px; /* Padding (inside) */ padding: 20px; padding-top: 10px; padding-right: 15px; padding-bottom: 10px; padding-left: 15px; /* Border */ border: 1px solid #333; […]
📚 Z-Index = Stack Order Elements overlap. Z-index controls stacking order. Modals, tooltips, dropdowns — proper layering. 📝 Z-Index Basics /* Basic usage */ .modal { z-index: 1000; position: fixed; } .tooltip { z-index: 100; position: absolute; } .dropdown { z-index: 50; position: relative; } /* Stacking context */ .parent { position: relative; z-index: 1; […]
📐 CSS Units = Perfect Sizing Wrong units break designs. CSS units matter. px, em, rem, vh, vw — choose wisely. 📝 Unit Types /* Absolute Units */ px → Pixels (fixed) pt → Points (print) pc → Picas (print) /* Relative Units (Font) */ em → Relative to parent font-size rem → Relative to […]
🎨 Pseudo Elements = Extra Content Need extra elements without extra HTML? ::before and ::after add content via CSS. 📝 Pseudo Element Basics /* Basic usage */ .element::before { content: “★”; color: gold; margin-right: 5px; } .element::after { content: ” →”; color: blue; } /* Required: content property */ .element::before { content: “”; /* Empty […]
🎨 CSS Variables = Maintainable Styles Hardcoded colors are bad. CSS variables centralize values. Change once, update everywhere. 📝 CSS Variables Basics /* Define variables */ :root { –primary-color: #3498db; –secondary-color: #2ecc71; –text-color: #333; –spacing: 16px; –border-radius: 4px; –font-size: 16px; } /* Use variables */ .button { background: var(–primary-color); color: white; padding: var(–spacing); border-radius: var(–border-radius); […]
📦 Container Queries = Component Responsive Media queries are page-based. Container queries are component-based. Responsive design at component level. 📝 Container Query Basics /* Container definition */ .card-container { container-type: inline-size; container-name: card; } /* Container query */ @container card (min-width: 400px) { .card { display: flex; flex-direction: row; } .card-image { width: 200px; } […]
🎯 CSS Transforms = 2D & 3D Effects Static elements are basic. CSS transforms enable 2D and 3D effects. Rotate, scale, skew, translate — visual magic. 📝 2D Transforms /* Translate (move) */ transform: translate(50px, 100px); transform: translateX(50px); transform: translateY(50px); /* Rotate */ transform: rotate(45deg); transform: rotate(0.5turn); transform: rotate(3.14rad); /* Scale (zoom) */ transform: scale(1.5); […]
📱 Media Queries = Responsive Design One size fits none. Media queries make responsive designs. Mobile, tablet, desktop — adapt to every screen. 📝 Media Query Syntax /* Basic syntax */ @media (condition) { /* CSS rules */ } /* Width-based */ @media (max-width: 768px) { /* Mobile styles */ } @media (min-width: 769px) and […]
🎬 CSS Animations = Motion Magic Static pages are boring. CSS animations bring life. Transitions, keyframes, motion — engaging user experiences. 📝 Transitions vs Animations /* Transitions (state changes) */ .button { background: blue; transition: background 0.3s ease, transform 0.2s ease; } .button:hover { background: darkblue; transform: scale(1.05); } /* Keyframe Animations (complex sequences) */ […]
🎨 CSS Variables = Maintainable Styles Hardcoded colors are bad. CSS variables centralize values. Change once, update everywhere. Theming made easy. 📝 Variable Basics /* Define variables */ :root { –primary-color: #3498db; –secondary-color: #2ecc71; –text-color: #333; –spacing-unit: 16px; –border-radius: 4px; } /* Use variables */ .button { background-color: var(–primary-color); color: white; padding: var(–spacing-unit); border-radius: var(–border-radius); […]
📐 CSS Grid = Two-Dimensional Layouts Flexbox is one-dimensional. CSS Grid handles rows AND columns. Complex layouts made simple. ❌ Complex Flexbox Layout .container { display: flex; flex-wrap: wrap; } .item { flex: 1 0 30%; } ✅ Clean Grid Layout .container { display: grid; grid-template-columns: repeat(3, 1fr); } 📝 Grid Properties /* Container Properties […]
📐 Flexbox = One-Dimensional Layouts Floats are dead. Flexbox is modern. Align, distribute, order — all with CSS. Essential for responsive design. ❌ Float Layout .container { overflow: hidden; } .item { float: left; width: 33.33%; padding: 10px; } ✅ Flexbox Layout .container { display: flex; flex-wrap: wrap; } .item { flex: 1 0 33.33%; […]
🛡️ Add Depth with Box Shadow Flat design is basic. Box shadow adds depth. Realistic depth, elevation, focus. Essential for modern UI. 📝 Box Shadow Syntax /* offset-x offset-y blur-radius spread-radius color */ box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* Multiple shadows */ box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06); /* Inset shadow (inner) […]
🎬 Smooth State Changes Instant state changes are jarring. CSS transitions animate changes. Smooth hover, focus, state transitions. 📝 Transition Syntax /* property duration timing-function delay */ transition: background 0.3s ease; /* Multiple properties */ transition: background 0.3s, transform 0.3s, opacity 0.5s; /* All properties (not recommended) */ transition: all 0.3s ease; /* Specific example […]
✨ ::before and ::after = Extra Elements Without HTML Need icons, decorations, or counters? ::before and ::after create extra content via CSS. Clean HTML, powerful styling. ❌ Without ::before <div class=”quote”> <span>❝</span> Text <span>❞</span> </div> ✅ With ::before <div class=”quote”> Text </div> .quote::before { content: “❝”; } .quote::after { content: “❞”; } 🎯 Practical Examples […]
📐 Margin Outside, Padding Inside Spacing confuses beginners. Margin is outside the element. Padding is inside. Use margin for spacing elements, padding for spacing content. ↔️ Margin .box { margin: 20px; /* Space outside */ margin-top: 10px; margin-bottom: 10px; margin-left: 20px; margin-right: 20px; margin: 10px 20px; /* top/bottom, left/right */ margin: 10px 20px 30px 40px; […]
📐 Display = Layout Behavior display: block vs inline vs flex vs grid. Understanding display is key to CSS layouts. Choose the right one. 📝 Display Values /* Block: Takes full width, starts new line */ .block { display: block; width: 100%; } /* Inline: Takes only needed width, no new line */ .inline { […]
📐 Elements Stack in 3D HTML elements stack vertically. Z-index controls overlap. Put modals on top, backgrounds behind. 📝 Z-Index Basics .modal { position: fixed; z-index: 1000; /* High number = on top */ } .dropdown { position: absolute; z-index: 100; /* Above content, below modal */ } .tooltip { position: absolute; z-index: 200; /* […]
🌈 Solid Colors Are Boring Gradients add depth and visual interest. CSS gradients are easy, fast, no images needed. 📝 Gradient Types /* Linear Gradient */ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(to right, #f093fb, #f5576c); background: linear-gradient(180deg, #4facfe, #00f2fe); /* Radial Gradient */ background: radial-gradient(circle, #ff6b6b, #ee5a6f); background: radial-gradient(ellipse, #56ab2f, #a8e063); /* Conic […]
🖱️ :hover, :active, :focus = Interactive Feedback Static UI is boring. Pseudo classes add interactivity. Hover, click, focus — responsive UI. 📝 Common Pseudo Classes /* Hover (mouse over) */ .button:hover { background: #2980b9; transform: scale(1.05); } /* Active (clicked) */ .button:active { transform: scale(0.95); } /* Focus (tabbed or clicked input) */ input:focus { […]
🌊 Float was Used for Layouts Before Flexbox Floats are legacy. Float wraps text around images, creates multi-column layouts. Learn for legacy code maintenance. 📝 Float Values /* Float left/right */ img { float: left; margin-right: 10px; } /* Clear floats */ .clearfix::after { content: ”; display: table; clear: both; } /* Common layout (legacy) […]
🔄 Sharp Corners Look Amateur Rounded corners = modern design. border-radius rounds corners. Cards, buttons, images — softer, friendlier. 📝 Border Radius Syntax /* All corners */ border-radius: 8px; /* Individual corners */ border-radius: 4px 8px 12px 16px; /* top-left, top-right, bottom-right, bottom-left */ /* Different horizontal and vertical */ border-radius: 20px 10px; /* 20px […]
🔄 Scale, Rotate, Translate — All in CSS JavaScript animations are slow. CSS transform is hardware-accelerated. Smooth animations, better performance. 📝 Transform Functions /* Scale */ transform: scale(1.5); /* 1.5x size */ transform: scaleX(2); /* 2x width */ transform: scaleY(0.5); /* 0.5x height */ /* Rotate */ transform: rotate(45deg); /* 45 degrees */ transform: rotateX(180deg); […]
📱 Desktop, Tablet, Mobile — One CSS Without media queries, same design everywhere. Media queries adapt to screen size. Different layouts for mobile, tablet, desktop. 📝 Basic Media Queries /* Mobile first (default) */ .container { display: block; } /* Tablet */ @media (min-width: 768px) { .container { display: grid; grid-template-columns: 1fr 1fr; } } […]
🖱️ Make Your UI Feel Alive Static UI is boring. Hover effects give feedback. Buttons change color, cards lift, links underline. Better UX, professional feel. 📝 Common Hover Effects /* Button hover */ .button { background: #3498db; transition: background 0.3s ease; } .button:hover { background: #2980b9; } /* Card lift */ .card { transition: transform […]