Return to profile card

HTML TESTS WTIH CSS AND JAVASCRIPT

Instructions

Click on the page to see the effect. To see the code go to the page and then right click on the page and choose view code source. It will open the HTML code, the CSS and Javascript are embedded in the page to make them easy to find. You can also right click and then save the code for future reference.

Animations - CSS @keyframes

Animate rectangle moves and changes color
Animate rectangle red to yellow
Animate rectangle vertical move and changes color

Aspect Ratio for Video Pics - CSS iframe for Youtube videos

Background Gradient - CSS

BackgroundGradient

Background Patterns - Animated backgrounds

Background Test Green Hex.html
Background Test Octagon 1.html
Background Test Octagon 5
Background Test Octagon 6
Background Test Octagon 7
Background Test Octagon 8
Background Pattern

Button Tricks - CSS

Buttons All
Blur Button
Flip Button
Glitch Button
Glow Button
Pulse Button
Shake Button
Sheen Button
Tony Hawk Spin Buttons

Carousel of Pictures - CSS 6 pictures is changeable

6 Picture Carousel of Rotating Pictures

Clearfix Equal Columns - CSS

Clearfix Equal Columns/Clearfix Equal Columns.html

Collapsable Section - CSS Javascript

Collapsable Section/Collapsable Section.html

Coupon - CSS formatting

Coupon

Dark Mode Toggle - CSS Javascript

Dark Mode Toggle

Display on Hover - CSS :hover

Display on Hover

Draw Hexagons - Javascrip Canvas

Draw Hexagons on Canavas/Draw Hexagons on Canvas 1-Red on white partial.html
Draw Hexagons on Canavas/Draw Hexagons on Canvas 2-Blue on Black full.html
Draw Hexagons on Canavas/Draw Hexagons on Canvas 4 - Draw closed path.html

Drop Shadow Hover - CSS :hover

Drop Shadow Hover

Dropshadow Transparent Image - CSS

Dropshadow Transparent Image

Falling Sand ** Needs Work

Flip Card - CSS formatting

Footer Bottom - CSS

Full Screen Div - CSS

Full Screen Div

Glass Effect - CSS

Glass Effect Octogon1.html
Glass Effect Stripe

Glowing Text - CSS

Glowing Text
Science 10 Physics
Science 10 Title

Google Scatter Plot - CSS Javascript from gstatic (Google)

Google Scatter Plot parabolic - Fall due to gravity.html
Google Scatter Plot parabolic
Google Scatter Plot

Header Sticky - CSS

Header Sticky ver2
Header Sticky

Highlight shadow - CSS

Highlight Shadow

Infinite Scroll Banner - CSS

CSS infinite Scroll One Way.html
CSS infinite Scroll Two Way

List Group - CSS

Loaders - CSS

Loaders animated - CSS

Masks - CSS

BCHS 3 Mask Black and White - from illustrator
Clipping Animation - animated
Masking Picture 3
Masking Picture 4 - clipping path

Menu Tree View - CSS and Javascript

Menu Tree View
Menu Tree View2

Parallax Scrolling - CSS

Parallax Scrolling - S10Test.html
Parallax Scrolling

Patterns - Illustrator and Animate

60 Deg Grid Cube Pattern 1
BoxLinePattern
DoubleBoxPattern
Hex Pattern Decreasing
Illustrator Patterns - my background designs and animations
RibbonPattern.html

Popup Window Toggle - CSS and Javascript

Popup Window Toggle

Profile Card - CSS

Quote Slideshow - CSS and Javascript

Quote Slideshow

Radio Button Formatting - CSS

Radio Button Format
Radio Button Format-2.html

Rainbox Accent - CSS

Rainbow Text - CSS

Rainbow Text Linear gradient

Range Slider - CSS and Javascript

Resize Header on Scroll - CSS and Javascript

Resize Header on Scroll

Responsive Sidebar - CSS

Responsive Sidebar

Rotate Translate Image - CSS

Rotate Translate Image

Scroll Background Color - CSS and Javascript

Scroll 1 BackGround
Scroll 2 Image

Scroll Indicator - CSS and Javascript

Scroll Indicator

Smooth Scrolling - CSS and Javascript

Smooth Scrolling 1
Smooth Scrolling

Snackbar Toast Popup - CSS and Javascript

Snackbar Toast PopUp

Spinning Loader - CSS

Spinning Loader

Splash Page - CSS

Sticky Element - CSS

Text Burning Effect - CSS

Text Burning Effect

Text Color Changing - CSS

Text Color Changing

Text Morphing - NOT WORKING **

Text Water Wave - CSS

Text Water Wave

Text Wave - CSS

Timeline Effect - CSS

Engine Time Line Test
Timeline Effect

Tooltips Popup - CSS and Javascript

Typing Text - CSS

Typing Text 1.html

X Hot Dog Menu - CSS and Javascript

Zebra Striped Table - CSS

Zebra Striped Table

Zoom On Hover - CSS and Javascript