Original Source: https://www.smashingmagazine.com/2020/07/monthly-roundup-07-2020/

Bringing You The Best Of Smashing

Bringing You The Best Of Smashing

Iris Lješnjanin

2020-07-17T11:00:00+00:00
2020-07-17T20:34:15+00:00

Well, I guess we can all agree that this year has been quite something. We’ve all been challenged in one way or the other, and the new normal is not quite the old normal. Still, the overriding emphasis remains on safety and everyone’s wellbeing, as well as the importance on sharing thoughts and feelings on creative wellness within the community.

Unfortunately, the effects of COVID-19 are still so wide-reaching throughout the world, so that the Smashing team has had to make big changes to our plans this year. As Rachel Andrew, editor-of-chief of Smashing Magazine, nicely puts it:

“The pandemic has made life unpredictable and scary for many people. At Smashing, we’ve had to very quickly figure out new ways of delivering great content — in a way that supports the business but also our speakers and workshop leaders. We have been encouraged by the enthusiasm from the community, the messages of support, and the willingness to try these new formats.”

On that note, we have decided to take all 2020 dates online. We hope to see you there!

August 20–21
SmashingConf Live
Tell me more →

September 7–8
SmashingConf Freiburg
Tell me more →

October 13–14
SmashingConf Austin
Tell me more →

November 10–11
SmashingConf San Francisco
Tell me more →

We’re able to do these all these wonderful things because of your support, and we truly and sincerely appreciate it.

Interactive Workshops To Help You Boost Your Skills

With online workshops, we aim to give you the same experience and access to experts as in an in-person workshop, without needing to leave your desk. So you can learn at your own pace, in your own time, and follow interactive exercises along the way.

We’ve done our best to provide you with a mix of both design- and frontend-related workshops:

July 28–29
Designing For Emotion
Aarron Walter
Design

August 6–14
Web Application Security
Scott Helme
Front-end

August 17–31
Behavioral Design
Susan and Guthrie Weinschenk
Design

Aug. 19 – Sept. 3
Front-End Testing
Umar Hansa
Front-end

Aug. 20 – Sept. 4
Designing For A Global Audience
Yiying Lu
Design

September 1–16
Jamstack!
Jason Lengstorf
Front-end

September 10–11
The CSS Layout Masterclass
Rachel Andrew
Front-end

Sept. 17 – Oct. 2
Vue.js: The Practical Guide
Natalia Tepluhina
Front-end

Sept. 22 – Oct. 6
Smart Interface Design Patterns, 2020 Edition
Vitaly Friedman
Design & UX

Attending a Smashing online event means that you’ll be taking part in live sessions, Q&As, discussion zones, challenges, and so much more! See all schedules and events →

Sit Back, Relax, And Tune In!

The Smashing Podcast is the perfect way to take a little bit of Smashing along with you on your morning commute, when working out at the gym, or just washing the dishes. Every two weeks, Drew McLellan talks to design and development experts about their work on the web. You can subscribe in your favorite app to get new episodes as soon as they’re ready.

1. What Is Art Direction?
2. What’s So Great About Freelancing?

3. What Are Design Tokens?
4. What Are Inclusive Components?

5. What Are Variable Fonts?
6. What Are Micro-Frontends?

7. What Is A Government Design System?
8. What’s New In Microsoft Edge?

9. How Can I Work With UI Frameworks?
10. What Is Ethical Design?

11. What Is Sourcebit?
12. What Is Conversion Optimization?

13. What Is Online Privacy?
14. How Can I Run Online Workshops?

15. How Can I Build An App In 10 Days?
16. How Can I Optimize My Home Workspace?

17. What’s New In Drupal 9?
18. How Can I Learn React?

19. What Is CUBE CSS?
20. What Is Gatsby?

Is there a topic that you’d love to hear and learn more about? Or perhaps you or someone you know would like to talk about a web- and design-related topic that is dear to your hearts? We’d love to hear from you! Feel free to reach out to us on Twitter and we’ll do our best to get back to you as soon as possible.

