Pens from Eva Toth https://codepen.io/evatoth/ en nospam@codepen.io Copyright 2024 2016-03-30T21:28:42-07:00 Simple vertical align experiment https://codepen.io/evatoth/pen/WryEZQ https://codepen.io/evatoth/pen/WryEZQ Eva Toth

See the Code - See it Full Page - See Details

]]>
Simple vertical align experiment 2016-01-30T13:28:20-07:00
Flex grid gallery with overlay panel and image scale on hover https://codepen.io/evatoth/pen/XmzNvm https://codepen.io/evatoth/pen/XmzNvm Eva Toth

See the Code - See it Full Page - See Details

]]>
Flex grid gallery with overlay panel and image scale on hover 2015-10-17T11:18:02-07:00
SVG Water Waves Masking & Animation Experiment https://codepen.io/evatoth/pen/xwZoNa https://codepen.io/evatoth/pen/xwZoNa Eva Toth

See the Code - See it Full Page - See Details

Tweaked a tutorial from here: http://blogs.adobe.com/dreamweaver/2015/09/svg-patterns.html The waves pattern fills are set to white with an opacity, the text fill in this case is blue, these can be easily changes to suit a different project.

]]>
SVG Water Waves Masking & Animation Experiment 2016-02-29T11:48:53-07:00
SVG animated filter and watercolour effect https://codepen.io/evatoth/pen/EVjJMK https://codepen.io/evatoth/pen/EVjJMK Eva Toth

See the Code - See it Full Page - See Details

Built in noise function within SVG Filters to create a fractal pattern and do an animated hue rotation - at each frame we extract the red channel, convert it to white and then boost its contrast.Apply onto an SVG shape (Audrey Hepburn, created in Photoshop and Illustrator beforehand, then pasted into the html). The first large image is animated the other four smaller ones are static, think they look a bit like a watercolour effect. Credit for inspiration and most of the filter code to "Moving Cloud" pen: http://codepen.io/mullany/pen/fmJKr

]]>
SVG animated filter and watercolour effect 2015-09-17T06:51:37-07:00
Pretty Rainbow Buttons, Sass Mixin & Compass https://codepen.io/evatoth/pen/KdwGbW https://codepen.io/evatoth/pen/KdwGbW Eva Toth

See the Code - See it Full Page - See Details

Define button base colour, a simple Sass mixin then creates the button shadow and rollover colours automatically.

]]>
Pretty Rainbow Buttons, Sass Mixin & Compass 2015-09-09T08:53:27-07:00
RR flying birds https://codepen.io/evatoth/pen/bdYovw https://codepen.io/evatoth/pen/bdYovw Eva Toth

See the Code - See it Full Page - See Details

This small codepen shows birds randomly flying over the screen. The birds use a sprite sheet animation with CSS3 using the steps() feature of a css animation. The sprite sheets are exported from a Flash Movieclip with Flash CS6. And tweenmax.js animates the birds along random bezier paths. Forked from [Mad Flanderz](http://codepen.io/madflanderz/)'s Pen [RR flying birds](http://codepen.io/madflanderz/pen/GgXWGd/).

]]>
RR flying birds 2015-06-24T08:55:09-07:00
Scalable backgrounds https://codepen.io/evatoth/pen/pJeEVZ https://codepen.io/evatoth/pen/pJeEVZ Eva Toth

See the Code - See it Full Page - See Details

]]>
Scalable backgrounds 2015-09-16T19:17:29-07:00
Responsive and Mega menu https://codepen.io/evatoth/pen/vONdrg https://codepen.io/evatoth/pen/vONdrg Eva Toth

See the Code - See it Full Page - See Details

Responsive mega menu using css. Forked from [Arjun Amgain](http://codepen.io/arjunamgain/)'s Pen [Responsive and Mega menu](http://codepen.io/arjunamgain/pen/siLfq/).

]]>
Responsive and Mega menu 2015-05-06T10:52:10-07:00
Simple PureCss dropdown menu with following subnav https://codepen.io/evatoth/pen/ZYmrRQ https://codepen.io/evatoth/pen/ZYmrRQ Eva Toth

See the Code - See it Full Page - See Details

Menu with dropdown made only in css, with a line that follow the hover on the line Forked from [Robert ](http://codepen.io/dghez/)'s Pen [Simple PureCss dropdown menu with following subnav](http://codepen.io/dghez/pen/Kwoper/).

]]>
Simple PureCss dropdown menu with following subnav 2015-03-17T08:37:15-07:00
Responsive portfolio layout https://codepen.io/evatoth/pen/zYXyZO https://codepen.io/evatoth/pen/zYXyZO Eva Toth

See the Code - See it Full Page - See Details

Simple unordered list, CSS displays anchor title element on hover. Using bootstrap grid styles. Thanks for the hover hash mark inspiration: http://codepen.io/MightyShaban/pen/eGaCf

]]>
Responsive portfolio layout 2016-03-30T21:28:42-07:00