Pens from Carolina Sawney https://codepen.io/CarolinaSawney/ en nospam@codepen.io Copyright 2024 2016-04-01T13:26:38-07:00 display table #2: Equal height boxes https://codepen.io/CarolinaSawney/pen/aNLpxW https://codepen.io/CarolinaSawney/pen/aNLpxW Carolina Sawney

See the Code - See it Full Page - See Details

Forked from [Massimo Cassandro](http://codepen.io/massimo-cassandro/)'s Pen [display table #2: Equal height boxes](http://codepen.io/massimo-cassandro/pen/RNJvbd/).

]]>
display table #2: Equal height boxes 2016-04-01T13:26:38-07:00
Flexslider with simple CSS animated layers https://codepen.io/CarolinaSawney/pen/ZQByve https://codepen.io/CarolinaSawney/pen/ZQByve Carolina Sawney

See the Code - See it Full Page - See Details

Flexslider slider with master slider like animated layers like title, description, price tag and category tag. pure css animations for slider layers Forked from [Komeyl](http://codepen.io/Komeyl94/)'s Pen [Flexslider with simple CSS animated layers](http://codepen.io/Komeyl94/pen/vOaReR/).

]]>
Flexslider with simple CSS animated layers 2015-12-29T15:48:15-07:00
Responsive Scroll Header https://codepen.io/CarolinaSawney/pen/ZQpwNO https://codepen.io/CarolinaSawney/pen/ZQpwNO Carolina Sawney

See the Code - See it Full Page - See Details

I was inspired by the header on brainpickings.org. I like the way it uses the full size on page load and almost immediately after the user starts scrolling it shrinks down to a resonable size. Forked from [Dylan Macnab](http://codepen.io/DylanMacnab/)'s Pen [Responsive Scroll Header](http://codepen.io/DylanMacnab/pen/KVgGbK/).

]]>
Responsive Scroll Header 2015-12-27T18:10:19-07:00
CSS-Only Gallery Filter System https://codepen.io/CarolinaSawney/pen/EPgZGe https://codepen.io/CarolinaSawney/pen/EPgZGe Carolina Sawney

See the Code - See it Full Page - See Details

Using checkboxes stylized as buttons and using the :checked pseudo-class selector to select items according to the filter (:nth-child or [data-attr]). Have a look at the comments on the code for explanations. Credits to Google's Material design for the transition timing function and placeimg.com for the random images, also [CSS-Tricks](http://css-tricks.com/examples/nth-child-tester/#) for the nth-child tester. Forked from [Steven Sinatra](http://codepen.io/diagramatics/)'s Pen [CSS-Only Gallery Filter System](http://codepen.io/diagramatics/pen/Cyoxq/).

]]>
CSS-Only Gallery Filter System 2015-12-24T17:07:38-07:00
SVG text mask https://codepen.io/CarolinaSawney/pen/EPgYMv https://codepen.io/CarolinaSawney/pen/EPgYMv Carolina Sawney

See the Code - See it Full Page - See Details

SVG is cool! Forked from [Marco BarrĂ­a](http://codepen.io/fixcl/)'s Pen [SVG text mask](http://codepen.io/fixcl/pen/CHgrn/).

]]>
SVG text mask 2015-12-23T15:34:40-07:00
Basic Fullscreen Video Background https://codepen.io/CarolinaSawney/pen/XXjrOR https://codepen.io/CarolinaSawney/pen/XXjrOR Carolina Sawney

See the Code - See it Full Page - See Details

Nifty newish html5 in a simple format. Forked from [Matt Gross](http://codepen.io/mattgrosswork/)'s Pen [Basic Fullscreen Video Background](http://codepen.io/mattgrosswork/pen/jrdwK/).

]]>
Basic Fullscreen Video Background 2015-12-23T15:32:13-07:00
Sliding Splash Image https://codepen.io/CarolinaSawney/pen/JGRPeO https://codepen.io/CarolinaSawney/pen/JGRPeO Carolina Sawney

See the Code - See it Full Page - See Details

Instead of loading an expensive video background for your splash screen animate an image. Inspired by new http://www.homeaway.com/ homepage Forked from [Clinton Halpin](http://codepen.io/clintonhalpin/)'s Pen [Sliding Splash Image](http://codepen.io/clintonhalpin/pen/dPjgma/).

]]>
Sliding Splash Image 2015-12-23T15:22:30-07:00
Fullscreen Background Video https://codepen.io/CarolinaSawney/pen/zrKOmw https://codepen.io/CarolinaSawney/pen/zrKOmw Carolina Sawney

See the Code - See it Full Page - See Details

A full screen background video that uses 100% of the height and width. It should autoplay and loop on devices that allow for it. It should also allow for text to be displayed over the top. Forked from [Matt](http://codepen.io/mhfen/)'s Pen [Fullscreen Background Video](http://codepen.io/mhfen/pen/VYLWbK/).

]]>
Fullscreen Background Video 2015-12-23T15:22:18-07:00
Video wallpaper and css filters https://codepen.io/CarolinaSawney/pen/mVrbGz https://codepen.io/CarolinaSawney/pen/mVrbGz Carolina Sawney

See the Code - See it Full Page - See Details

Forked from [jakob-e](http://codepen.io/jakob-e/)'s Pen [Video wallpaper and css filters](http://codepen.io/jakob-e/pen/Qjpowv/).

]]>
Video wallpaper and css filters 2015-12-23T15:21:48-07:00
SVG mask + video https://codepen.io/CarolinaSawney/pen/zrKOLZ https://codepen.io/CarolinaSawney/pen/zrKOLZ Carolina Sawney

See the Code - See it Full Page - See Details

A quick demonstration of what can be easily done with the video element and SVG masks. Should be compatible with IE9+, please report any errors/compatability problems to svante.richter@gmail.com Forked from [Svante Richter](http://codepen.io/SahAssar/)'s Pen [SVG mask + video](http://codepen.io/SahAssar/pen/YPWxWX/).

]]>
SVG mask + video 2015-12-23T15:17:41-07:00