Catching up with what’s new in the web industry doesn’t mean you have to be tied up to a chair and desk! Do as Topple the Cat does it: grab your headphones and stretch those legs! You can subscribe and tune in anytime with any of your favorite apps.

Our Most Recent Addition To The Smashing Bookshelf

We shipped the first copies of Click! How to Encourage Clicks Without Shady Tricks a few weeks ago, and if you pre-ordered a copy of the book, you must have received a personal note from the author himself, Paul Boag. It was fun to follow the reactions pop up on social media — Ari Stiles shared some tweets in her recent post.

Click! comes along at a time when many of us need a creative “nudge.” The book inspires us to think differently about our routines for building online sites and services—what works, and what doesn’t. You can jump to the table of contents, or if you’d like to take a peek first, you can download a free PDF excerpt right away (17.3 MB). Happy reading!

Print + eBook

eBook

Print + eBook

{
“sku”: “click”,
“type”: “Book”,
“price”: “39.00”,

“prices”: [{
“amount”: “39.00”,
“currency”: “USD”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}, {
“amount”: “39.00”,
“currency”: “EUR”,
“items”: [
{“amount”: “29.00”, “type”: “Book”},
{“amount”: “10.00”, “type”: “E-Book”}
]
}
]
}

$
39.00

Get Print + eBook

Quality hardcover. Free worldwide shipping. 100 days money-back-guarantee.

eBook

{
“sku”: “click”,
“type”: “E-Book”,
“price”: “19.00”,

“prices”: [{
“amount”: “19.00”,
“currency”: “USD”
}, {
“amount”: “19.00”,
“currency”: “EUR”
}
]
}

$
19.00

Free!

Get the eBook

DRM-free, of course.

ePUB, Kindle, PDF.
Included with Smashing Membership.

Get the eBook

Download PDF, ePUB, Kindle.
Thanks for being smashing! ❤️

Trending Topics On Smashing Magazine

As you may already know, we aim to publish a new article every single day that is dedicated to various topics current in the web industry. Here are some that our readers enjoyed most and have recommended further:

“CSS News July 2020,” Rachel Andrew
“An Introduction To React’s Context API,” Yusuff Faruq
“How To Pass Data Between Components In Vue.js,” Matt Maribojoc
“Setting Height And Width On Images Is Important Again,” Barry Pollard
“Differences Between Static Generated Sites And Server-Side Rendered Apps,” Timi Omoyeni

Best Picks From Our Newsletter

We’ll be honest: Every second week, we struggle with keeping the Smashing Newsletter issues at a moderate length — there are just so many talented folks out there working on brilliant projects! Kudos to everyone involved!

Interested in sponsoring? Feel free to check out our partnership options and get in touch with the team anytime — they’ll be sure to get back to you right away.

P.S. A huge thank you to Cosima Mielke for writing and preparing these posts!

Free Fonts With Personality

Typography is a powerful communication tool, a way to express ideas, and a trigger for creativity. Based on this understanding, the Argentinian-based type foundry Rostype creates fonts that are free to use for anyone, in personal and commercial projects.

There are currently 15 fonts available, and each one of them shines with a unique personality. Some are designed with a special focus on readability, others are the perfect display typefaces, made to stand out, some are retro-inspired, others more futuristic and dynamic. There’s even a typeface inspired by the coronavirus lockdown. A treasure chest if you’re looking for a typeface that is a bit more distinctive.

The Making Of A Typeface

It’s always insightful to sneak a peek behind the scenes of how other design teams work and think. Chris Bettig, Design Director at YouTube, now shares an interesting case study on how he and his team created YouTube Sans, a tailor-made font that doubles as a brand ambassador.

