Travis's public fiddles
-
Using CSS Animation Keyframes for Bounce/Elastic Effects
Sometimes bezier curves are limited for CSS transitions so here's an example of using animation keyframes to get difficult to create transition effects.
-
Dealing with Vertical Margin Collapse
Sometimes, you really don't want the vertical margin collapse to happen. Here are three ways to deal with it.
-
Animate Modal In and Out Without Using Display
An example of having a modal that animates in and out without using display none and does not block interaction with content.
-
Sliding Elements In/Out with Height Adjusting Container
Just replacing cards by sliding with the parent container adjusting its height on the fly so that content will not be followed by white space.
-
Flipping Elements with Height Adjusting Container
Just replacing cards by flipping with the parent container adjusting its height on the fly so that content will not be followed by white space.
-
Message Container CSS
A suggestion on how to structure an icon with corresponding message inside a container.
-
Width 100% May Not Be Your Friend
An example showing that sometimes placing 100% width on an interior block element may create layout problems.
-
One-Sided Box Shadow
Shows how to apply a one-sided box-shadow so that the shadow overlaps all content inside the element. Applying box-shadow directly to the element does not necessarily affect its children.
-
Elastic In/Out Sliding
Simple example of applying an elastic easing to an animated element in both directions.
-
Show Error Message on Focus
Input field will outline red on an error. At that point when the input gets focus an error message will appear.
-
Simplest 2-Axis Centering Ever
This can be used to make the easiest and simplest modal you will ever use.
-
Occasional Sticky Footer
A sticky footer that will stay at the bottom of a page with short content but will scroll with page that has long content.
-
SVG Animation Test
Playing with animating the interior pieces of an SVG.
-
Filigree Heading
A heading with top and bottom sub-headings with lines extending outward for a somewhat fancy display. Plus an example of collapsing the filigree lines down to the width of the title. Not quite ready for Chrome yet, though.
-
Sepia Blur Experiment
Playing around with the idea of using filters to hide unimportant items on hover.
-
Animate SVG
Playing with animating an interior part of an SVG.
-
Animated Arrow for Carousels
Simple example of animating an arrow intended for carousels.
-
Double Push Side Panels
Example of having push panels on either side of the content. Panels only open far enough to leave the open/close button visible.
-
Simple CSS Spinner
Just another very simple CSS-based spinner that requires one element.
-
Bootstrap Responsive Menu with Dropdown
As horizontal space changes, items in the menu will be moved in or out of the dropdown as needed. Uses Bootstrap in this demo because I built it for a project, but can easily be changed to use a select element.