Component Naming Conventions in React
6 min readIn the Browser
Three naming conventions for components that clash with your UI library — wrapping, naming by purpose, and prefixes — with the tradeoffs of each.
Category
In the Browser
JavaScript, CSS, HTML and DOM tutorials covering what really happens once your code reaches the browser, explained with practical examples.
Simple Ways to Create a CSS Overlay Effect
5 min readIn the Browser
Lay a gradient or solid tint over an image using a ::before pseudo-element. Four copy-ready overlays with before-and-after photos.
The border-image-slice CSS Property
4 min readIn the Browser
Slice a photo into a nine-patch grid and wrap it around a box. What one, two, three and four border-image-slice values each do.
CSS Gradient Borders with border-image
11 min readIn the Browser
Turn a plain border into a gradient with border-image and border-image-slice. Linear, radial and conic examples, no image files needed.
clip-path: inset() Explained
5 min readIn the Browser
Crop an element by pushing its sides in with clip-path: inset(). What one, two, three and four values do, plus the round keyword.
CSS Triangles with clip-path
5 min readIn the Browser
Copy-ready clip-path: polygon() code for triangles — right, isosceles, acute and obtuse — all built by moving one corner of a square.
CSS Arrow Shapes with clip-path
5 min readIn the Browser
Copy-ready clip-path: polygon() code for direction signs, arrows and pointers in all four directions, with a diagram for every shape.
Clip-path For Quick Polygons – Ready Code-To-Copy
4 min readIn the Browser
Copy-ready clip-path: polygon() code for pentagons, hexagons, heptagons, octagons, nonagons and decagons, with diagrams for each.
clip-path: circle() Explained
8 min readIn the Browser
Crop any element to a circle with clip-path: circle(). Radius, positioning with at, and how to isolate one face in a group photo.
Infinite CSS Flip Card Animation
6 min readIn the Browser
Spin a card forever with animation plus @keyframes — around X, around Y or both — and the rotation value that makes it snap back.
CSS Flip Card Animation on Hover
5 min readIn the Browser
Flip a card on hover with transform: rotateY() and a transition — around X, around Y or both, and how to make it flip back on hover-out.
HTML for Blinking Text – Simple Copy & Paste Code
2 min readIn the Browser
The HTML blink tag is obsolete and no longer works in any browser. Here is the CSS animation that recreates blinking text, ready to copy and paste.
The CSS text-shadow Property
3 min readIn the Browser
Five worked text-shadow examples — positive and negative offsets, stacked colors, and the blur value that ruins readability.
How To Build Stunning Rounded Text – Handy Tips
7 min readIn the Browser
Bend a line of text into a circle with one span per letter, absolute positioning and transform: rotate(). Full copy-ready coordinates.
Made Easy With Reusable Code – Why Classes Matter
2 min readIn the Browser
Style many elements at once with a single CSS class, then name it so it still makes sense in six months. With do and don't examples.
Circular CSS Button with Shadow Effect
8 min readIn the Browser
Build a round push-button in CSS: inset shadows for the base, a gradient face, hover and active states, and a soft shadow underneath.
How inset Works in box-shadow (Made Simple)
3 min readIn the Browser
The inset keyword draws a shadow inside the element instead of around it. Here is how to build a soft pressed-in effect with two shadows.
How box-shadow Works (Made Simple)
2 min readIn the Browser
What each box-shadow value actually does — offset, blur, spread and color — built up step by step on one simple box you can copy.
CSS Water Drop Effect on Text
7 min readIn the Browser
Sit a glossy CSS water drop on top of a heading using border-radius, layered box-shadows and two pseudo-element highlights.
CSS Neon Text Effect
5 min readIn the Browser
Build a glowing neon sign with nothing but layered box-shadow and text-shadow — outer glow, inset glow and a matching text halo.
CSS Grayscale Filter – A Complete Guide
10 min readIn the Browser
Apply filter: grayscale() to text, backgrounds, photos, SVG, Font Awesome icons and emoji — with a before-and-after for every case.
CSS Conic Gradient Made Easy
12 min readIn the Browser
Sweep colors around a point with conic-gradient. Move the center, set the start angle, add color stops and build pie-chart style wedges.
How To Create A Stunning Gray CSS Water Drop
5 min readIn the Browser
Draw a water drop in pure CSS: an uneven border-radius, four stacked box-shadows for volume, and two pseudo-elements for the highlights.
CSS Folded Corner Effect with clip-path
7 min readIn the Browser
Build a folded paper corner with clip-path and a ::before pseudo-element — no images, and a drop-shadow trick that clipped boxes allow.
CSS Keyframes Animation Explained
9 min readIn the Browser
Build a @keyframes animation one layer at a time — color, shape, position, rotation and delay — on a single box, with the shorthand at the end.
The CSS last-child Selector
5 min readIn the Browser
:last-child targets the final element inside its parent. Worked examples on lists and paragraphs, plus the :nth-last-child(1) equivalent.
What Does span Do in HTML?
4 min readIn the Browser
What the HTML span tag is for, how it differs from div, and how to style a single word — or a single letter — without breaking the line.
CSS Filters: Opacity and Saturate
4 min readIn the Browser
Use filter: opacity() to fade an image into its background and filter: saturate() to dial its colors up or down. Side-by-side examples.
CSS Filters: Adjust Contrast and Brightness
5 min readIn the Browser
Control light and dark in an image with filter: contrast() and filter: brightness(). What each percentage does, with side-by-side photos.
Using CSS Opacity for Transparency
3 min readIn the Browser
How the CSS opacity property works from 0 to 1, how to fade it smoothly on hover, and why a parent background tints its children.
CSS Word Spacing – How to Do It Right
2 min readIn the Browser
word-spacing controls the gap between words. Three headings compared — normal, widened and negative — and the values worth avoiding.
nth-child vs nth-of-type in CSS
2 min readIn the Browser
:nth-child() counts every sibling; :nth-of-type() counts only elements of that tag. The same markup styled both ways, side by side.
How To Make CSS Reflection – The Easy Way
3 min readIn the Browser
Mirror any element with a single declaration: -webkit-box-reflect. Direction, distance, and a linear-gradient fade-out, with examples.
Make Your Work Easier by Using Variables in CSS
6 min readIn the Browser
CSS custom properties from scratch: declaring them in :root, global vs local scope, combining them, and how var() fallbacks really work.
HTML Lists: ol, ul and dl Explained
4 min readIn the Browser
Ordered, unordered and description lists in HTML — nesting them, swapping the marker for an image or emoji, and going horizontal.
Is CSS Case-Sensitive?
2 min readIn the Browser
Property names and keyword values in CSS are case-insensitive, so GREEN and green are the same. Class and id names are not — here is why.
CSS Letter Spacing – Working on The Correct Way
2 min readIn the Browser
letter-spacing sets the gap between characters. Three headings compared side by side, plus the negative value that ruins legibility.
The CSS nth-of-type Selector Explained
3 min readIn the Browser
:nth-of-type() counts elements by tag, not by position among siblings. Target one, target all with (n), or target several types at once.
Drop-shadow VS Box-shadow: What is the difference?
4 min readIn the Browser
box-shadow follows an element's rectangle. filter: drop-shadow() follows its real shape. See both side by side on a CSS bee you can copy.
The CSS Sepia Filter Explained
3 min readIn the Browser
Give photos an aged, brownish look with filter: sepia(). Worked example, before-and-after images, and how to stack it with grayscale.
How to Make Grayscale Images with CSS
2 min readIn the Browser
Turn a photo black and white with the CSS filter: grayscale() property. A short worked example comparing the original, 50% and 100%.
How to Make A Blinking Animation Using CSS
5 min readIn the Browser
Build a pair of blinking cartoon eyes in pure CSS — an eyelid pseudo-element animated by a @keyframes rule with a natural double blink.
CSS backdrop-filter: grayscale()
3 min readIn the Browser
backdrop-filter: grayscale() desaturates what is behind an element, leaving its own content untouched. Worked example plus a value table.
How To Calculate CSS Line Height
2 min readIn the Browser
How line-height sets the space above and below a line of text, what normal actually resolves to, and why negative values are ignored.
The CSS nth-child Selector Explained
12 min readIn the Browser
Every :nth-child() pattern worked out on the same seven elements — odd, even, 3n, n+3, -n+3, ranges and counting backwards.
Introduction To The Powerful CSS Blur Effect
5 min readIn the Browser
Build a frosted-glass panel with backdrop-filter: blur(), step by step — including the overflow: hidden fix for a blur that bleeds out.
Transparent Button in CSS
6 min readIn the Browser
Build a transparent button in HTML and CSS: shadows instead of a background, plus hover and active states that swap the label text.
How To Make A CSS Text Reflection Effect
6 min readIn the Browser
Mirror a heading under itself using a ::before pseudo-element, rotate(180deg) scaleX(-1), and a gradient clipped to the text.
CSS Linear Gradient: A Practical Guide
5 min readIn the Browser
Control linear-gradient direction with keywords or degrees, then use percentage color stops for soft blends or hard-edged stripes.
How To Make a CSS Shine Effect Animation
11 min readIn the Browser
Sweep a glossy highlight across an element: a skewed ::before pseudo-element, overflow: hidden, and a two-stop @keyframes animation.
Learn How to Select Only the CSS First Child
6 min readIn the Browser
:first-child in CSS with five worked examples — lists, paragraphs, multiple parents, and :not(:first-child) — each with the Sass form.
Javascript Array Methods Explained
9 min readIn the Browser
The Javascript array methods you’ll actually use — map, filter, reduce, find, some, every, slice, splice and more — each with a short, clear example.
CSS Flip Card with Two Sides
11 min readIn the Browser
Build a two-sided card that flips on hover with transform-style: preserve-3d and backface-visibility: hidden — on the X or the Y axis.
How to Make Rainbow Text in CSS
3 min readIn the Browser
Make rainbow text in CSS with a linear-gradient, background-clip: text and color: transparent — three declarations, shown step by step.
What Is the CSS Box Model in Simple Terms
5 min readIn the Browser
Content, border, padding and margin explained with one worked example — including how to add up an element's real width and height.
How to Use !important in CSS
4 min readIn the Browser
!important overrides every other declaration for a property. Where the flag goes, a worked id/class/type example, and why to avoid it.
Striped Text Effect in CSS
3 min readIn the Browser
Fill text with black and white stripes using a linear-gradient, background-clip: text and color: transparent. Three stripe directions.
How To Make A CSS Reflection Effect
4 min readIn the Browser
Build a mirror-like reflection under any block with a ::before pseudo-element, a fading linear-gradient and a touch of opacity.
CSS Radial Gradient: A Practical Guide
6 min readIn the Browser
Blend colors outward from a point with radial-gradient. Circle vs ellipse, moving the center to a side or corner, and target-like rings.
CSS Scale on Hover with transform
12 min readIn the Browser
Grow or shrink an element on hover with transform: scale(). Eight examples covering both axes, scaleX and scaleY, plus a transition.
CSS Colorful Text – Crafting Vibrant Effects
5 min readIn the Browser
Layer a gradient fill, a colored outline and a drop shadow onto the same heading, one declaration at a time, with a screenshot per step.
CSS Text Outline Effect
2 min readIn the Browser
Outline text and hollow out the middle with -webkit-text-stroke plus color: transparent. Step-by-step, with the split width/color form.
CSS Border Styles Explained
9 min readIn the Browser
Border style, width, color, the shorthand and border-radius, with worked examples for single sides, mixed sides and curved corners.
CSS Text Decoration Explained with Examples
6 min readIn the Browser
Underline, overline and line-through in CSS: the line, style, color and thickness properties, how to mix them, and the shorthand.
CSS box-sizing: border-box Explained
4 min readIn the Browser
Why a 300px box ends up 350px wide, and how box-sizing: border-box fixes it. Both models compared with the maths written out.
How to Center in CSS Using Different Ways
8 min readIn the Browser
Four ways to centre an element in CSS — flexbox, grid, place-items and absolute positioning — compared on the same box, plus what to avoid.
What You Need to Know About CSS Color Methods
7 min readIn the Browser
CSS color names, HEX, RGB and HSL side by side — what each value means and how to add an alpha channel to every one of them.
CSS Selectors: A Complete Guide
6 min readIn the Browser
Every CSS selector a beginner needs: universal, class, id, type, the four combinators, and the ::before, ::after and :hover pseudo-classes.
How To Work With CSS Syntax: The Correct Way!
1 min readIn the Browser
Every CSS rule has four parts: selector, declaration block, property and value. Here is what each one is called and where it goes.
HTML Text Formatting Elements
4 min readIn the Browser
Format text with HTML alone — b, strong, i, em, u, del, mark, sub and sup — plus when to reach for strong over b, with br and hr.
The Most Useful HTML Elements
11 min readIn the Browser
A working reference for the HTML elements you actually use — head tags, body tags, lists, tables and images — with a snippet for each.