Before the new typeface made its appearance, YouTube used the iconic play button and a modified version of Alternate Gothic for the wordmark. However, as Chris Bettig explains, there was no clear typographical guidance. Designed to work across the entire range of YouTube’s products and reflecting the platform’s worldview as well as the community of creators who use it, YouTube Sans changed that. For more insights into how the font came to life and the challenges the design team faced along the way, be sure to check out the case study.

Dealing With Browser Font Rendering Inconsistencies

We all know those moments when a bug literally bugs us but we can’t seem to figure out how to solve it. Stephanie Stimac recently came across such an issue: When she opened her personal website in Safari, she noticed how drastically different the title of her page was rendering compared to other browsers. It appeared much bolder than expected.

To find the reason for these rendering inconsistencies, Stephanie started to dissect differences between the user agent style sheet and the computed CSS properties and soon found herself far down the rabbit hole, comparing the confusing behavior with Chrome, Firefox, and Edge. There’s no simple answer to the question which browser is actually handling the styling correctly, but after running a number of tests, Stephanie found out how to prevent the browser from deciding how to bold font-weights: you need to explicitly define the font weight with numerical values. A small detail that makes a significant difference.

Continuous Performance Measurements Made Easy

When launching a website, it’s common to run performance tests to ensure the site is fast and follows best practices. But how do we keep it fast as soon as deploys are happening every day? Speedlify is Zach Leatherman’s answer to this question.

Speedlify is a static site published as an open-source repository that uses Lighthouse and Axe to continuously measure performance and publish the performance statistics — at most once an hour and automatically once a day. You can run it manually, locally on your computer and check in the data to your repo, or, if you’re using Netlify, it can run entirely self-contained. A great way to keep performance always in sight.

The Anatomy Of A Push Notification

Push notifications were first introduced on iOS back in 2009, web push followed five years later. Today, they are supported across a lot of platforms and browsers — from iOS and Android to Amazon Echo, Windows, Chrome, Safari, Firefox, Edge, and more. Each one of these platforms is a bit different, though, making it complicated for designers to wrap their heads around what exactly goes into a push notification.

A useful reminder comes from Lee Munroe. He summarized how many lines of text you need on which platform, requirements for images, if there are character restrictions, and other details that can be hard to remember. The overview also comes in handy to assess what your notification will look like on operating systems you don’t have access to. One for the bookmarks.

Editing Keyframe Animations Live

When you’re creating animations, it’s always helpful to see the animation in action as you tweak it. Unfortunately, that also involves a lot of switching back and forth between your text editor and the browser. Mitch Samuels was tired of doing that, so he built a tool to save him time: Keyframes.app.

The tool lets you create a CSS keyframe animation with a visual timeline editor. You can add steps to a timeline, use the simple UI to adjust the CSS properties you want your target element to have at each step, and the animated preview will update live. Once you’re happy with the result, you can copy the CSS and use it in your project right away. Keyframe.app is also available as a Chrome extension. A real timesaver.

Determining The Best Build Tool For Your Project

Build tools aim to make the lives of developers easier by streamlining workflows and codifying best practices. However, picking the right build tool for a project can be a challenge. To help you make a more informed decision, folks from the Google Chrome developer relations team built Tooling.Report.

Based on a suite of tests to assess how well a build tool adheres to best practices, Tooling.Report gives you an overview of various bundlers and the features they support. It’s not only a quick way to determine the best tool for a project but also a reference for incorporating best practices into existing codebases — with the long-term goal of improving all build tools and, thus, the health of the web.

Turning A Flat Image Into A Folded Poster

Some coding experiments leave even the most experienced developers in awe. And even if it’s something you won’t be using every day, it’s always inspiring to see fellow developers think outside the box and explore what’s possible with web technologies. The folded poster effect that Lynn Fisher created with pure CSS is such an experiment.

With a bit of CSS, Lynn makes your average image look like a folded poster. With paper creases running over the image horizontally and vertically and a background shadow that gives the poster a 3D effect. A cool little project that beautifully shows what can be achieved with CSS.

Striking A Balance Between Native And Custom Select Elements

