CSS
CSS is a great tool to express your artistic and creative side. I
gave a talk at JSConf.Asia called ‘artistic.css’ about how
design movements shape the current state of CSS.
Sometimes you might have an impression that every website
looks the same – most of them are based on a 12-column grid
and three boxes. Why can’t we draw inspiration from fields or
areas that go beyond digital design? Have we forgotten about the
print or editorial design that we all love? Why can’t we break old
habits and try new CSS properties that open a whole new world of
endless possibilities? Actually, we can!
In my talk I cover properties such as masking, clipping and
transforms in order to explore visual styles that go way beyond
the ones you are familiar with. It’s amazing that we have so many
possibilities for building our layouts and it’s easy as pie to do so.
When talking about print, a great source of inspiration for me is
the collage technique. For creating them I use masking and clipping
in CSS. What’s so powerful about masking is its ability to apply
the same properties as for background-image – we can define its
position, size and repetition. On the other hand, we have clipping,
which is similar to chopping pieces of paper. To find out more about
the intersection of CSS code with Bauhaus, De Stijl, anti-design
aesthetics and much more, I recommend watching my talk and
follow the CSS experiments you can use on your website: https://
http://www.youtube.com/watch?v=aQBYAkaABkU&t=1863sGET CREATIVE
WITH CSS
IN-DEPTHDuring my talk you can see some demos with mask-composite property and
blend-modes to make a collage-like effect::first-letter
This pseudo-element applies styles to the very first
letter of the block-level element. Thanks to that we
can introduce effects that are familiar to us from
print and paper magazines.
p.intro:first-letter {
font-size: 100px;
display: block;
float: left;
line-height: .5;
margin: 15px 15px 10px 0 ;
}
Gradient text
Finally we can apply gradient to our text without
any complicated methods. Let’s find out how can we
introduce this eye-catching effect on our website.
h2.contact-heading {
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
background: radial-gradient(#ffbc00, #ff65aa);
}
CONTENT CONTROL
Thanks to the following properties, we can enjoy
greater control over how the text or images will
behave depending on whatever size or proportion
their container is.
Line-clamp
This property truncates text at a specific number of
lines. We need three properties to make it work.
The display property needs to be set to -webkit-box or
-webkit-inline-box, -webkit-box-orient set to vertical and
overflow set to hidden, otherwise the content won’t
be clipped.
p.shortened {
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
Column-count
Thanks to this property, a browser evenly distributes
the content in a specified number of columns.
.outro {
column-count: 2;
}