Julius Kahn will talk about CSS.

I'm really excited about the CSS.

Yes?

Oh, yes.

I'm so happy.

I'm so happy because I'm going to tell you Talk a lot about CSS, so I'm gonna blow hot.

I'm super super excited to be in Singapore on my talk is Tyler artistic CSS Um And I hope that you're going to join my CSS journey, which I'm going to tell you how CSS and art intermingled charter Karl art movements and design movements actually inspire me to dig deeper and CSS I hope that you will find it creative.

I hope that you will find your inner artist.

I hope that you would be more to experiment and I'm going to share some facts about history of art.

So I also hope that it's going to be useful.

Interesting.

In your daily work, you can find me on Instagram and Twitter on.

I'm really eager to to get some recommendations what to do in single port, Also in terms of art and design.

Um, yes, but before, actually it's part I would like to ask all of you to close your eyes.

All of you.

I can see somebody.

Okay.

So close your eyes try to be relaxed.

Follows heat.

So true to remind the moment when you were recently inspired by the art or design.

Think whether it was it in the art gallery, the art museum, or maybe on the street wasn't painting discomfiture, maybe to performance.

What was very specific was a collar.

This shape, the composition or the overall style.

What did you actually do about it?

Did you apply it somewhere?

Did you tell about it to your friends?

Okay.

So you cannot open your eyes and I have to confess.

Dad, um, are And the real word is something that I'm super inspired by older.

Well, I'm Web designer and colder, and I spent a lot of time in front of computer screen.

Actually, the real word, the panel, a quart bring brings a lot of ideas to me.

And I always tried to keep myself awake and keep my eyes wide open Whenever I travel whenever I visit museums or art galleries and I'm also addicted to it.

Um, I traveled a lot this year, and I visited tons of museums and cool exhibitions.

And what I found is that there is a connection between Web design CSS and art on.

And this was actually the stimulus that, um pushed me forward to create this stock.

Another one was the Tweet by Christopher von Son, in which is writing which more people knew what CSS is payable off.

There are so many possibilities now for a more creative fun and uniquely outs, but I just don't see them happening that often.

And it's true because we're still starting 12 congres ts and free boxes.

We always see the website like as a box of thing.

So I hope that my talk about artistic and design movements will give you an incentive to explore, um, an experimental CSS because it's a very creative tool.

So the first design movement I'm going to mention, um, Well, actually, you're going to guess which, which one is that?

Um, my Hindi is dead.

It's celebrating 1/100 anniversary does here, and what I would like to do right now is to open Twitter If your user account, uh, Twitter account.

If not, you can put up with someone who has a Twitter account, and I'm tweeting I can upload his my twitter handle I'm tweeting from the, uh I'm tweeting a poll on Twitter right now.

I hope that you're going to see it in a second, and I'm going to give you 10 seconds to vote.

So there are three, um, design art movements mentioned.

So which that celebrate 100.

And if I receive it is here.

Is that data use?

Is it about half, or is it impression is so I'm waiting for your votes.

Refreshing twitter nervously.

I can't see anything.

But just giving 10 seconds more.

Maybe out switch to my mobile data.

Let's see whether you're heart experts are not okay.

I don't see any votes.

No, it's Can you see the tweet with the pole?

Yes.

Have you already voted?

Okay, so Hey, did you see the result?

You can see.

Okay, so Oh, Okay.

I can see it right now.

So there's 1/2.

How for about has Impressionism.

Um, so the proper answer is Happy birthday.

Bad house.

So in person is, Was in is a bit before because it was 19th century in back house.

I was created in 1919.

So it's like the true, uh, 100 university.

So bad has is.

Ah, was design school.

It was operating between 1919 and 1933 in Germany.

It was created by Walter Gropius in Weimar in Germany.

Andi, it was something totally you.

Yet is it better?

Hey.

Hey.

Hello.

Check, check.

Okay.

Thank you.

So that has was something totally different.

It was a definite off.

A new art school.

Um, so in about house, they wanted to unify our architecture and crashed together.

They also embraced technology, so they weren't afraid of experiments.

They also encourage students to dig more into typography.

Theory of colors.

Inter ferments, so they really, um we're into simplicity, minimalism and pure German metric forums.

As you can see, this is the example the works that were created in around 19 twenties.

Um, and you can see that there is still very modern and designers from 21st century could created it.

Um, So what was also very special about about house is that they wanted to ah, half mass production in its course, so that you think very practically, um, in all walks of life and oh, disciplines off off art and design and also, um, practical minds of about house.

They were focused on, um, um, minimalism and pure form in terms of, like, visual stuff.

So they worked on grid a lot.

And this is something that we also have in CSS.

And this is the connection between Bauhaus for a practical and and see assess.

So we all know that C s ass is shipped.

Browsers.

We know that we can experiment a lot, but I'm sure there are some people who have on the right to dig deeper into it.

And in terms of the browser support, it's getting a lot of better.

You can see the green light.

So it's a good sign for us.

At the same time, you might think that grid also it's kind of a limitation.

And it also push us forward.

Pushed us actually toward more back.

See layouts?

Yeah, sure.

Is it better yet, is the volume okay?

You hear me?

Okay.

Okay.

I don't think Okay, I'll try to not to love and make stupid sounds.

So, um, so what is very important in terms of grid iss, actually, um, yeah, of course.