How do you build a styled select element that is not only styled on the outside but on the inside, too? In her article “Striking a Balance Between Native and Custom Select Elements”, Sandrina Pereira shares her attempt to create a good-looking, accessible select that benefits from as many native features as possible.

The idea is to make the select “hybrid”, which means that it’s both a native <select> and a styled alternate select in one design pattern. Users of assistive technology will get a native <select> element, but when a mouse is being used, the approach relies on a styled version that is made to function as a select element. Clever!

Hybrid Positioning With CSS Variables And max()

Some ideas require you to think outside the box and explore new paths to make them happen. Imagine this example: You want to have a page navigation on the side, right under the header when it’s scrolled all the way to the top. It is supposed to scroll with the page when the header is out of view and stay at the top for the rest of the scrolling. That’s exactly what Lea Verou wanted to achieve in a recent project.

You might say, that’s a case of position: sticky, but there’s a more finely-tuned approach to getting the job done, as Lea shows. Without any JavaScript. Her solution relies on CSS variables and the new max() function that lets you apply min/max constraints to CSS properties. A fallback helps in browsers that don’t support max() yet. Clever!

Stories From The Dark Side Of The Web

Hackers, data breaches, shadow government activities, cybercrime, hacktivism — a lot is going on on the dark side of the web. But who are the people behind these activities? And what’s their “mission”? Jack Rhysider dedicated a podcast to the stories that happen on the hidden parts of the network: Darknet Diaries.

No matter if it’s the story of a gambler who finds a bug in a video poker machine that lets him win excessive amounts of money, the story of a penetration tester breaking into buildings, or a nation state hacking into a company within another nation, the Darknet Diaries is full of gripping insights into a secret world. The podcast adheres to journalistic standards by fact-checking and ethical sourcing of information, and while all of this is great entertainment, it also aims at explaining the culture around cybersecurity to make listeners more responsive, informed citizens of their digital lives. Be sure to tune in.

Smashing Newsletter

Every second Tuesday, we send a newsletter with useful techniques on front-end and UX. Subscribe and get Smart Interface Design Checklists PDF in your inbox.

Your (smashing) email

Subscribe →

Front-end, design and UX. Sent 2× a month.
You can always unsubscribe with just one click.

(cm, vf, ra)

Original Source: http://feedproxy.google.com/~r/1stwebdesigner/~3/26qE_TzoUUo/

Whether you work for an agency or you are a freelance web designer, developer or both, you are undoubtedly familiar with the common nightmare of getting feedback and tracking bugs and issues on your projects, especially from clients who do not possess technical skills. There are various ways that we try to get input from clients while we work on their projects, but most of them – like support tickets, long email chains, spreadsheets, or an even more frustrating combination of all of the above – do not provide the tools or centralization we need to have an effective, streamlined way to collect website feedback. In those instances we usually end up with important information we need quick access to stored in numerous different places where it can get lost, overlooked, or forgotten.

So how can we save time, money, and anxiety when we’re working on client projects and need their input? Fortunately there is a tool that is made for just such a solution! BugHerd takes care of all of these issues and puts them in one, simple, easy-to-access place, where you and your clients can comment on and resolve issues right on top of your website project. As they say, it’s like sticky notes on a website. What could be more intuitive?

In this article we’ll take a look at some of the key features BugHerd has to offer, what it takes to set up, and how you can start using BugHerd today. Best of all, Bugherd offers a FREE 14-day trial with no credit card required upfront, so you can take it for a test run and decide for yourself without any risk. Let’s take a look!

Flexible setup. Install in minutes.

You can use BugHerd as a browser extension or a JavaScript snippet or both together for maximum flexibility. The browser extension takes 2 minutes to install, and you can simply copy the JS snippet into your website’s code to make it work across all browsers on desktop and mobile. Once installed, BugHerd acts like a transparent layer on your website that only your team, and your clients, can see. Website feedback and tasks are pinned directly on the page to an element, complete with metadata like screenshots, CSS selector data, Operating System & Browser Data. Users can also annotate screenshots with design feedback if they wish, and only those who have been invited to give feedback can see the BugHerd sidebar when visiting the website.

