Placeholder Image

字幕列表 影片播放

  • as leaving mentioned I'm opening.

  • 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.

  • And this is the example kind of my digital collage I made with CSS.

  • So you go to plant that it's cut it out with clipping.

  • So what I did before is I had to prepare the the path, the shape of the pack off the plan.

  • I did it.

  • An illustrator exported spg and later applied it and clip off.

  • So I too as biggie code base it and just, um oh, um between death stacks.

  • So it means that it won't be generated everywhere, but like the our website knows, what is the definition for?

  • For the path and later we just referenced to it and CSS So we've got a clip path property, and this is how it looks in real life.

  • Um, we've got the plans.

  • I also applied some background and some, um, blood Moz.

  • And if I come in now, the clip off, you will see the whole image so simple as that.

  • And if you're not very convinced that actually CSS masking and clipping or the future of Web design, I would like to show you new York Times website.

  • This one of the article, um although they, um they didn't use CSX clipping were masking for for cutting out those shapes.

  • I think that more collage like websites well, becoming soon because I think it's It's it's Brian Tire right now.

  • So we're talking about masking.

  • I would also like to, um, put an accent on storytelling.

  • So we all want to have our users attract our website and the content and some shapes.

  • Some visual elements actually hope us to draw the attention of the users.

  • Um, and I was super inspired by one of the example by resident column on.

  • So I decided to do my create my own version.

  • So you can imagine that you were reading national geography or some book post about that travel to Iceland.

  • Um, so what is it done here is that we've got the heading that has the width and a height, um, fixed so we can apply the background and we can apply the mask.

  • So the mask helps us to cover the heading.

  • Um, and we have the impression that it's actually emerging behind the mountains.

  • So we also have the text fixed and in span.

  • Tak, Um and And it's just simple is that and we also need to apply mask size two to make it match to the to the background we have for the heading.

  • And I really like this example because it's very approachable for designers but also gives us like it's very impactful in terms of user experience and the overall impression of the website of the article.

  • So what I pretend he didn't need it to prepare before is the mask image.

  • So I, um, I cut it out and find a shop.

  • Um, and after applying a mask, we have the visible area.

  • So the area where the tax will be visible.

  • So if we have the background, it's going to be transparent and the Texas is would be will be emerging from from this space.

  • And when talking about masking, I'm super excited about mass composite.

  • So mass composite lets us to combine to compose many layers of mask of masks, image images.

  • So let's imagine, we've got two masks, splashes and one great in, um, so what we do is we apply to masks and then we just need to define, um, the compositing mode so here does mass composite ad And what's it's good to remember is that the 1st 1 it's called the source and the second is the destination.

  • And once they're combined later and can be applied for the image that we're masking, we're going to mask.

  • So this is the example I created analysts inspired by some fashion magazines on Guy really wanted to keep this like, very artistic vibe.

  • So we have the image, and here you can see, it's actually Annie made it.

  • You can see their friend, um, different compositing boats.

  • And in this example, um, you're seeing that we having to, um, two masks.

  • Um, and if we apply only one, it looks like this.

  • But if we combine them and actually add another image to make it more collage like, um, we can see that it gives us a really interesting, in fact, very artistic.

  • So for this one, we've got intersect compositing boat.

  • We can use ad, and we can use the friend.

  • We've got four of them, and I'm going to show you in a minute.

  • And for this I also used blend does to make it like more, um, more natural effects off the flowers on and make it more blended with the first image that it's underneath.

  • There's something not We've got four blending for compositing modes.

  • We've got, um, add, subtract, intersect and exclude operators.

  • And in terms of browser comfortability, well, it's not the best yet, but it doesn't mean that we can experiment with in general masking iss iss iss better.

  • So I think that this is the moment to start digging into now summing up the Kalash movement, it was originated by public Ascend, George Braque and friends and, um, CSS is deriving a lot from it, um, through masking and clipping.

  • So the next movement, it's pull Bard and I and I and I hope that you're familiar with some works of Andy Warhol.

  • Um and what are you like about these words?

  • Is the color.

  • So when I think about color and CSS, one thing comes to my mind and these are blend boats.

  • So, um, I'm talking about and thinking about blend modes.

  • There is due out on effect, a widely popular, widely used by by Spotify.

  • And I was wondering, Ok, can we do something like that's what CSS.

  • And of course we do So this is the simple image without any changes.

  • And these are some experiments with with blend, Moz.

  • Um, so we've got the container, and inside there is an image, but they're also suited elements before and after created for the image container where we have different background values, read and think and different mix blend boats.

  • We've got 16 of them s so you can you can experiment a lot.

  • As you can see, we're gonna have very various effects.

  • And again, it's pretty simple to apply.

  • And I'm pretty creative to have on the website so summing up, we've got proper, um, and we have blood boats and CSS and the Lest, um, art movement, I want to mention is one of my bill oft its anti design.

  • It's actually was taken from architecture in brutal and brutalism in architecture.

  • So, um, for instance, Bloomberg applies a lot of under design ideas, so you can see that some some some of their their ideas are kind of pretty kind of likely.

  • So this is all about onto design where we, um where all the errors and jamming its welcome.

  • So this actually became a very hot design friend this year and Lester as well, Um, and in terms of representatives and art for for until designed there is flux is group, for instance, Yoko Ono belonged to it.

  • So it was originated in sixties and what they wanted to to do is like the freedom in art.

  • So they blend it a lot of different generous.

  • And they were trying to make some ideas from topography from performance.

  • Do you dart?

  • So they were experimenting a lot, and I also really like the typography experiments that are presented here.

  • So what's happening on the web are the brutalist website that I truly love because they're not afraid off experiments.

  • They're kind of weapon on come for mists.

  • And if I look for the inspiration even if I worked for serious clients, I always I always visit with Alice website Um have you ever heard about them?

  • By the way, if you could raise offense, Okay, So people, So if you if you haven't visited his website, I strongly recommend you.

  • It's Britos websites of calm, and it's now states that Brittles website our debt.

  • But if used in spectral, so you can easily explored the website.

  • Um, so when looking for some ideas from unto design and like having something, it's different and more, um, being more rebel on the Web.

  • I found this website and I love it because it's first simple, but they used one affect with playing with with perspectives and skewing.

  • Um, and I love the fact that the website is dedicated to art objects, actually, So eso playing with of perspectives, it's it's very wise, and I was, uh, wondering.

  • OK, so how can we apply it on the Web?

  • Is it difficult?

  • And it was super easy to find this coat penned by James Boswell Butts Worth.

  • And you can find the Edwards out there.

  • So it's just the place with CSS transforms with skewing, Um, and with some upsetting front from the left side, um, and scaling to text.

  • And it's done on Harvard.

  • So it's super super cool.

  • And I also, um, was exploring other wet sides and found this, um, with with, uh, uh, kind of playful typography and thing that immediately came to my mind was our edible fonts.

  • And I hope that, um, you're staying for Mandy stocks because she's she's going to show you some awesome experiments with viable funds.

  • Um, although that this is an image.

  • I think that we can finally do some crazy stuff with CSS to to have a playful typography and a bit different, unusual and also playing with the perspective.

  • And I think it's it's something that it's not very frequently used.

  • But I think that we should start playing with three d um, with some skewing in CSS because it gives a totally different, different impression on the Web summing up the design trend Ah, we have brutalism in architecture.

  • We have got flexes group and everything.

  • What's happening in Britain in brutal slept side This is super attractive, So please don't forget about transform and see us as inviolable funds.

  • Well, if you're afraid of experiments and you think that some it's not that easy to take a risk and apply olders us a ll the CSS properties which are not fully yet.

  • I just recommend it to you supports rule Ah which works like just like media query.

  • So if the browser doesn't support a block of code of look of CSS, it will just skip it.

  • So we use it and this mother and if you don't visit museums often or or or or don't want to look for inspiration in the anal aboard.

  • Um, if if I could recommend something, I would recommend, um, interests.

  • So I have my own board, which is called CSS Inspirations.

  • And I usually take some, um, some pins from the print in the editorial because I think that, um, print gives us a load of ideas.

  • Um, what we can do with CSS So summing up, um, we have seizes grip.

  • I mentioned about clipping and masking which, for me or dislike scissors in CSS way have variable fonts we've got Blend, Moz.

  • I didn't mention writing, Moz, but this is also super cool and super creative.

  • Do you have a dick?

  • Different ways of showing and aligning the text.

  • So I hold that, um, you feel inspired your friend inspired.

  • And, um, you're eager to start digging into CSS.

  • And before I finish my talk, I actually would like to invite you for a quiz.

  • I have some some prices Candies from Poland and stickers from the awesome Tze and oh, what I'd like to you what I'd like to ask you, um right now is to, um pair up with someone from from the audience.

  • You can meet your friends, um, and opened the browser with him by phone.

  • This is the address that you were going to use.

  • Um, it's going.

  • It's called, um Hood, I t.

  • And I'm going to quickly lounged.

  • Uh, quiz.

  • Um, yeah.

  • Just so we're going to see to quiz team mode Sweeting, The music is out there.

  • Okay, so this is the coat you should enter in a browser.

  • Um, and the important thing is that you're going thio, choose the shape, Not the answer.

  • So please pay attention and you cannot change the the answer and only one is correct.

  • So we're waiting for the teens.

  • You, Nick are and awesome.

  • Okay, I'm going to wait 10 seconds for people to join so many people.

  • My God.

  • Okay, waiting 10 more seconds.

  • 10 98 So in a six.

  • By worth we to one.

  • Okay, I'm starting.

  • Sorry if if you're not on the list.

  • So we've got five questions.

  • I hope that you you were focused.

  • Who is connected with the term called Josh, Braque and Picasso.

  • Walter Gropius, Piet Mondrian or flexes.

  • Okay.

  • We'll get five seconds for 321 Okay, so the answer is yes, it's broken Picassos and congratulations.

  • Um, let's go to the next.

  • Let me win.

  • Congratulations.

  • Next question.

  • Who did?

  • Below.

  • I'm sorry.

  • So who did belong to the Their style movement?

  • It's Pablo Picasso.

  • Salvador Dali.

  • Piet Mondrian, George Braque.

  • Okay, so it's Piet Mondrian.

  • And the last question because I'm running out of time.

  • So we're going.

  • We're going, Alex.

  • Okay.

  • Congress, We're going to have the last question.

  • Which of the composite operators that not that's not exist?

  • Is it at multiply, intersect or exclude?

  • Sorry, there's a typo.

  • Time counts, so be fast.

  • Okay, I'm going.

  • No, I need to wait six seconds to get their final results.

  • Okay, so it's Alex.

  • So, Alex, Sean.

  • And there, if you could, um, come to me afterwards during the break.

  • I have some prices for you.

  • Congratulations.

  • Uh, yes.

  • And so the final rites.

  • I hope that you enjoy the quiz.

  • So my message to you is just to observe the word because we have ponds of inspirations everywhere.

  • Um, and I hope that you also go to see museums and art galleries and look at some pieces of art with fresh eyes.

  • I would like to thank you for listening on if you have some recommendations were to go and Singapore what to eat Eager Thio to get them on, for instance, on Instagram or my Twitter.

  • And the last thing I want to mention is that it was my dream to come to Singapore.

  • I'm super happy because I'm a foodie freak.

  • Um and I'd like Thio, um, say a big thank you for Thomas and huge ing for inviting me.

  • Thank you a lot.

  • Sorry for running out of time.

  • I enjoy the rest of the conference.

as leaving mentioned I'm opening.

字幕與單字

單字即點即查 點擊單字可以查詢單字解釋

B1 中級

artistic.css by Agnieszka Naplocha | JSConf.Asia 2019 (artistic.css by Agnieszka Naplocha | JSConf.Asia 2019)

  • 3 0
    林宜悉 發佈於 2021 年 01 月 14 日
影片單字