[Music]
are you excited over to CSS yes oh my
god yes I'm so happy I'm so happy
because I'm going to tell talk a lot
about CSS so I'm gonna blow hot I'm
super super excited to be in Singapore
and my talk is titled artistic CSS and I
hope that you're going to join my CSS
journey in which I'm going to tell you
how CSS and art intermingle with each
other how art movements and design
movements actually inspire me to dig
deeper in CSS I hope that you'll find it
creative I hope that you will find your
inner artist I hope that you will be
eager 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
and I'm really eager to get some
recommendations what to do in Singapore
also in terms of art and design yes
but before I actually start I would like
to ask all of you to close your eyes all
of you I can see some eyes open okay so
close your eyes try to be relaxed don't
fall asleep so try to remind the moment
when you were recently inspired by the
art or design think where was it in the
art gallery the art museum or maybe on
the street was it painting
the sculpture maybe the performance what
was very specific
was it the color the 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 can
open your eyes and I have to confess dad
art and the real word is something that
I'm super inspired by although I'm web
designer and coder and I spent a lot of
time in front of computer screen
actually the real word the analog part
bring brings a lot of ideas to me and I
always try 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 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 and this was actually the stimulus
that pushed me forward to create this
dog another one was the tweet by
Christopher fond son in which is writing
which more people knew what CSS is
capable of there are so many
possibilities now for more creative fun
and unique layouts but I just don't see
them happening that often and it's true
because we're still strapping 12
Congress and three boxes we always see
the website like as a box a thing so I
hope that my talk about artistic and
design movements will give you an
incentive to explore and experiment with
CSS because it's a very creative tool so
the first design movement I'm going to
mention well actually you're going to
guess which which one is that my hand is
that it's celebrating 100th anniversary
dessert and what I would like to do
right now
is to open Twitter if your user account
Twitter account if not you can pair up
with someone who has a Twitter account
and I'm quitting
I've been uploading as my Twitter handle
and when the law I'm twittering a poll
on Twitter right now I hope that you're
going to see it second and I'm going to
give you ten seconds to vote so there
are three design art movements mentioned
so which that celebrate 100th
anniversary this year is it daddies is
it Bauhaus or is it impressionist
so I'm waiting for your votes refreshing
Twitter nervously
I can't see anything but just giving ten
seconds more maybe I'll switch to my
mobile beta let's see whether your heart
experts are not
don't see any votes can you see the
tweet with the poll yes
have you already voted okay so and did
you see the result you can see okay so
oh okay I can see it right now so
there's a half half for it that has
Impressionists so the proper answer is
happy birthday bad house so impress.js
was in as a bit before because it was
19th century and bad house was created
in 1919 so it's like the true 100
anniversary so bad house is a this I was
Design School it was operating between
1919 and 1933 in Germany it was created
by Walter Gropius in Vemma and in
Germany and it was something totally new
hello okay thank you so that has was
something totally different
it was a definite of a new art school so
in bath house they wanted to unify our
architecture and crafts together they
also embraced technology so they weren't
afraid of experiments they also
encouraged students to dig more into
typography theory of colors and
performance so they really were into
simplicity minimalism and pure geometric
forms as you can see this is the example
that the works that were created in
around 1920s and you can see that there
is still very modern and designers from
21st century could created it so what
was also very special about a bath house
is that they wanted to have mass
production
in its course so they think very
practically in all works of life and all
disciplines of art and design and also
practical minds of Bauhaus they were
focused on minimalism and pure form in
terms of like visual stuff so they
worked on a grid a lot and this is
something that we also have in CSS and
this is the connection between power
house very practical and an CSS so we
all know that CSS is shipped to browsers
we know that we can experiment a lot but
I'm sure there are some people who
haven't already 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 pushes forward pushed us
actually toward more back Celia I don't
think okay I'll try to not to laugh and
so so what is very important in terms of
grid is actually it yeah of course it
has some constraints some limitation but
actually breaking the grid breaking the
rules is super interesting from the user
perspective because when you when you
see the Luft Hansa like Swiss like
poster you will see that a letter L is
of the grid and it's something that
attracts user attention
so we can also trade the grid just like
the way of experiments and also a way of
putting elements in in different places
not very usual and what I love about CSS
grid and Firefox developer tools is that
it actually
read the gap between designers and
developers and this is very bad house
like idea because Bauhaus wanted to
bring engineers designers technologists
together and also deaf I think that deaf
tools is a perfect example of doing it
because you've got a great panel for for
CSS grid which you can immediately dive
into it so if you work closely designers
I strongly recommend you to show it to
to your fellow friends and also new
thing is happening so subgrid was was
already mention a test configured this
year in Berlin by Ranger Rachel Andrew
and with SAP grid you can create even
more complex and complicated layouts
because you can nest grid inside and you
can also use the tracks definition of
the parent in terms of support well it's
not that good yet but I took this
screenshot a couple of years a couple of
days ago and I also opened Twitter after
after a while and I stumble upon this
tweet by John Simmons that sub bread is
actually coming to Firefox so it's so so
you can experiment in Firefox nightly
because currently it's it's in a working
draft and when mentioning about the grid
I also want to tell about dish towl so
this is the movement which was created
actually one year before bath house in
the Netherlands what do we have people
from the Netherlands hello
III by the way yeah so their style is
for me it's super inspiring in terms of
forum colors like biography and the most
famous representative of the stylist
Mondrian and I hope that you you've seen
his work somewhere it's super grid
oriented and some people might think
that well is it an art but for me
it's so fascinating there there are
primary colors in like pure form which
is for me super super a big inspiration
for building the layouts and this is
what also Jen Simmons does with with
experiment layout lab this is her
website and I strongly recommend you to
dude visited and to dig deeper and I
love that she rotated the whole grid and
it's such a playful thing so as you can
see it's open grid another website that
our stumble upon is the deck so this is
this website actually won the
competition on Smashing mag for the most
creative usage of grid not only it's a
perfect example of creativity with grid
but also I love the pure form the color
that shapes enter a very Mondrian like
and taking a lot of inspiration from the
staff so summing up the first design
movement which was badass in digital we
have CSS grid and sub grid and please
use it use it in a creative manner use
it with crazy ideas I hope that that you
will enjoy it so coming up to the second
one I would like to mention about
post-modernism and collage so the term
collage was actually mentioned in the
beginning of 20th century
by Georges Braque and Pablo Picasso I I
guess that you know the second one for
sure
so collage is all about mixing different
media and you must say that it looks
very creative and I think that working
with paper and scissors brings a lot of
ideas and that only is very relaxing but
also abroad in your artistic horizons
and and bring a lot of ideas so 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 and digital art or
with collage she she she's been working
with many 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 to the World Wide Web so
I started seeing CSS just like ik
Caesars and and and I think that's super
creative tool so I'm such a huge fan of
barcodes that I also attended her
workshops where we were supposed to
create collages for for Coco Chanel and
it was tons of fun you have to try one
day to do the collage only with paper
because it's something it's just like
with sketching before you actually sit -
the graphics editor you can just take
all your creative ideas and just present
it on a paper it's it's much more easier
rather than collecting and and pushing
pixels so this is one of my work I
started to experiment with CSS what you
can see here if there are some images
but I used 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 I used CSS
masking so masking helps us to reveal or
excite some some elements in CSS it also
defines the transparency levels so we
have we can we can influence luhan's on
on the Alpha Channel so the mask image
is combined with the image source and
and it's counted like the the levels of
transparency so here in this example
there's a we've got a simple image and
we have the
apply so it just cats out the part of
the jacket and underneath I applied a
gift file as simple as that for the
glitter splash I also use masking and
here's the example so I've just had the
simple container with the background
which is this gift and I apply masking
and some sorts of collars addition using
blend modes if you would like to have
the different transparency levels you
can do it with masking and here's the
example of masculist
it's like fading out to the corner and
you can also see that the splash the
glitter is fading out so you just simply
apply it with with one line of code but
you need to remember about the vendor
prefixes as well
we have also CSS clipping which is to me
just like scissors and paper and it's
kind of similar to masking but for a
masking we can use images and for a CSS
we can all only use vector vector images
so paths paints basically so in clipping
we decides whether 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've got the plan
that is cut it out with clipping so what
I did before is I had to prepare the the
path the shape of the of the path of the
plan I did an illustrator exported an
SVG and later applied it and clip path
so I to the SVG code face it and an HTML
between death stacks so it means that it
won't be generated anywhere but at like
the our website knows what is the
definition for the path and later we
just reference to it in CSS
so we've got clip path property
and this is how it looks in real life
we've got the plans I also applied some
background and some blend modes and if I
comment out the flip pass you'll see the
whole image so simple as that and if
you're not very convinced that actually
CSS masking and clipping are the future
of web design I would like to show you
New York Times website this is one of
the article although they didn't use CSS
clipping or masking fur for cutting out
those shapes I think that more collage
like websites will be coming soon
because I think it's it's at the prime
tire right now so we're talking about
masking I would also like to put an
accent on storytelling so we all want to
have our users attracted to our website
and the content and some shapes some
visual elements actually help us to draw
the attention of the users and I was
super inspired by one of the example by
Razvan elements so I decided to do my
create my own version so you can imagine
that you're reading national geography
or some blog post about that travel to
to Iceland so what is done here is that
we've got the heading that has the width
and the height fixed so we can apply the
background and we can apply the mask so
the mask helps us to cover the heading
and we have the impression that it's
actually emerging behind the mountains
so we also have the text fixed and in
span tag and and it's just simple as
that and we also need to apply mask size
to to make it match to that 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
predicted needed to prepare before is
the mask image so I I cutted it out and
in Photoshop and after applying a mask
we have the visible area so the area
where where the text will be visible so
if we have the background it's going to
be transparent and the text is what
would be will be emerging from from this
space and when talking about masking I'm
super excited about math composite so
mask 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 gradient so
what we do is we apply two masks and
then we just need to define the
compositing mode so here it is mask
composite add and what's it's good to
remember is that the first one is called
the source and the second is the
destination and once they're combined
later than can be applied for the image
that we're masking we're going to mask
so this is the example I created and I
was inspired by some fashion magazines
and I really wanted to keep this like
very artistic vibe so we have the image
and here you can see it's actually
animated you can see different different
compositing modes and in this example
you're seeing that we're having two two
masks 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 we can see that it
gives us a really interesting in fact
very artistic so for this one we've got
intersect compositing mode we can use
add 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 modes to
make it like more more natural effects
of the flowers and make it more blended
with the first image that it's
underneath so something that we've got
for blending for compositing modes
we've got add subtract intersect and
exclude operators and in terms of
browser compatibility well it's not that
best yet but it doesn't mean that we
can't experiment with it in general
masking is is better so I think that
this is the moment to start digging into
now summing up the collage movement it
was originated by Pablo Picasso and
Georges Braque in France and CSS is
deriving a lot from it through masking
and clipping so the next movement its
pop art and I and I and I hope that
you're familiar with some works of Andy
Warhol and what I like about his worse
is the color so when I think about color
and CSS one thing comes to my mind and
these are blend modes so I'm talking
about and thinking about blend modes
there is do a ton of fact a widely
popular widely used by by Spotify and I
was wondering okay can we do something
like this with CSS and of course we do
so this is the simple image without any
changes and these are some experiments
with with blend modes so we've got the
container and inside there is an image
but there are also pseudo elements
before and after created for the image
container where we have different
background values red and pink and
different mix blend modes we've got 16
of them so you can you can experiment a
lot as you can see we can 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 pop art and we have blend
modes in CSS
last art movement I want to mention is
one of my beloved it's anti design it
actually was taken from architecture in
brittle and Brutalism in architecture so
for instance Bloomberg applies a lot of
anti 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 anti design where we where all
the errors and jamming is welcome so
this actually became a very hot design
trend this year and laughter as well and
in terms of representatives and art for
for anti design there is fluxes group
for instance Yoko Ono belong to it so it
was originated in 60s
and what they wanted to do is like the
freedom in art so they blend it a lot of
different genres and they were trying to
make some ideas from typography from
performance to yard so they were
experimenting a lot and I also really
liked the typography experiments that
are presented here so what's happening
on the web are the brittle ice website
that I truly love because like they're
not afraid of experiments they're kind
of weapon on come for mists and if I
look for the inspiration even if I work
for serious clients I always I always
visit Brit Silas website have you ever
heard about them by the way okay so
people so if you if you haven't visited
this website I strongly recommend you
it's British websites I've come and it
and it's now states that British website
our dad but if you use inspect also you
can easily explore the website so when
looking for some ideas from anti design
and like having something it's different
and more and being more Rebell on the
web i i i found this website and i love
it because it's it's very simple but
they used one effect with playing with
with perspectives and skewing and i love
the fact that
the website is dedicated to architects
actually so so playing with perspectives
it's very wise and I was wondering okay
so how can we apply it on the web is it
difficult and it was super easy to find
this code pen by James Boswell but first
and you can find the address out there
so it's just the wave with CSS
transforms we're skewing and with some
upsetting a front from the left side and
scaling the text and it's done on hover
so it's super super cool and I also was
exploring other website and found this
with a kind of playful typography and
think that immediately came to my mind
with variable fonts and I hope that
you're saying for Mandy's dogs because
she's going to show you some awesome
experiments with variable fonts although
that this is an image I think that we
can finally do some crazy stuff with CSS
to have playful typography and a bit
different than usual 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 triangle 3d with some
skewing in CSS because it gives a
totally different different impression
on the web summing up the design trend
we have brittle ISM in architecture
we've got flexes group and everything
what's happening in in Britain in
British web sizes is super attractive so
please don't forget about transforming
CSS and variable fonts well if you're
afraid of experiments and you think that
some it's not that easy to take a risk
and apply all those all these CSS
properties which are not fully yeah I I
just recommend you to use supports rule
which works like just like media query
so if the browser doesn't support a
block of code of lack of CSS it will
just skip it
so we use it in this manner and if you
don't visit museums often or or or don't
want to look for inspiration in in the
analog world I if I could recommend
something I would recommend interest so
I have my own board which is called CSS
inspirations and I usually take some
some things from the print and the
tutorial because I think that print
gives us a lot of ideas what we can do
with CSS so summing up we have CSS graph
I mentioned about clipping and masking
which for me art dislike scissors and
CSS we have variable fonts
we've got blend modes I didn't mention
writing modes but this is also super
cool super creative to have different
ways of showing and aligning the text so
I hope that you'll feel inspired
you'll feel inspired and 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
prizes candies from Poland and stickers
from the awesomes and what I'd like to
do what i'd like to ask you right now is
to pair up with someone from from the
audience you can make new friends and
open the browser with your mobile phone
this is the address that you're going to
use it's going it's called good IT and
I'm going to quickly lounge the quiz
[Music]
so we're going to see the quiz team mode
[Music]
sweetie
the music is out there okay so this is
the the code you should enter in a
browser and then the important thing is
that you're going to choose the shape
not the answer so please pay attention
and you cannot change the answer and
only one is correct so we're waiting for
the teens unicorn awesome
okay I'm going to wait ten seconds for
people to join
so many people oh my god okay waiting
ten more seconds
ten nine eight seven six five four three
two one
okay I'm starting sorry 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 collage Bracken Picasso
Walter Gropius P at Milan or fluxes
oK we've got five seconds four three two
one
okay so the answer is yes it's Bracton
capacitors and congratulations let's
then go to the next let me win
congratulations
next question who did belong so who did
it belong to the - Tom movement its
Pablo Picasso Salvador Dali Kate
Mondrian George Brackett okay so it's
yet one Beyond and the last question
because I'm running out of time so we've
gotten we're going Alex okay Congrats
we're going to have the last question
which of the composite operators that
not does not exist is it at multiply
intersect or exclude sorry there is a
typo
time counts so be fast
okay I'm going no I need to wait six
seconds to get the final results okay so
it's Alex so Alex Sean and there if you
could come to me afterwards during the
break I have some prizes for you
congratulations yes and so the final
place I hope that you enjoyed the quiz
so my message to you is just to observe
the word because we have tons of
inspirations everywhere and I hope that
you also go to some museums and art
galleries and look at some pieces of art
with fresh eyes I would like to thank
you for listening and if you have some
recommendations were to go and Singapore
what to eat I'm eager to to get them on
for instance on an Instagram or my
Twitter and the last thing that I want
to mention is that it was my dream to to
come to Singapore I'm super happy
because I'm a foodie freak and I'd like
to say big thank you for Thomas and
hugene for inviting me thank you a lot
sorry for running out of time enjoy the
rest of the conference
[Applause]