How It Works

Simply point & click on any element to report an issue or provide website feedback, then it is “pinned” directly to the website issue. Designers and developers can then access the issue and its details directly on the site, so you’re not having to dig through emails or spreadsheets to find any outstanding tasks.

Tasks and the technical details are also sent to a Task Board (a kanban board with a customizable workflow) where they can be assigned to team members and tracked to completion. This makes BugHerd perfect for using with remote teams and clients to ensure everyone is on the same page.

Imagine eliminating those emails back and forth where the client is giving website feedback and requests a change, describing where they want it on the page in such a way that you have to send them a screenshot with arrows asking, “Is this what you were talking about?” Instead, the client (or your team) “pins” their website feedback directly on the page in the exact location they want to discuss! No more back and forth, and no more digging through spreadsheets or other tools trying to find something.

Additional Features

Automatically attach screenshots with every bug report.
3rd-Party integrations with services like Zapier, GitHub, Slack, Basecamp and more.
Version control sync that lets you update tasks with commit messages.
Unlimited projects.
Inline tagging.
Upload additional files like specs, logs or mockups and attach them to website feedback and issues.
Real-time comment feed.
Permission management lets you control who has access to what.

Looking For The Easiest Tool To Collect and Manage Website Feedback? Give BugHerd a try!

BugHerd is a must-have tool for web designers and developers, with a variety of affordable pricing plans that make it an invaluable tool to add to your team’s arsenal. You get contextualized website feedback directly on your project’s pages. Your tasks can easily be delegated, prioritized, tracked, and stay organized both on the project itself and on the taskboard, which is easy to sort, search, and filter through to find what you need. Your productivity will be increased dramatically, as you will be spending far less time on miscommunications with clients. And finally, it’s quick, easy, and FREE to set up and try it out for yourself! So give BugHerd a try – we’re confident you will thank us later.

Original Source: http://feedproxy.google.com/~r/Designrfix/~3/654NabfK9pY/light-ui-vs-dark-ui-what-side-should-you-embrace

Life is an endless circle of decisions. Every day you have to consider your options and challenges, and find solutions. And at the end of the day, each solution is a decision you make based on knowledge and preferences. This article will discuss one of the choices UI designers have to make when they create […]

The post Light UI vs Dark UI – What Side Should You Embrace? appeared first on designrfix.com.

Original Source: http://feedproxy.google.com/~r/CreativeBloq/~3/caVSGeEuqLI/css-tricks-to-revolutionise-your-layouts

Learning new CSS tricks is one of the best ways to shake up your website design. If you've been working in the web industry for a while, you may feel you're always coding or designing the same layouts. Trends come and go but the majority of sites look the same – using the 12-column grid, two and three-column boxed layouts and similar shapes. Not only is it getting a little boring to look at, but the user experience isn't that great.

One way to change it up is to draw inspiration from fields or areas that go beyond digital design. Why not use print or editorial designs for your website? You can break old habits with new CSS properties that open a new world of possibilities.

If you'd like more web design advice, see our guide to the perfect website layout, plus here are the user experience tips you need to know.

30 web design tools to speed up your workflow in 2018

A CSS revolution is underway – tools like Flexbox or CSS Grid offer easy ways to build interesting layouts. Using CSS, you can create in visual styles that go way beyond the ones you may be familiar with.

In this article, we'll share some CSS tips that will help you break the mould in your website layouts, with just a couple of lines of code.

01. Explore CSS blend modes

Duotone imagery and colouriser effects are some of the hottest web design trends. They are widely popular across the web thanks to Spotify, which implements them cohesively. Now you can finally stop creating multiple different coloured versions of your assets, and apply the effects directly in the browser.

