This document provides information on several new and upcoming CSS features, including: - CSS variables, which allow values to be stored and reused throughout stylesheets. - New CSS color values including #RRGGBBAA notation and opacity levels. - Compositing and blending features like background-blend-mode and mix-blend-mode. - Clipping and shapes features like clip-path and shape-outside that allow for non-rectangular clipping and text wrapping. - Filters that can apply graphical effects directly in the browser. Each section provides details on the syntax and advantages of the different features. Examples and references are also included to demonstrate how the features can be used.

2. https://codepen.io/pedromsduarte/pen/BGypya

3. PEDRO M. S.
DUARTE
Digital designer and
UI developer
Visual designer
GRAPHIC DESIGNER
Digital designer
WEB DESIGNER
UI/UXer
PRODUCT DESIGNER
Frontend developer
UI DEVELOPER
CSS
LOVER

4. The var() function can be used to insert the value
of a custom property.
VARIABLES
CSS functions are used as a value for various CSS
properties.
CSS FUNCTIONS
#rrggbbaa the CSS Color Module Level 4 defines new
4 & 8 character hex notation for color to include the
opacity level.
COLOR VALUES
The background-blend-mode property defines the
blending mode of each background layer.
COMPOSITING AND BLENDING
clip-path creates a clipping region that sets what
part of an element should be shown.
CLIP PATHS
CSS Shapes describe geometric shapes for use in
CSS, causing wrapping lines to wrap round the
shape.
SHAPES

5. VariablesIt brings the power of variables to CSS, which
results in less repetition, better readability
and more flexibility.
--VAR()

6. Preprocessor
variables
STATIC
Preprocessors need to compile into
CSS to be used
NOT AWARE OF THE DOM STRUCTURE
The variable is part of the preprocessor
language, not CSS itself.
DO NOT RUN IN BROWSER
The browser wouldn't understand the
declarations and toss them out.

7. Declaring a
global CSS
variable
To declare a variable, you first need to
decide which scope the variable
should live in. If you want it to be
available globally, simply define it on
the :root pseudo class.
:ROOT

8. Declaring a
local CSS
variable
You can also create local variables,
which are accessible only to the
element it’s declared at and to its
children.
<ELEMENT>

9. Using values
Each variable can be used for
calculation of other values, to create
even more dynamic values.
<ELEMENT>

10. Javascript
manipulation
Another advantage of living in the DOM
is that you can access the variables
with JavaScript, and even update them,
for example based upon used
interactions.
<ELEMENT>

11. https://codepen.io/pedromsduarte/pen/OaPLEY

12. You can use them without the need of a
preprocessor.
SUPPORT ON BROWSER
.01
You can set a variable inside any selector
to set or override its current value.
THEY CASCADE
.02
When their values change (e.g. media
query or other state), the browser
repaints as needed.
DYNAMIC VALUES
.03
You can access and manipulate them in
JavaScript.
JAVASCRIPT MANIPULATION
.04
W h y y o u s h o u l d u s e

13. SELECTORS
D o e s n o t w o r k
You can use them without the need of a
preprocessor.
SUPPORT ON BROWSER
.01
You can set a variable inside any selector
to set or override its current value.
THEY CASCADE
.02
When their values change (e.g. media
query or other state), the browser
repaints as needed.
DYNAMIC VALUES
.03
You can access and manipulate them in
JavaScript.
JAVASCRIPT MANIPULATION
.04
W h y y o u s h o u l d u s e
MEDIA QUERIES LINK VALUES

14. Color valuesCSS Color Module Level 4 introduces new
color spaces that will let us change how we
blend colors for the web.
#RRGGBBAA

15. 4-8 digit hex
notation
#rrggbbaa notation works much the
same way as #rrggbb notation, but
with the addition of an alpha channel.
Here too, accepted values range
from 00–ff.
#rgba the additional alpha channel
value also applies to the shortened
hexadecimal form.
#RGBA
#RRGGBBAA

16. #rrggbbaa

17. Colors will be very quick to write
especially with the #rgba shorthand.
QUICK TO WRITE
.01
Colors are identifiable at the first glance
because of a consistent notation followed
everywhere.
EASY IDENTIFICATION
.02
No switching between hex notation to
rgba() while working with translucent
colors thus adding in more consistency
to the code.
CONSISTENCY
.03
A d v a n t a g e s

18. D i s a d v a n t a g e s
A d v a n t a g e s
Colors will be very quick to write
especially with the #rgba shorthand.
QUICK TO WRITE
.01
Colors are identifiable at the first glance
because of a consistent notation followed
everywhere.
EASY IDENTIFICATION
.02
No switching between hex notation to
rgba() while working with translucent
colors thus adding in more consistency
to the code.
CONSISTENCY
.03
The tricky part of calculating the
hexadecimal alpha value.
CALCULATE HEX ALPHA

19. Each element is rendered into its own buffer
and is then merged with its backdrop.
BACKGROUND-BLEND-MODE
MIX-BEND-MODE
Compositing and
blending

20. background-blend-mode the combination
of a graphical element with its backdrop
COMPOSITING
.01
mix-blend-mode for elements over other
elements.
BLENDING
.02