It has some constraints, some limitation, but actually breaking the grit breaking the rules is super interesting.

from the user perspective Because when you when you see the Lufthansa, um, like Swiss, like, uh, poster, you will see that our letter O is off the grid, and it's something that attracts user retention.

You can also treat the grid just like the way off experiments and also a way of putting elements in the indifferent places Not very usual.

And what I love about CS is great and Firefox developer tools is that it actually breached the gap between designers and developers.

And this is very Bauhaus like idea because Bauhaus wanted to bring engineers, designers technologist together and also that I think that deaf tools is it perfect example of doing it because you've got a great panel for siestas grid, which you can, um, immediately dive into it.

So if you worked closely designers, I strongly recommend you to show it to your fellow friends.

And also new thing is happening, So sub grid was was already mentioned A desk on for you this year in Berlin by renter of Rachel.

Under you and with separate, you can create even more complex and complicated layouts because you can nest grit, insight, and you can also use the trucks Definition of the parent in terms of support.

Well, it's not that good yet, but, um, I took this Grinch it a couple of years A couple of days ago on Guy also opened Twitter after after a while, and I stumble upon this suite by done, Simmons that some bread is actually coming to Firefox.

So it's it's in the Yes, we're happy.

Whoa.

Um, So, um, so you can experiment in Firefox nightly because currently it's it's in the working draft.

And when mentioning about the grid, um, I also want to tell a bad dish towel.

So this is the movement which was created, actually, one year before bathhouse in the Netherlands way have people from the nevertheless hello?

So, um, I, by the way, idol I love s O um, yeah.

So the style was for me.

It's super inspiring in terms of forum collars like photography and the most famous representative of the stylist Mondrian.

And I hope that you've seen his work somewhere.

It's super greed oriented, and some people might think that well isn't an art.

But for me, it's stick so fascinating, their primary colors and like pure form um, which is for me Super super big inspiration for building the layouts.

And this is what also Gene Simmons.

Thus Ah, with with experiment layout lab.

This is our website, and I strongly recommend you to do visited and to dig deeper Bond.

I love that she retained a digital grid and it's it's such playful thing.

So as you can see, it's Bill bonne grippe.

Another website that air stumble upon, um is the deck s.

So this is this website actually won the competition on smashing mag for the most creative usage of grid.

Um, not on Lee.

It's a perfect example of free tubing with grid, but also I love the pure form, the collar that shapes endure a very Mondrian like and taking a lot of inspiration from their style.

So summing up the first design movement, which was bathhouse in the stall we have C s is grid and subgroups, and please use it, use it in a creative manner, eyes it with crazy ideas.

Um, I hope that that you will enjoy it.

So coming up to the 2nd 1 I would like to mention about postmodernism and collage.

So the term collage was actually mentioned, Um, in the beginning of the 20th century by Georges Braque, uh, and Pablo Picasso.

I guess that, you know, the 2nd 1 for sure.

So college is all about mixing different media, and you must say that it looks very creative.

And, um, I think that working with paper and scissors, um, brings a lot of ideas and that only is very relaxing, but also brought in your artistic reasons, um, and bring a lot of ideas.

So, uh, I'm a super inspired by one Polish girl, one polish designer.

Her name is Baracus, and she does a lot of work with paper, um, and digital artwork with collage.

She she she's been working with many while widely known brands like Spotify also fashion brands.

And when I see her work, I immediately think how I can reuse some of the concept and transfer it to the worldwide lab.

So I started seeing CS has just like, uh, ex Caesars and and and I think that's super creative tool.

So I'm such a huge fan of Barker's that I also attended her workshops where we were supposed to, um, creed collages for Coco Chanel.

Um, and uh, it was tons of fun.

Um, you have to try it one day to do the Kalash only with paper, because it's something.

It's just like with sketching before you actually sit.

23 graphics editor.

You can just take all your creative ideas and just, um, presented on the paper.

It's it's much more easier ordered an clicking and, um, and pushing pixels.

So this is one of my work.

I started to experiment with CSS.

What you can see here There are some images, but I used, um, CSS to actually cut it out.

And you can see some see through.

You can see some flowers coming up from from the jacket.

You can see some glitter and also glitter under women's eyes.

So, uh, I used CIA says masking so masking helps us to reveal or fight some some elements and CSS it also defines the transparency levels.

So we have We can, um, way can influence influence on on the Alfa Chano s O.

The mask image is combined with the image source, and, um, and it's counted like, uh, the the levels of transparency.

So here in this example, um, there's, um we've got a simple image.

Um, and we have the mask apply.

Um, so it just cats out part of the jacket, and underneath I applied a gif file.

Just simple.

Is that for the glitter splash?

I I also use masking.

And here's the example.

So I just have the a simple container with the background, which is this gift, and I apply masking and some sort of, um collars edition using blend.

Moz, if you would like to have the different transparency levels, you can do it with masking.

Um, and here is the example with Matthew, if it's like fading out, um, to the corner.

And you can also see, um that the splash with the glitter this fighting out So you just simply apply it with with one line of code.

But you need to remember about vendor prefixes as well.

We have also see is this clipping which is to me, just like scissors and paper.

Um, and it's kind of similar to masking, but for a masking we can use in a GIs and for a CSS, we can all on Lee use vector vector images, So pass banks basically.

So in clipping with the sights with your tongue.

Something is visible or not.

We don't have the option for transparency levels.