TOP 19 CSS Border Examples
PURE CSS CIRCULAR BORDER PATTERNS The border patterns are created with clip-path on a pseudo-element. Author Ana Tudor December 27,...
✦ Developer-First Web Tutorials & Free Templates
Architect your frontend with code templates, tutorials, & guides.
Open-source engineering perspectives on modern CSS layouts, JavaScript UI components, how-to tutorials, and curated code showcases.
TOP 36 CSS Hamburger Menu Icons
HAMBURGER MENU BUTTON INTERACTION Hamburger menu button interaction in pure CSS. Author Himalaya Singh January 27, 2019 Links demo and code Made with HTML...
More Guides & Articles
Browse All
TOP 12 CSS 3D Text Effects
SCSS 3D TEXT MIXIN This is a simple SCSS mixin that creates 3D blocky looking text with CSS text-shadow....
Top 15 CSS Text Shadow Effects
3D CARTOON TEXT WITH CSS TEXT-SHADOW Playing around with CSS text-shadow and the Google Font “Luckiest Guy”. Author Fielding Johnston...
Top 39 Three JS Examples
INTERACTIVE 3D BACKGROUND This simple interactive background is made with ThreeJS and a PlaneBufferGeometry animated with Simplex noise....
Top 33 CSS Link Hover Effects
LINK FILL ON HOVER Link hover effects that fill a link with an underline or line-through using CSS transitions and...
Folding, Bubbling, Conveyor Belt And Other Text Animation Effects
If you are having trouble with the pen, try the archived copy on GitHub. See the Pen Cascading text...
Top 11 CSS Horizontal Menus
MENU HOVER LINE EFFECT Nice and simple horizontal menu with hover line effect in HTML and CSS. Author Mehmet Burak...
Pure CSS Text Character Animation Using Keyframes
If you are having trouble with the pen, try the archived copy on GitHub. See the Pen Pure CSS...
Top 42 CSS Magazine Layouts
LOCAL HISTORIES Print brochure remade with CSS Grid. Author Tatiana Mac June 16, 2019 Links demo and code...
Top 21 CSS Hotspots
HOTSPOTS HTML and CSS hotspots with modal window. Author Jack November 27, 2018 Links demo and code Made with HTML...
Top 12 CSS Gradient Buttons
FLAT BUTTONS Flat buttons with smooth hover effect. Author Silvestar Bistrović February 4, 2019 Links demo and code...
Top 16 HTML <hr> with CSS
ANIMATED <HR> Animated hr (element BAM + modifiers). Author @Grienauer August 23, 2018 Links demo and code Made with HTML...
Top 15 CSS Notifications
MATERIAL ALERT MODAL Author Cornelius Labuschagne December 16, 2019 Links demo and code Made with HTML / CSS...
Top 6 CSS Accordion Menus
AWESOME ACCORDION MENU Awesome accordion menu using only HTML & CSS. Author Ahmad Emran Made with Html /...
Top 7+ JavaScript 2048 Games
2048 Tiles with matching number values can be merged into a single tile, which receives the values’ sum....
Top 11+ CSS Flowcharts
CSS RESPONSIVE FLOWCHART Practice with simple CSS layout and a touch of SVG magic to replicate a section...
Top 11 CSS Product Cards
E-COMMERCE PRODUCT (DELICIOUS APPLES) A concept for a product showcase for an e-commerce in HTML and CSS, design...
Simple Day Night Toggle Snippet with Animated Background
This is a nice little SVG and HTML animation for a toggle switch, it has a day and...
3D Isometric eCommerce CSS Grid
This is a very cool mobile friendly 3d eCommerce grid layout that can be used as a category...
Hexagon To Cube Loading Animation
A fancy loading animation that alternated between a cube that splits into a hexagon and gets put back together as a cube, it was...
Download Button With Vertical Progress Indicator
A simple but effective micro-interaction design for download buttons by Aaron Iker. When you click on one of the download buttons the down...