22. background-blend-mode: normal | multiply | screen | overlay | darken |
lighten | color-dodge | saturation | color | luminosity | hard-light

23. background-blend-mode: normal | multiply | screen | overlay | darken |
lighten | color-dodge | saturation | color | luminosity | hard-light

24. background-blend-mode: normal | multiply | screen | overlay | darken |
lighten | color-dodge | saturation | color | luminosity | hard-light

25. mix-blend-mode: normal | multiply | screen | overlay | darken | lighten |
color-dodge | saturation | color | luminosity | hard-light

26. mix-blend-mode: normal | multiply | screen | overlay | darken | lighten |
color-dodge | saturation | color | luminosity | hard-light

27. FiltersFilters are a powerful tool that can be used
to achieve interesting visual effects.
#RRGGBBAA
CURRENTCOLOR

28. filter property applies graphical effects
to the area behind an element.
FILTER
.01
backdrop-filter property applies
graphical effects to the area behind an
element.
BACKDROP EFFECT
.02

29. filter: blur() | brightness() | contrast() | drop-shadow() | grayscale()
| hue-rotate() | invert() | opacity() | sepia() | saturate()

30. backdrop-filter: blur() | brightness() | contrast() | drop-shadow() |
grayscale() | hue-rotate() | invert() | opacity() | sepia() | saturate()

31. A fun and effective way to provide visual
unity and aesthetic appeal on the web.
AESTHETIC
.01
Filters are applied to the image after the
browser renders layout and initial paint.
PERFORMANCE
.02
More power available directly in the
browser.
FLEXIBLY
.03
A d v a n t a g e s

32. D i s a d v a n t a g e s
A d v a n t a g e s
Won’t render the designs exactly as we
intended.
BROWSER SUPPORT
A fun and effective way to provide visual
unity and aesthetic appeal on the web.
AESTHETIC
.01
Filters are applied to the image after the
browser renders layout and initial paint.
PERFORMANCE
.02
More power available directly in the
browser.
FLEXIBLY
.03

33. Shapes
SHAPE-OUTSIDE
CSS is capable of making all sorts of shapes.

34. shape-outside defines a shape around
which adjacent inline content should wrap.
WRAPPING
.01
shape-margin the distance between the
edges of the shape and the surrounding
content.
MARGIN
.02

35. shape-outside: circle() | ellipse() | polygon()

36. shape-outside: circle() | ellipse() | polygon()

37. Important for responsive interfaces.
DYNAMIC REFLOW
OF TEXT
.01
We can use the same clip-path
function values we used for clipping.
RE-USING VALUES
.02
Can set the bounding box to margin,
padding and border. This gives us fine
control over the position of these
relationships.
CONTROL
.03
A d v a n t a g e s

38. Clip paths
CLIP-PATH
CSS is capable of making all sorts of shapes.

39. clip-path() defines a closed shape
consisting of a set of connected straight line
segments
CLIPPING
.01

40. clip-path: circle() | ellipse() | polygon() | url()

41. clip-path: circle() | ellipse() | polygon() | url()

42. A d v a n t a g e s
Is easily achieved with relative units,
such as percentages.
RESPONSIVENESS
.01
The specification states that pointer
events must not be dispatched outside
the clipping area.
EVENTS RESTRICTED
.02

43. D i s a d v a n t a g e s
A d v a n t a g e s
All borders, shadows and outlines outside the
clipping region will be clipped.
NO VISIBLE OVERFLOW
Is easily achieved with relative units,
such as percentages.
RESPONSIVENESS
.01
The specification states that pointer
events must not be dispatched outside
the clipping area. So, the click event
is restricted to the shape and its outer
boundary.
EVENTS RESTRICTED
.02

44. Online tools that agile your code process.
TOOLS
.03

45. Chrome: Extensions: CSS Shapes Editor

46. https://bennettfeely.com/clippy/

47. <header>

48. https://codepen.io/pedromsduarte/pen/OazVYp

49. CSS functionsOr should we call the
absolute power of CSS?
MAKING A POINT

50. https://github.com/you-dont-need/You-Dont-Need-JavaScript

51. https://codepen.io/collection/AKkZro/

52. https://rupl.github.io/fun-games-css/

53. Building a search engine in CSS

54. Thank you

55. References
INTRO
Piotr Galor
COLOR VALUES
https://tiffanybbrown.com/2017/08/css-4-color-hexadecimal-values-rrggbbaa/index.html
https://hashnode.com/post/understanding-rrggbbaa-color-notation-cisvdr52x088fwt53h1drf6m2
https://www.w3.org/TR/css-color-4/
https://stackoverflow.com/questions/5445085/understanding-colors-on-android-six-characters/25170174#25170174
https://css-tricks.com/colorme-css-color-level-4/
https://colorme.io/
BLEND-MODES
https://www.smashingmagazine.com/2016/05/web-image-effects-performance-showdown/
https://www.html5rocks.com/en/tutorials/filters/understanding-css/
https://cssduotone.com/
https://picturepan2.github.io/instagram.css/
CLIP PATHS
https://www.smashingmagazine.com/2015/05/creating-responsive-shapes-with-clip-path/