hope everyone's doing great get some uh confirmation in the chat
that uh we're good to go hopefully we are
live boom there we go I see some people now
they I was working on some uh some new Stacks today maybe I can uh give you a quick sneak peek in a little
bit
Mr Cole Dave Mr Francis
Dr Bob is in the house okay
see quite a few people that uh were on the hangout on Friday so you're gonna see a little bit of what we did on
Friday but I'll probably build upon that and play around and yeah
um I have an idea what I'm gonna do but yeah I'd uh I thought it would be more fun as usual just to fly by the seat of
my pants right so uh Phil how you doing
excellent hopefully uh everyone's getting back into the swing of things from the holidays
it is cold here this morning my hands are freezing actually it's making me uh fat finger type things wrong all over
the place okay so today we're going to be talking
about circles right um seems like kind of a boring thing but
uh not everything on the web is a circle right I mean by default everything is
kind of a square so how can we uh how can we make circles and
um after that we'll probably just uh play around I have some cool ideas of some stuff I've actually done in
previous demos of other Stacks that I think would be fun to play around with some circles so uh not sure how that's
gonna all pan out but we'll have some fun
oh Fernando going rowing nice okay
um let's see let's uh share my screen
this probably be a quick one today I think uh probably won't go too long I don't know we'll see I say that now but
once I get going and you guys start asking questions we just go and go and go right
um so let's go ahead and launch wrap Weaver I'm actually just I'm gonna create a new project we're just gonna
start from scratch
okay so
total CMS Fernando not sure what your question of TCMS is
um well I show off to Total CMS today I don't know maybe we'll play around with whole CMS with circles not sure
um maybe in a blog list or something like that we'll play around okay um
so who knows in chat let me know hopefully
our delay isn't too big um in order to create a circle
what do we want to start with okay so um I'm gonna go ahead and uh let's
just throw in a Chuck in a container and a one column which is kind of like our my default uh starting point for things
okay so as we know um or we should know probably
um everything inside a rectangle okay so let's start off with a rectangle everything everything is a
rectangle right um so let's have this one column I'm going to Chuck in a background here
um so let's just do BG primary why not okay which is a
um class all right uh actually we need to add a uh so by default uh this one column I
preview this page right and we see nothing on the page um and that's because that one column
has zero um content into it right so let's just
give it a little bit height I'm just going to use some utility classes here I'm just going to do H uh 256 right oops
256 not 156. two
oops isn't 256 a number oh I need site styles on the page it's kind of a requirement isn't it
all right uh let's just let's just slim this bad boy down
I'll keep the sizing chart actually and we're going to streamline it mode okay uh I I think that it's tough for some
people all right there we go now I see my print my BG primary background and my
height 256. okay there we go rookie move I know right Jesus
thanks goat Prince you are the king of the internet today president of the internet sorry president of the internet
okay um so I have I started with a rectangle
okay um which is the starting point okay
let's just add some uh some gutters on here so we have a little bit of uh oh that adds it on the I'm just gonna
add some margin to this container really quick just so we can have some spacing uh margin I don't know let's do like 64.
why not okay let's do my Mt
okay so I have this rectangle okay
um so how can we make this rectangle a Circle well it as I've probably you've
probably heard me say man there is so many ways to accomplish things so we're we're gonna look at multiple different
ways to accomplish creating a circle today and the first one is not necessarily the
starting from a rectangle but starting from a square okay
um because I can add I can't really turn a rectangle into a circle so what we need
to do is we need to get it into a square because this circle ha has the same height and width correct so the closest
thing in a rectangle world to that is a square okay so let's go to this this one
column um and let's add a uh let's just do like with colon 256.
because I already set a height on it okay sweet
all right um I am using some utility classes here um we could just let's go ahead and uh
some of you want to see that I know some of you are scared of of SWAT of utility swatches so I'm going to redo all of
this that I just did with this background color and these inside of some swatches okay so we're gonna go
over here and uh I'm gonna use the height Swatch okay and let's just call this circle
okay and um let's just do a simple height of I
did 256 okay um and then we're going to create a with Swatch I'm also going to give this a
class of circle okay and simple we're just going to go
ahead and make it the same exact um size is the height okay which is 256
pixels and we need to give it a background color so let's go ahead and do background and again we're gonna We want this all
to be a part of circle so I'm gonna make this also apply to the classic circle
now I know uh some of you um might be confused here you can add the
same class across multiple swatches okay because whenever I add a circle
class it's going to get this height this width and a background so let's give it a background color
I'm sure let's make the default a boring gray okay let's make a default the boring Gray
um okay because we're gonna we're gonna Jazz it up a little bit later on
um so let's go ahead and in order to apply those to my column here I'm going to add a class of circle
and voila hopefully you see that we have a gray Square
fun times how exciting is that now okay I have a square how do I turn that
square into a actually no let's go ahead and I'm going
to shrink this down because we're playing with this square and we got big enough screens here let's uh hide that
let's just hide that oops all right that all right the stacks we don't need that right now all right
we're gonna that way we can kind of see everything in one strategize this a little bit better
okay so now I have a square let's go ahead and uh do a Swatch one more Swatch
and any anyone any bonus points how can I turn a
square into a circle we want to make the edges instead of sharp we want to round them off right so
funny enough guess what Swatch we're going to use we're going to use a rounding Swatch okay
excellent and then uh we're gonna do a class of circle on that
okay and basically what we want is um we're gonna do a percentage
um well there's let me just show you something so if I go ahead and do a radius of 10 pixels okay let's preview
that we'll see that I get a nice rounded Corner Square okay and if you know the unit here is
pixels okay and one thing I could do is I can make this like 5 000 I can make
this super big okay and when I do that that gets me a circle okay because this this
Square um is only 256 pixels so technically if I go up to
um 128 actually okay it still gets a circle but if I
start going less than let's do like 96 okay you'll see that I now start getting more
of a a very round square right okay so if you do pixels the pixel has to be 50
of the width and height now instead of having to do all that crazy math in our
heads let's just go ahead and use percentages and we're going to set the radius to be 50 percent
okay so that way um no matter out no matter the size of
our Square we will always get a radius of 50 percent
okay so again I just set the uh rounding to use percentages and then I set the
radius to be 50. okay so that way basically what that does is it goes 50
the width and height it makes it completely round all the way around okay now you can actually go larger than
if you did like 60 it doesn't matter it will still look like a square right um
but 50 is is the minimum if you did 49 let's see what 49 even looks like
it still kind of looks like a circle but it actually isn't okay so um 50 is what
we want sweet so now we have the recipe to make a
circle super simple it's just making sure it has a width and a height and a
background and rounding okay now this is cool but like this circle is
it's always it's static right uh and that's okay for for certain
layouts right um it works really really well let's say for example
um I wanted two circles okay let's just go ahead and um I'm gonna add a two column in here
okay and uh we're gonna go there and we're
gonna go there okay let's preview that okay so now I have two circles but if
you notice like the circles never change right they're always the same size they're always 256 pixels
and and again that that is okay for some layouts maybe you want them to be a fixed size but what if we wanted to make
these circles responsive okay um so actually you know what I can do
I'm going to go ahead and cut we'll kind of do this in stages we're gonna do this step one so that way
when I share this project you guys can see okay so now we're gonna do step two
okay that way I yeah I like that let's do that okay so now we're in step two
okay yeah and let's go ahead and save this project so that uh make sure we save it
let's do circles Circle fun
I say that on my desktop okay so now we have this now now let's go
ahead and in this we're going to make these circles responsive okay [Music]
um so right now in order to make something responsive like we can't give it a static width right so I'm going to
go ahead and ditch that okay I I don't want it to have a static width what does that do for us
okay well that doesn't necessarily do what we want because now I no longer
have circles I have ovals okay which is if you know if you wanted an oval guess
what if you give a rectangle okay a
border radio or a rounding a 50 guess what you get you get an oval
okay but they are responsive look look at that they're they're responsive ovals
that's cool okay but how can we make sure that
um that we still get circles so essentially these ovals always have a
height of 256 pixels okay but that's not what we want
okay so let's go ahead I'm going to add actually a little bit of gutter here just for fun okay just so there's a little bit of separation between these
bad boys all right so now I have these two eggs that at some point they start looking like
circles okay um they're not exactly circles but at some point they're probably A Perfect
Circle somewhere around there okay but we don't need we can't give it a static
height okay so we need to ditch that we need to ditch the static height
so what do we need to do now okay so there is a if you have a Swatch
pack there is an aspect racing ratio Swatch
okay and let's apply this to be Circle
and what we want is we want the aspect ratio to be one to one
okay so on a circle I always want the width to be the same as the height
so one to one says whenever we have a width of one or let's say a width of 100
make the height 100. whenever we have a width of 200 make the height 200. so
this is essentially ensures that um a circle is always a one-to-one ratio
voila there we go we got circles but let's verify that it's going to be responsive they grow and they shrink
well they shrink right so now we have responsive circles
[Music] sweet
okay uh another thing that we could do um let's play around with some circles okay
um let's go ahead and uh I guess we'll do step three I'm not sure uh when is
going to be a proper place to so we'll just keep going step three okay
step three is we're just gonna add some content here okay and kind of make it um make it interesting
okay [Music] um so let's say I want to have text in my
circle okay and I want it to be centered sounds reasonable right okay so let's go
ahead and let's just get like a header header I'm going to add a header into
there and all of a sudden I am like crazy hungry okay let's go there
uh let's close that okay let's go ahead and preview this
okay so here is my content and if you look at hey the content is automatically
Centered for me that's kind of cool um and if you're curious why that is actually the aspect ratio ratio Swatch
is doing that for us okay because we have content align middle set on the aspect ratio okay
um if you're using the the fixed size circles like we were doing before and you're not using aspect ratio
um well first off actually um here here's here's some fun let's do
I'm gonna duplicate step one we're gonna go back to these fixed size ones okay and let's do a step 1.5
okay uh because I'm going to show you how you can still get static height but then get
the uh get that aspect ratio kind of working as well um there's so many ways to skin a cat
here um so we're gonna we're gonna ditch this height
okay and then I can do aspect ratio and we're going to do Circle
um one to one okay and at that point that's going to be the same
right um because I I'm statically setting my width I can then use aspect ratio now
these aren't going to make it responsive because we still have the the width is still static okay I just wanted to show
you that um but actually what I really wanted to show you uh or let's go back to give me my height
Swatch back see how many undo's I did in Stacks five Great Stuff dude okay
um so I wanted to show you a how we could center content okay
um inside these circles
uh I'm just gonna do the text a little bit shorter because these are smaller circles here
all right so here I have live and we have our fixed width circles
oops oh no I deleted my rounding Swatch all right oops it's easy to put that
back Circle percentage 50.
50 boom okay now you might be thinking what the heck Joe that is uh
that text is at the top left corner right and that's because that's where text starts by default
right um so text starts at the top left corner but we want it dead smack in the center
Okay so if we go to our one columns okay you'll
notice that we we have content alignment options here as well as column alignment
options okay and so what I'm going to do is I'm going to do
um vertical alignment middle okay and let's preview that
and voila if we look at that we have dead smack in the in the
vertical middle we're going to do that and then next I'm going to set my content alignment which is like text alignment because this is just text I'm
going to set that to be centered okay and voila
okay um that's how you would do it again without aspect ratio because that aspect
ratio Swatch has that content alignment middle for us I wanted to show you how you can do that
um in this method okay using the columns because columns have that same setting
as the aspect ratio which is vertical alignment and you set that to Middle then we Center our text with content
alignment Okay so um there's that let's go back to step three okay
and let's have a look at this bad boy again so here we had two circles and ours we vertically aligned uh by default
that's aspect ratio does that for us okay but we still need to Center our text or our content so let's go to these
one columns and I'm just going to set uh Center for Content alignment
and voila pretty slick right so there is a circle with some text
okay um so let's start playing around with these things let's um
let's say I want to have different color circles okay so um you know but I wanna
I don't want to recreate let's say I want to make this first one A blue circle and I want to make this second
one a red circle okay so you might be thinking well okay so
now I need to create a red circle class and then on this second column I need to create a blue circle class
and does that mean I need to duplicate all of these swatches here and create
two of them no okay remember we we're Foundation six is all about efficiency
okay um I'm gonna get rid of that we don't we don't need sizing chart okay
so I'm gonna keep these circles because this defines what a circle is
okay a circle is about has a this background color by default um it has a rounding and it has aspect
ratio all right pretty cool
so let's go ahead and start creating um some color variations of our Circle
okay and so I'm just going to duplicate uh let's go ahead and I'm going to move these
up to the front Okay now we have this is our default color for a circle but let's
say I want to add if Circle also has the red class
okay um I'm gonna do something else so what I'm going to do is I'm going to do Circle dot red
okay so if if a circle if it something has a class of circle
and a class of red we're going to get this color Okay so we're going to go ahead and do red
okay and I said I wanted a blue one as well okay so I'm going to do Circle dot
blue okay and let's go ahead and set a blue color
let's do that color blue all right so down here
um what I'm going to do is I'm going to do Circle space red
okay so I'm adding two classes here I have Circle and red
and then in this one instead of now this one is still gray because I said the default color for us of a circle is gray
so when it's just a circle it's going to be Gray when it has Circle and red the
background color is red when it's Circle and blue it's going to be blue so if I want to make this one blue I'm going to
do Circle space blue
okay now this is different if you notice in this Swatch I did Circle dot red not
space red okay and that's because in CSS I I'm the
thing that defines a class is a DOT okay so um I'm saying to this Swatch find
something that has a class of circle and a class of red
okay so if we look at these obviously these are going to be a blue circle or a red
circle and a blue circle which pillar you going to take Neo right
so if we want to do pills let's do I don't know what would that be like a four by three something like that
needs to be and Border radius needs to be a little less to make these look like pills but oh well it's okay we won't do
the Matrix let's let's stick with circles getting off on a tangent here all right
stick with our circles okay glad you're learning something new Mark
okay um no we we could do something completely
different we can add background images we could do all kinds of stuff right here right so um
let's do I'm going to duplicate this let's do um
I'm pretty much just kind of doing let's do step four
okay now just to say for step three I mean you can now create this infinite right you can have a million different
Circle colors okay that's red blue purple green whatever
okay um and I should say probably an interesting use case this is a great use
case for pen okay so if we go ahead and add pen into here
um we can say um Circle Styles okay
and then what I do is I'm going to create I'm going to add all of these into a pen and voila there I have a pen that has
all of my circle styles okay I Define what a circle is it has a
border radius of 50 percent has an aspect ratio of one by one okay and then
I have different customizations you can even do borders you can do all kinds of stuff you can style these things to your
heart's content okay now this I should say that this this
little circle.red thing while I'm doing this for circles you can take this knowledge and apply it to all kinds of
different things okay we're just using it for circles right now so think how you can take what
you're what you just learned and apply it to other things okay
okay let's go ahead and go to step four okay oops
um I'm not gonna do background colors here I'm gonna I want to play around with some other stuff
all right so um let's go ahead and start adding um background image why not
so um let's do Circle dot
um Golden Gate
okay um and then I'm gonna do a background image I know I have a picture of the Golden
Gate Bridge somewhere around here there we go Golden Gate
okay so now if I add a class of Golden Gate okay um and let's just copy that copy and
paste that and uh we're gonna do um Circle dot downtown
okay Circle that downtown all right so down here I'm gonna do
Circle uh whoops oops my goodness what am I doing today
um all right we're gonna do Circle and golden Dash gate
and here we're gonna do Circle and downtown
okay oh I forgot to change the image for that let's go ahead and get a downtown image
here we go all right let's uh let's preview that
all right so now I have um my circle I have some background images okay boom all right let's go ahead and
uh we're gonna do um text colors
and um for circles I'm just gonna do header is gonna be
white okay
so now my headers are white okay but some these headers aren't necessarily easy to read
right okay so um what can we do there okay and
text color swatch super cool um let me show you another way you could do
that because really here I'm only messing around with the header color that's it so many ways to skin a cat
here okay now that we're talking about text colors do I want to go down this rabbit hole okay
super quick let's go ahead and let's say I wanted to use Font color
okay instead where my font color is only white okay now if I apply that to Circle
that is not going to work okay
because um I've applied font color to my circle but
the header inside of it is defined in site Styles as being black
okay now you probably know we have an ALT class as well and man
I'm really going down a rabbit hole here okay but let's go ahead and if we do
elements do I have all headers uh
all right let's go CSS if I just do H3 because this isn't these are h3s parent
class is circle okay now basically I'm saying all
all h3s inside of a circle are white okay but let's just keep
things simple and there's other ways we can even do that you we can even do it more different ways but I'm not even
going to go there let's just stick with text colors um we're gonna do Circle
all right and we're going to set headers inside circles to be white there we go
all right
what is controlling the size of the circles yeah so right now um our circle is a one column and the
one column goes full width right so if I were to change the right now this two
column okay is set to be um Auto auto which is it'll split in two
columns on medium if I were to change that let's do like four and eight or four and auto right
let's go ahead and refresh that you'll see that now this circle is bigger than that Circle okay and that's
because um I changed the size of my two columns and the one column will grow to fill
that column inside this two column okay hopefully that helps out
good question all right
review that again all right so um getting back on track here what I wanted to do was um I want to I want to
go ahead and make this text more readable how can we do that okay
um so there's a Swatch called an overlay BG
okay and what I'm going to do here is I'm going to give this a circle class
okay and let's give it an opacity of like 75
percent
no interesting oh
bam I didn't expect this one didn't expect this one darn it
okay
interesting interesting interesting I know why this is doing that do I want to fully explain why okay
darn this is good good to see that this
happened okay um so let's fix this because obviously the
overlay now the overlay looked good right it overlaid our background and then we are have our text on top but
what it didn't do is it it kind of cut it gets cut off here so
all right you know me I gotta explain why okay
all right so let's go ahead and explain why
okay let's make this a little bit wider so we can see stuff all right
so if we look here um
I wonder if we just need overflow
well I I just want to test something really quick let's just uh a fish that overflow hitting on this one column that
might actually fix it oh I saved the day okay
because my solution to to combat that without that overflow hidden was going to be a lot more complex and I was like
darn it let's I want to keep things simple okay that makes me feel so much better look
at that okay so um on that one column because um basically
we want to con constrain anything so that that block that overlay was
breaking outside and filling the entire container okay or the entire column and
we need to tell hey anything that's overflowing outside your borders go ahead and hide it okay so boom overflow
hidden for the win on there okay um I actually think maybe a little bit of actually here it could be something
interesting let's say um we can even let's go a little bit farther here
um well I mean we got ah kind of running low on time let's do some some cool hover effects on here okay so let's go
ahead and uh play around with some hover effects some water
I think these circles are a little large but imagine you have like um you know a a row of these a block grid of these
okay and they all have um you know some sort of hover effect they all have a different background
image okay but um yeah let's play around what I want to do is I want to have the
I want to have the see the image and then when I hover over it I want the overlay to come in and the the header to
fade in as well okay so let's play around with that
so what I want is I want the header to have an opacity of zero
okay and then I also want this overlay to have an opacity of Zero by default
okay so let's go ahead and do that I'm going to go ahead and make that overlay opacity of zero
okay so okay the overlay is there but I set it to be an opacity of zero now we need to hide these headers
okay so I'm going to go ahead and add an opacity Swatch okay
um and what I can do here is I'm actually going to add just to make things a little easier I'm going to add to these headers I'm going to add it a
um I'm going to add a cert a class in there called Circle Dash header okay
just to make things a little less confusing with swatches so I have this class on both of these headers called
Circle header okay and uh what I want to do here is
I'm going to say Circle header has an opacity of zero
okay let's go ahead and preview that voila so my header is there but you
can't see it okay so what we want to do is we now want to start
animating those things in on Hover okay so first off let's let's do the
this so on opacity okay um we want to do so let's go ahead and
do hover okay and we're going to do opacity one
so when I hover over Circle header we want opacity one now
um I hover over the circle I didn't get the I didn't get the header yet oh wait
I when I hover over just where the header is then it comes in that's not what I want
okay I know some of you know this um the answer to this but let's go ahead and do it so we don't want to hover on Circle
header we want to hover on the parent right so what you do is I'm going to set a parent
class of circle okay and you'll notice when I when I do
that I get this cool little setting in here called hover parent so I'm going to check that okay so what that means is
when I hover over Circle make a circle header opacity one
so I'm going to go ahead and hover over the circle boom you'll see that I now get
the header sweet okay so let's do the same thing
for overlay BG let's copy and paste that
and what I'm going to do here is I'm going to do um hover actually okay so
if you notice here overlay BG is
um circle before okay um so what I want to do is
hmm interesting oh nice man I'm clever sometimes so what
we want to do is we want to do a pseudostate of hover apparently I already thought about this Edge case I
was going to tell you something else but never mind okay um so when we hover over that we want it
to be opacity to like 62 how about that
all right let's go ahead and preview that
boom look at that all right
now that works but it's very instant right we we need we need some we need to
add a little bit of um animation to it okay so when we when we
are transitioning hint from one state to another there is a Swatch
called a transition swatch
okay and so there's a couple things so first we want to do a transition on the
header actually let's do the the um overlay BG okay um so here we'll see that the overlay BG
is circled before all right so we need to transition that so I'm going to go ahead and
um I need to do Circle okay now how do I Target the before
element on this overlay so in pseudo state I'm going to do before
okay and I'm going to transition for let's do like 500 milliseconds
and we'll do um ease out okay here's just various timing algorithms
okay I won't dive into that for right now let's let's preview that
there we go if you notice there we go the the header still comes in immediately we'll Rectify that but the
overlay comes in very nicely right sweet all right
so let's go ahead and we're going to add one more transition okay and we're going to transition
Circle header and let me just copy that class
okay um and let's do 500 milliseconds as well
and uh we'll do ease out as well so it kind of Animation matches
there we go all right now a couple things uh with
transition I know for a fact the only thing that I'm animating is the opacity
okay so what I'm going to do is instead of uh allowing CSS to look for all everything I know I'm only doing opacity
so I'm going to tell it that these two things you're only going to animate the opacity this is a minor thing but a every little
bit of performance counts okay so by limiting things
um you know we're going to uh make our experience in the browser a little bit nicer okay
now what if I wanted to do some what if I added a little bit of delay to that
header so the so the background sort of Fades in and a little bit later the header fades in right so what you do is
I'm going to add a delay to this one so I'm going to add 250 milliseconds
of a delay so now you'll see that the header starts
animating after the overlay
pretty cool
so someone was saying it should not hover in the four corners outside of the circle right so it it does okay
um and that is because
unfortunately so here if we if we look at this let's go ahead and
make this a little bit bigger text wise all right so if you
look here in the code this is our Circle okay
that is our Circle okay um
so this circle if you look while it has a border radius okay
um and we've limited the contents of within it okay
the circle itself is still a square the browser still sees it as a square
okay so good point uh you did see I think it was Gunter right that even when
you hover over this invisible part where to the human eye that isn't the circle
to the browser it still is right it's still the circle element on the page okay now
to get around that it's actually quite complex because then you'd have to
you basically have to duplicate your entire work and do the animations on elements that are inside of this and um
yeah I I would say live with it okay I mean
chances are yes it's in and now these are large circles um a lot of times you're gonna have an
interface where these circles are much smaller where the that is not going to be an issue okay
um how can you solve that um that's more than more time than I I don't have time to do that right now
okay solving that um play around with it basically you're gonna have to rebuild and Target
elements within here um it's it's not gonna be easy okay
um this is easy um and uh yeah I'll admit even a lot of the animations I build
um yeah I think you're the amount of time and effort it would
take to do that I think you could spend doing something more important um Gunter I'll be perfectly honest with
you but hey um there we go but it was a great question
um and it is potentially fixable I just don't have time to teach you how to do that um and I'd have to play around with
probably an hour or so myself um to figure out a way around it okay I'm sure it's probably possible
um do I know how to do it straight off the top of my head just by going wham bam bam bam bam no I'd have to figure that out
okay um man I already I thought I would have so
much extra time today and like I've already gone almost an hour um there there's one more I thought it
would be kind of fun uh I'm gonna do one more animation here okay
um and then we're gonna we're gonna play around with some stuff let's duplicate that
um instead of uh transforming the um opacity of this header I'm going to
do something different okay um so let's find where those were that
was this so I'm going to delete that and that okay and that
okay so instead of Transit instead of changing the opacity of the header what
I'm going to do is I'm going to like make it kind of expand and shrink and do something a little bit different okay so
I'm going to do is uh we're gonna use a transform Swatch which is from the swag
okay and I'm gonna do a circle Dash
header here okay and I'm going to use scale
okay and I'm going to choose the default scale to be zero
so I'm gonna do zero zero zero okay and what that does is that shrinks
it down so it is it shrinks it down to nothing okay and let's go ahead and
um on Hover okay and I'm going to do Circle hover parent we're going to
change that scale to 1. okay
and then as we know I want to transition between two states so we're going to do Transition of
Circle Dash header um we're gonna I'm only gonna do
transform and we'll do 500 milliseconds as well
he's out is my favorite okay
look at that
and we can play with all kinds of stuff with transforms right so let's say I want to do I want to move it
um I'm gonna move it down by default we're going to move it down
30 pixels okay
um and then here I'm gonna move it to zero pixels
all right so now over over if you notice now it it
actually it doesn't come straight out at you it actually comes up and I think here let's do a little bit more so a little more drastic let's do like um
negative 100 pixels
you see that hopefully you see it's scaling and moving from the top right pretty cool
um here let's just set a negative let's do uh positive 100
actually it looks like it's I wonder if I need to do like uh
interesting
looks like it's getting cut off a little bit oh and that's because this column here oh because I have overflow hidden
set oh man interesting look at that
there we go okay so um combat that
um I'm going to use an overflow Swatch I thought we had an overflow Swatch there is Overflow
um and then I'm going to do Circle and I'm going to
Target child elements and overflow visible okay
I'm not gonna necessarily explain that but you'll have this project file and that's what I did there okay
do I need to force that
there it goes thank you I think that's a little much I like more
subtle but hopefully you guys are let's do like uh 30 again I think 30 probably
yeah see how it comes up and it out a little bit and you can do opacity as
well right so uh but yeah here let's add opacity back in
so it's going to start at um Circle Dash header
opacity is zero and then
um Circle hover parent opacity one
okay and as transition I need to make sure that this is all now because I'm now transitioning more than just the
transform um now there there is a transform multi here which allows you to transfer
different properties at different times you could do all kinds of stuff oh I won't dive into that now
um but let's go ahead and play with this here so now oh yeah it's the opacity fades in
um I like that that's really nice um let's do the I want to do that a little bit darker
pretty slick right maybe even going from maybe starting
from scale zero is too much let's do like [Music] um 30
something like that oh I hit 30 oh well that's an
interesting one as well I did that by accident okay so it's going it's scaling from
basically three thousand percent um down to 100 right okay I needed point
three point three point three
yeah that's better so it doesn't go all it does it starts at thirty percent and kind of comes up a little bit so
um I think it's great really love it hope you know transforms and transitions you can do a
lot of really cool stuff okay and uh yeah fun with circles
I think we did more about non-circles today than anything but it was fun to learn about circles too
okay um man I really did not get to uh some cool
stuff I wanted to do um but uh let's play around with it anyway
all right we're gonna do I'm gonna do a new one or actually gonna
duplicate or is it this one we do the colors
where's the one I did the colors this one I'm going to duplicate this one
okay and uh let's do step six
okay so
let's get rid of some of these all right
um let's do a couple other um I want to do a couple other variations of color in here
um so we're going to do green
oh and then we need to set the green okay and then we're going to do
uh uh we're gonna do purple
okay let's set it to purple all right and one more orange
all right we're going to set it to Orange
all right and then um there we go and I'm going to
so I now I have Circle and then I want also on classes for different sizes of
circles okay so um go ahead here I'm going to go ahead and I'm going to trash this okay and
we're just gonna do a bunch of a bunch of stuff here so it's I'm gonna do a circle on this container
and uh I'm just going to set a let's do a width Swatch
okay um and oops
I'm going to set Circle I don't want these to be responsive
circles I want these to be static circles for what I'm going to be playing around with Okay so let's do us
um the default size of a circle is 64. how about that okay
um right
Perfect all right I'm good with that
um and then here I want to do Circle dot um small
right and let's do 32 okay
and I'm going to do Circle Dot um about extra small and that is uh 12. or no 16
okay and then we'll do actually let's say this one Circle dot
medium okay and then
um and then we have circled uh large
okay and that one is going to be 64. and we'll do one more we'll do extra
large extra large and that's going to be
uh we'll do 96 instead of 128 okay so now I got all these classes okay
um and it can have red blue green purple orange and it can have various sizes
okay so I'm going to have this container and let's see if I do red guess what it gets red if I do small uh well you're
not going to see it here let's go ahead and pre do a quick preview so there is my
small okay okay so now I have a small circle if I
want that to be a large Circle guess what
boom and I now have a large red circle and if I want a large uh purple circle I
just change the red class to purple and guess what voila I get a large purple circle okay
so what's the purpose of this I want to have a little bit of fun I thought this would be kind of a cool thing to play
around with um we're going to look at slot machine
and we're going to get the particle generator okay so particle generator voila so since I use this okay
oops close that okay um so the particle generator allows us
to um take some content okay and uh we're gonna it's gonna generate a lot of of
something okay um so what I want to do is I want to
randomly assign a class or um a color to a circle okay so
um here we're going to do um color and my available colors are red
green blue um
purple and orange okay
um and then I'm also going to do um size
and that was extra small small
medium large extra large
okay um and then in particle generator you just say how many of those things you
want to create right you can also say no sequential duplicates but let's say I want to create 20 of these
preview
oh wait oh okay I need to use these macros inside my thing so here it just
created 20 purple large circles because I didn't have those so I need to add in um the color macro
into there as well as the size macro into the class so it's going to it's
going to take those values and randomly apply them to a class okay kind of a key stop
boom so now I have 20 randomly generated circles um now one thing I want to do is we're
going to do um I want these to be displayed in line do I have a setting for that no I'm just
going to use the utility class for display Dash in line
oops display Dash inline
oh display block it has to have display block interesting because of the aspect ratio
interesting okay but we can create all a ton of these right so I I can create 200 of
these if I wanted and so I created a bunch of circles
all right now what what can we do with circles um so
um I have another kind of a cool stack called Drift okay and uh
I I have to admit it's been a while since I've played with drift as well I just released it was one of my big releases this year
um let's add actually let's just add drift Pro
drift timeline
I wonder if we can do I want to see I want to wonder if we can do it with just drift animate I'm wondering animate yeah it's the only trigger once
on scroll
no that's not gonna work out we need drift timeline okay
okay so first off I want to I want to make it so all these circles aren't like this right we need them
um we need them positioned differently so I'm going to do a position Swatch
and I'm going to make them uh we're going to Target all circles
okay I'm going to make them position fixed relative to the browser okay
and I want them to be on the bottom of the screen bottom zero
um left 50 percent
or Center the origins actually no we're just gonna leave it like that
I think that's I think that's all we need
all right so I have 200 circles right here okay
um it's kind of crazy okay um and I want to we're going to animate
these things I'm going to animate them all okay um
so on drift timeline let's just animate it on scroll which we'll do on page load
because they're visible on page load okay um start paused
I think you can just do Circle here
I enter your position let's just do zero zero for fun
it's just so it loads directly on page load okay so now let's do the animate stuff so now we're going to
um we're going to trigger on we're going to animate a circle okay
um hold on I did I did a demo of this I gotta refresh my brain a little bit on
that uh oh it's the page particle generator
hey
oh I use the advanced one yeah because we have to randomly do it I'm gonna copy this all right this is if you have uh
this is the slot machine demo file but it'll be in this file too I'm gonna send this one out
is that animating box we're going to animate um Circle
uh well we don't need to rotate because there's you're not going to be able to see rotation on a circle anyway
I don't know if you can see that it interesting uh all right let's
it's interesting as I scrolled it just keeps animating them for a while huh it
didn't do exactly what I what I thought um let's change this to hover
it's just randomly and here let's go ahead and slow the animation down a little bit duration let's do like two
seconds it's gonna staggerum 0.02
how did I do the slot machine one let's see what I did here I did
oh and click oh I'd click the button okay let's see this one
I know we're kind of going over a little bit guys sorry let's say animates boom
yeah I just thought it would be fun to play
around maybe another time we oh I can refine this and basically I thought it'd be fun to like do like make the make the
circles kind of like that'd be kind of fun but it would take it would take me a little while to play
around with that to get that get the animations on this done just right um
but as you see it does it does work um you know it's a way of creating these out these circles and then just kind of
use them as like confetti on the page or something like that imagine if you were to scroll down the page and boof use
particle generator to generate 200 of these things of random sizes and colors and uh yeah pretty slick
okay well guys I think uh I think we'll call
it a day um hopefully you guys enjoyed that um it was just mostly some playing
around um I mean I I think playing around with stuff like
this is um we kind of learned the most sometimes right
um another thing is I mean I didn't even get into you know you can use
what I showed you in styling those circles use those in blog lists or when
you're using your feeds right you can generate all that stuff um and you know you can use the data
from feeds to populate classes or or the data from Total CMS like the categories
and the tags to populate classes of your stuff so you can change your Styles like I did these circles to make them
randomly blue green red large colors right again try to
the things I showed you today were are very you can take them very literally like oh I I know how to change the color
of a circle but think bigger than that right think how you can take that you
can take a class from Total CMS blog post to customize that particular blog
post with a special Style I just use sizing colors but you can do
whatever you want there's uh there's a hundred different swatches that you can do all kinds of stuff with
right so while the examples I showed today were
super simple you can use these in an infinite amount of ways to do so many powerful things
again try to take these Concepts and don't take them literally
apply them in different ways play around with this stuff playing around like I
did today just playing around with some circles super powerful because you can take that
same exact concept to apply to so many other things in your designs so take
that that was really what I wanted to you know teach you today yes we learned about
circles and we learned how we can change the colors and sizes and animate them
but hopefully we you can take these simple examples of just a circle and
apply it to so many other things so anyway um have a great day
um hopefully we'll see you on Friday at the Hangouts always a fun time and uh take care see you on the Weaver space
community