Lara's public fiddles
-
Another Simple Parallax: Photo Background
jQuery 1.9.1, HTML, CSS, JavaScript
-
Another Simple Parallax: Photo Background
jQuery 1.9.1, HTML, CSS, JavaScript
-
Simple Parallax: Old Town Alexandria, VA
jQuery 1.9.1, HTML, CSS, JavaScript
-
Filterable Gallery
Use JavaScript to create a filterable image gallery. Click a button labeled with a designed tag to make the web browser display only images with that tag.
-
Show and Hide Interactive Web Content with Java Script in 20 Minutes
No-Library (pure JS), HTML, CSS, JavaScript
-
Responsive Image Gallery
A full-size responsive image grid gallery with animated zoom and hover effects.
-
Custom Numbered & Bulleted Lists
Adding custom styles to the numbers preceding a list item in an ordered list isn't straightforward, but it isn't difficult either! With a few CSS tweaks and the use of the :before psuedo-selector, customize the numbers any way you desire! Alternatively, customize the bullets in an unordered list by switching out the bullets for Unicode symbols.
-
Responsive, CSS-Only Horizontal Accordion with Tabs
Create a responsive horizontal accordion using CSS-only. Add vertical tabs to label each slide. Check out more at https://www.laralee.design!
-
CSS-Only Responsive Navbar
For a light-weight menu solution, try a responsive navbar using CSS-only. Allow the user to hover over a hamburger icon to reveal the navbar on smaller screens, while browsing nav links normally on larger screens.
-
Responsive, CSS-Only Horizontal Accordion
Create a responsive horizontal accordion using CSS-only. Check out more at https://www.laralee.design!
-
Gradient Borders
Create a CSS-only gradient border using background and padding. Check out more at https://www.laralee.design!
-
Fluid Heights - Including Videos
While it is easy to set fluid widths, fluid heights are more difficult. Divs with Inline Frames (IFrames) or background images may crop the content when viewed on smaller viewports, but fluid heights preserve the original aspect ratio to prevent cropping. The Trick is to set the height to zero (!) and instead add a padding-bottom equal to the (Height÷Width) of the desired aspect ratio.
-
Responsive Image Gallery with Hover Effects
A full-size responsive image grid gallery with animated zoom and hover effects . Check out the tutorial at https://www.laralee.design!
-
Simple Gallery Window with CSS-Only
A simple hover image gallery using only HTML and CSS, without any JS. The gallery thumbnails are simply floated in a child container; each thumbnail image is nested within an empty link. Clicking a thumbnail reveals a larger image to the rightside of the parent container. The CSS displays the large image when the image link is active.
-
Simple Hover Gallery with Vanilla JS
A simple hover image gallery using HTML, CSS, and Vanilla JS. The JS assigns each image by ID to a spot in an array. Then the array is looped over to receive a mouseover event listener, swap images with the large window, and add or remove image borders.
-
Custom Numbered and Bulleted Lists
Adding custom styles to the numbers preceeding a list item in an ordered list isn't straightforward, but it isn't difficult either! With a few CSS tweaks and the use of the :before psuedo-selector, customize the numbers any way you desire! Alternatively, customize the bullets in an unordered list by switching out the bullets for Unicode symbols.
-
CSS-Only Columns
Fluid and responsive CSS-only columns for a variety of web design layouts. Includes wholes, halves, thirds, quarters, and eighths.