This is a git repository for storing some CSS learning tricks, nothing more. Most of them are Pure CSS but some work with JS. Some are just dumb applied concepts but others are bloody cool stuff!
They are fun and quite creative! I learned them from articles and blogs I've found on web.
One of my favourites is The new code by Dudley Storey. He can teach a lot about HTML5, CSS3, JS, SVG, Responsive Design and so on.
And, sure, I also cannot forget to mention Chris Coyer. He has incredible Web knowledge and writing skill. His website CSS-TRICKS is likely to be much more updated than Dudley's.
TL;DR In a few words: Progressive JS, CSS tricks, UI components and CSS effects such as 2D and 3D Carousel, different kinds of gallery using shadow, flip and other crazy effects. Furthermore, animations, canvas, generated images with captions, flexbox and grid, responsive design, parallax effect, navbar and sliders, accordion menus, text clip, filters, blend modes, transitions, hover effects, layouts, and many more!
Following below I present a list of interesting Pure CSS (or with just a bit of JS) effects and UI elements.
They are HTML files and can be viewed directly in the browser. So, use the Devtools of your favourite browser for checking the code or go directly to this repo and see all source code.
a CSS 3D captioned image with media queries - Hover over it
3D Carousel with arrow controls - navigate clicking at arrows and hover over images to zoom in
3D Venetian blind image transition
3D Flip Image Gallery with Shadows - Hover over images
Angled horizontal navigation bar with moving and fading effects - Hover over navlinks
Animated 3D marquee text with CSS
Animated inset caption with blur filtered background - Hover over it
a button to toggle window box in pure CSS
Auto filter image gallery with a little of JS
a diamond mesh images for navigation
A Before-After Comparison Slide Control with Pure CSS - grab and move the small white slide at bottom
A Before-After Comparison Slide Control with JS - grab and move the small white slide at bottom
Bouncy animation with some bars
text-clip-masking with background-clip: text
an amazing VIDEO Before-After Comparison Slider
a fade responsive background on scroll
a horizontal reverse-focus navbar using blur effect - hover over navlinks
cool hover effects from different directions - hover over it from top, left, right and bottom
an astonish Rolodex-style 3D Image Gallery - slide the ranger
Auto generated image captions with progressive JS
Animate a box shadow - Perfomance comparison
Center aligned logo on a navbar
a CSS dynamic customized table
CSS typing effect using CSS variables
a filtered caption image with dynamic clip and chained transitions - Hover over image
Filtered Flexbox dynamic image gallery with JS - use dropdown menu
a fixed scrolling disappearing banner
Float image, overflow fix, responsive design using VH, VW measures
Responsive design - Grid layout with media queries
Image Captions with CSS Transition Effects (sliding and cross-fade) - Hover over images
a VERY COOL Mobile-ready Before-After comparison UI
modern mansory with flexbox & JS - resize window
object-fit gallery - Hover over each image
an Amazing CSS Pure 3D Origami fold - Hover over it
Simple 'em' Parallax effect on scroll
Pinterest Style Column Layout With Pure CSS - column props - Hover over images
responsive prev-next UI Nav Pattern with Flexbox
Profile navigation style - hover over navlinks
modern mansory with flexbox & JS - click on each image
Pure CSS Radial Pop-out Button - No icon needed
a hell of Stacked photos animation of draggable random images with Progressive JS
a simple responsive container with flexbox and media query
Responsive Image Slider - Hover over it
Responsive Image Slider captioned - Hover over it
Cool Off-kilter effect with CSS transform - Hover over navlinks
A Scratch Off Reveal With HTML5 Canvas - click and hold to scratch off
scroll on snap points - use horizontal and vertical mouse scrolling
Scroll to zoom and focus a image
a good-looking responsive minimal layout
same minimal layout above but within a container
a sliding door with two copies of same image to reveal a background - Hover over background image
Slider with captions and many options to control it in JS - check code
Smooth scroll - click on navlinks
Responsive Sticky position on Heading of columns
[using FLEXBOX] - Layout Header Content Footer
[using FLOAT] - Layout Header Content Footer
[using GRID] - Layout Header Content Footer
[using FLEX] a layout with header, UNEQUAL columns and footer
[using FLOAT] a layout with header, UNEQUAL columns and footer
[using GRID] a layout with header, UNEQUAL columns and footer
experimenting position: sticky with Flexbox
sticky position on an image along some paragraph - see better lower resolutions
tab-navigation bar - tabs show up above 1201px resolution
wrapping text around CSS Shapes such as circular image
Width calculated by CSS Calc()
CSS variables and Centering using Flexbox
CSS Variables in @keyframes? Animating background color
CSS variables in CSS var values
That's all!