Using CSS blend modes is not only a great way to unify the look of the content across websites, it also enables you to set different colour versions of an image, changing only one value in CSS: the colour. There are 15 possible blend mode values, including screen, overlay, lighten and darken.

Ortiz Leon Architects uses blend modes to generate a duotone image background

There are a couple of implementation methods, depending on the type of element you would like to apply the effect to. For example, you can use background-image and background-colour set on the container background-blend-mode: darken;, or create an overlay with pseudo-elements (i.e. :before and :after) on the image wrapper in order to get a colourising effect.

To achieve a satisfying duotone effect, it’s recommended that you use a high-contrast black and white image. You can do this by applying CSS filters to set greyscale and a high contrast level.

Bolden’s website has this great example of mix-blend-mode, which has been fully achieved in CSS

Another cool property is mix-blend-mode, which lets you blend content of the element with the content or background of its direct parent. This works especially well on overlapped lettering. You may ask why in this case we don’t just adjust opacity – the answer is simple: we can easily lose the colour vividness using transparency only.

The era of images that can be edited directly in your web browser is coming, but we can’t forget about browser compatibility – support is limited for blend modes at the moment.

02. Add a mask

Masking tells your browser which asset elements should be visible, and is very useful for building creative shapes and layouts. Masking can be done in three ways: using a raster image (eg PNG format with transparency parts), CSS gradients or SVG elements.

Note that unlike a typical raster image, SVG can be scaled or transformed without a significant loss of quality.

It’s important to mention that Firefox supports only the latest one, so we need to use an inline SVG mask element. What if we use a raster image with transparency levels? The transparent parts of the image won’t be seen – so in other words, the opaque fragments will be displayed, hiding other pieces. 

Masking is particularly powerful because it enables you to apply the same properties to background images, defining their position, size and repetition.

Here, the red background is the visible part, and text will emerge from behind the mountains (click the image to see the final mask)

One great use case for CSS masking is in articles that combine text and images. Irregular containers and images are very popular in print, but tedious and time-consuming to implement on the web. But thanks to masking, not any more! 

You can also have fun using transparency levels to cut out part of animated images (eg. GIF files). However, when using these properties, don’t forget about cross-browser support, and add vendor prefixes.

03. Don’t be afraid of clipping

Another great feature is CSS clipping. A shape’s boundary is called the clip-path (not to be confused with the deprecated clip property), and clipping defines which image area should be visible. Clipping is similar to cutting out a piece of paper – anything outside the path will be hidden, while anything inside the path will be visible.

For example, if a circle function sets a clipping mask over the top of an image, you will only see the part of the image within this circle.

The cool thing is that we can use shape functions and SVG as clip paths, which gives us a lot of opportunities – for instance, we could animate them into morphing shapes. Check out this article from Chris Coyier about creating transparent JPG using SVG clip path.

With clip path you can remove background from your image (click to see the full example)

If you are wondering what the difference between clipping and masking is, then remember that masks are images and clips are only vector paths. It's worth mentioning that masking will consume more memory, as you're working with a full image so everything has to be done pixel by pixel.

This is why it’s recommended that you use masks when you want a partial transparency effect; if you want crisp edges, it’s best to use the clip paths.

04. Think outside the box

Shape-outside and shape-inside to the rescue! Who said that text containers always need to be rectangular? Let’s step out of the box, literally, and discover new forms making our page layouts richer and less boxy. shape-outside and shape-inside properties allow you to wrap your content around custom paths in CSS. 

So how does it work? Simply apply the following code to the given floating image or container:

It is important to note that the float property and the dimensions of the element – height and width – have to be defined, otherwise this won't work. For the shape you can go with circle(), polygon(), inset() or ellipse(). 

Another possible value is the url() function. In this case, this enables the shape-outside property to define an element shape based on the image. You might choose to use the url() function instead of the polygon() when you have a particularly sophisticated graphic with many curves and points, and you want the content to wrap around it smoothly.

Use DevTools to check how the shape you’ve designed for your text behaves (click the image to see this example)

