Transcript

00:04 [Music]
00:10 so in this video we're going to quickly show off the new reflection version 3 stack it's been completely Rewritten from the ground up using native
00:18 JavaScript and it's got some really amazing new style options so as you see when you add reflection to the page uh we have the
00:26 ability to Define drag and drop images now you can supply just a single image or you can supply an a single image as well as a another image that will be
00:35 used for medium and large devices then you can Define your all tag and of course as with all of our image Stacks you can actually Supply a URL to the
00:44 images as well if you'd like to Warehouse these images or use this to integrate with something like feeds and total
00:52 CMS you can easily add a link change the alignment options Define sizing and Max width now let's look at some of the
00:59 refle Styles here you'll notice that we can actually Define a small gap between the uh image and the reflection if you supply a negative number that will
01:07 actually pull the reflection up so that there's actually negative Gap um then you get to find the height this is going to be the height relative to the image
01:17 so when I set this to be 33% the height of the reflection is going to be 33% the height of my image uh you can supply the
01:25 opacity of that reflection you can skew as you see here we skew C uh that reflection to the side at an angle and
01:33 you can also blur that image now we also have a reflection Swatch that works really great with Foundation 6 um and
01:41 when you add this to the page you have a lot of the same reflection style options but what's really great is it like in this example I can supply a reflection
01:50 that will get applied to all of the images that I've defined within my swatch selector all at
01:58 once so as you see here I have a uniform reflection that is applied to all images
02:04 with a single Swatch on the page now let's quickly look at the demos that we have on the product page just to
02:13 kind of see some of the amazing effects that we can see now we saw this demo here where I blurred and i' I've skewed that reflection so it goes off to the
02:22 side I've actually brought it up a little bit so the image kind of sits on top of it this is a really great feel as you see it it really blends in it kind
02:30 of looks like we're creating a drop shadow with the actual image itself here further down we have just a
02:38 the most simple example where it's just a reflection that goes straight down here's an example where we have a straight down reflection but it's all
02:45 it's just blurred here we have another one where it's skewed to the opposite side um it's a little bit smaller as you
02:52 see here it's not quite as tall um but it's skewed to the side and slightly blurred and then here we have an example where it's skewed to the side but we've
03:08 effect where we can either have squared off images or actually give round corners to our images which kind of
03:15 really makes things look quite elegant so I hope you enjoy reflection it really can add some really elegant
03:23 designs to your websites oh
03:31 [Music]