CSS and JavaScript projects
Buttons
Ease examples ⇨ Button tilt with letter spin ⇨ Button Design Tests Circle swipe ⇨ Cross swipe ⇨ Diagonal swipe ⇨ Expanding border line ⇨ Expanding border line even sides ⇨ Flip and replace slide ⇨ Flip open slides ⇨ Jenga slide boxes ⇨ Button experiments ⇨ Pulsing button ⇨ Rounded corner push up or down ⇨ Scale down appear ⇨ Shaking button hover ⇨ Slide flip ⇨ Slide transform ⇨ Social media button highlight hover ⇨ Swap borders ⇨ Swipe color change ⇨ Triangle to center white to color ⇨ Wave button ⇨Menus
Angle corner & background corner ⇨ Color background faded menu items ⇨ Color under title ⇨ Four angle corners ⇨ Four box popup ⇨ Menu item scroll upon hover ⇨ Top bottom border ⇨Images
Diagonal caption cover ⇨ Fadeout image zoom in elements ⇨ Popup bottom caption box ⇨ Popup caption opacity ⇨ Rotate in caption cover ⇨ Scale out image caption cover ⇨ Spin out picture caption ⇨ Tilt and caption appear ⇨ Top down fade in caption cover ⇨Cards
Cover shrink down reveal text ⇨ Hover over card description to side ⇨ Pop down card description ⇨ Pop up top reveal card ⇨ Slide up color on hover card ⇨ Stack cards profile ⇨ Scaleup details cover picture ⇨Text
Smoky text ⇨ Swiping color ⇨ Text box swiping border ⇨Animation
Background animation ⇨ Background animation2 ⇨ Bouncing balls ⇨ Button hover animation dotted circle ⇨ Chasing boxes loader ⇨ Clacker toy animation ⇨ Color bar across words ⇨ Color boxes loading spinner ⇨ Fade out squares loader ⇨ Hexagon slider balance ⇨ Infinite scroll animation ⇨ Line loader ⇨ Loading color change words ⇨ Loading circle edge ⇨ Loading circles ⇨ Loading text animation ⇨ Menu background popup menu background popup ⇨ Phone call pulse animation ⇨ Pulsing heartbeat ⇨ Rain animation ⇨ Rotating box ⇨ Rotating title ⇨ Scrolling background ⇨ Slideshow ⇨ Text background scroll ⇨ Text rotater ⇨ Vertical colored lines music levels ⇨ Vertical lines music levels ⇨ Border radius swirly ⇨ Glowy circle loader ⇨ Clip path text change color ⇨ Pencil draw outline button ⇨ Large text transparent background menu ⇨ Rainy cloud ⇨ Glowing loader dots ⇨ Glowing loader dots ⇨ Swiping menu list ⇨ Bouncy circle loader ⇨ Shrink menu list ⇨Clip Path
Split text loading ⇨ Split background color loading ⇨ Circle expanding background ⇨ Expanding text clip path ⇨ Expanding photo clip path ⇨ Flip image page clip path ⇨ Split menu item ⇨JavaScript and CSS Animations
Text popup colors on hover ⇨ Circle menu spread out icons ⇨ Parallax website ⇨ Expanding profile card ⇨ Clip path animation ⇨ Section website animated ⇨ Scrolling background ⇨ Website animated banner ⇨ Collapsing navigation banner ⇨ Scrolling background and text ⇨ Focus background ⇨ Text focus hover ⇨ Glassmorphism animation ⇨ Stacked cards animation ⇨ Glowy buttons ⇨ Rolling circles animation ⇨ Liquid glass animation ⇨JavaScript Tutorial Projects
Guess the numbers ⇨ Tip calculator ⇨ Running tracker ⇨ Photo effects ⇨ Memory game ⇨ Music player app ⇨ Number game ⇨ Parallax-Flower pages ⇨ Parallax-Googly eyes ⇨ Parallax ⇨ Flower Bouquet Game ⇨Website Projects
A simple Bootstrap 5.3 site ⇨ Track Player site using the iTunes API ⇨Resources
I learned many of my techniques and tricks from tutorials by these Skillshare classes and YouTube channels.