If you’d like to create more room between your element and the content, use the shape-margin property, which will act just like a margin. Shape functions can be animated, but only for defined polygons – the url() function unfortunately is not able to be animated. 

Browser support for shape-outside is limited at the moment, but keep your fingers crossed for its fast implementation in other browsers.

05. Try SVG for animation

To be honest, I cannot imagine today’s web without SVG (scalable vector graphics). Its name speaks for itself – it scales, so it answers all concerns regarding responsive web design. The SVG graphic will be crisp no matter the screen resolution of the device it’s viewed on.

Aside from scalability, there is another feature that should encourage you to play with SVG: the ability to manipulate SVG with CSS. If you have never tried dabbling in CSS animations and SVG code, you must try it now – it’s unbelievable how quickly you can achieve amazing effects.

This animated slideshow is from Aga’s presentation at CSSconf Nordic, and was created entirely in HTML and SVG (click to see it in action)

You may think that in some cases it’s easier to use raster images, however, SVG has one big advantage over ordinary images. Words included in SVG are kept in the <text> tag and so remain text, which makes it searchable, selectable and accessible. It also means you can edit it directly in the code. However, we have to remember to embed the font face to be sure that the font will be rendered.

Animating SVG with CSS is like animating any other element in HTML – it can be done with transitions, transforms and keyframe animations. Once you’re familiar with the SVG code, the rest is straightforward and very intuitive, because you basically do it just like you would in HTML.

The coolest thing about SVG is that you can grab whatever part you want and make it come alive with CSS animations. This means we can create some very interesting dynamic effects, not necessarily using JavaScript. SVG has its own DOM API, so as a matter of fact the whole SVG code can be easily inspected using DevTools, which I strongly recommend using while exploring this topic. 

06. Make some noise

The 1980s and 1990s are back! Glitch – the aesthetics of chaos, noise and jamming – is becoming a popular design trend this year. The celebration of glitches, failures and errors can be seen on the web as well. If you’d like to play with perspective and be more visually chaotic, you can do so easily by transforming and skewing your site’s elements. 

This effect is very easy to code, and adds a strong visual accent to a website (click to see it live)

The perfect example of how to do it in CSS only can be found on Captain Anonymous' CodePen, which presents skewed, animated text. One line of code does the magic: 

07. Get creative with collage

Collage-inspired designs are enjoying their moment in visual arts – while researching this article, the work of Rosanna Webster and Barrakuz immediately stole my heart – and even on the web they’re getting more and more attention. If you are in doubt, check out the MailChimp homepage (below). Did you notice the collage?

Mailchimp’s homepage collages have been created using playful CSS properties

The traditional approach is to simply attach raster images that have been prepared in a graphics editor, but with the techniques I've discussed in this article, it is possible to create similar effects by using CSS properties. You can even prepare collages that truly adjust to the web’s requirements – and are scalable, animated and interactive.

I've prepared some examples using all these cool CSS properties, so you can see how they can be combined to achieve a collage-like style on the web. Take a look at my examples.

08. Don't forget browser support

If you feel held back when you want to use CSS properties that you suspect are not supported by all browsers, the @supports rule is there to help you. @supports allows you to check the browser support for CSS property:value pairs. 

The code that is included in the @supports block will be rendered only if these conditions are true, otherwise the code has not been read by the browser. In a case where the browser doesn’t understand @supports, it doesn’t generate a given part of the code either.

Combining features such as blending modes, masking, clipping, CSS shapes and the power of SVG gives us a great set of tools to boost our creativity and break from the norm. With these tools we have an opportunity to create a web version of things we currently see in print.

Although some properties may still experience problems with browsers’ compatibility, don’t hesitate to play with them. Although browser support may be limited now, this will likely not be the case in the future. It is just a matter of time. 

This article was originally published in net magazine.

Related articles:

11 CSS secrets you need to know in 202024 cool CSS animation examples to recreate12 tips for amazing CSS animation