net - UK (2020-02)

(Antfer) #1

PROJECTS
CSS


CSS


them from my repository: http://bit.ly/netmag-
2019-CSS-tricks).

TYPOGRAPHICAL DECORATION
There are several CSS properties that help us to
enhance how the text is presented on the web.

Te x t-st roke
We’re familiar with text stroke (outline) from Adobe
Illustrator or vector-drawing applications. We can
apply the same effect using the text-stroke property.
It’s good to know you can animate text-stroke with
CSS but only the stroke colour – the stroke width isn’t.

footer h3 {
/*more styles in style.css*/
/*...*/
-webkit-text-fill-color: transparent;
-webkit-text-stroke: 2px #000;
}

DISCOVER SECRET


CSS TRICKS


Want to explore every nook and cranny of CSS properties? Aga Naplocha


introduces you to some lesser-known examples you might not have used


Even if you’re familiar with CSS and building
beautiful layouts, you can still discover new
CSS properties and features. By using them you
have more influence on how the content behaves on
the website, as well as having more freedom in
terms of how you apply creative techniques to
elements such as photography.
In this tutorial, we are going to dig into some
lesser-known properties. When experimenting with
them, please bear in mind that mentioned features
are not supported by all the browsers, so it’s worth
checking them out on https://caniuse.com/. Let’s dive
into some short and concise examples!

WHAT YOU WILL NEED:
O Your favourite web browser and developer tools –
I recommend using Firefox or Google Chrome as
they support all the features I use in this tutorial.
O A code editor.
O Assets such as images and fonts (you can download

ABOUT THE AUTHOR
AGA NAPLOCHA
w: http://aganaplocha.com
t: @aganaplocha
job: Co-founder of The
Awwwesomes / Coding
designer at Adobe
areas of expertise:
HTML, CSS, web design
and UX

View source


files here!
All the files you need for
this tutorial can be found at
http://bit.ly/36dUAbl
Free download pdf