Sign in

Jhey Tompkins

With the Chrome 88 release, we got support for clip-path: path(). That means it now has support in "most" major browsers!

With path(), we're able to use path definitions for a clip-path (Catch up on what clip-path is here). These path definition strings are the same as those we can use with the SVG path element. What's cool about this is that it provides a way to create shapes that before may have meant using SVG. We can even create paths that break without requiring any tricks.

With the increased support came an opportunity to try something fun with it…


Uh, what’s @property? It's a new CSS feature! It gives you superpowers. No joke, there is stuff that @property can do that unlocks things in CSS we've never been able to do before.

Want to make a stopwatch with nothing but HTML and CSS? Read on!

While everything about @property is exciting, perhaps the most interesting thing is that it provides a way to specify a type for custom CSS properties. …


I’m not too sure how I stumbled into this one. But, something led me to this tweet.

The Twitter Button Challenge

And, to me, that’s a challenge. I took it to the live stream!

The button design is neat. But, I didn’t want to do a direct copy. Instead, we decided on making a “Twitter” button. The idea is that we create an almost transparent button with a social icon on it. And then that social icon casts a shadow below. Moving our mouse across the button shines a light over it. Pressing the button pushes it onto the surface.


Photo by Sanaan Mazhar from Pexels

If you’re in the slightest bit interested in video games, you’re no doubt aware of Cyberpunk 2077. It’s one of the most anticipated games of 2020. The world it paints has a certain style to it. The game’s website does a brilliant job of portraying that aesthetic. Its design does a great job of communicating the look and feel. As you can imagine that means for some rather slick-looking UI components.

Someone first reached out to me asking how I would create an image effect used on the site. …


The text “Let’s do this” followed by glitchy characters
The text “Let’s do this” followed by glitchy characters

Looking for an interesting text animation on your next project? In this post, we’re going to make the following text reveal animation.


Photo by Clint Patterson on Unsplash

Pure CSS buttons with something a little different 👻

This is a cross-post. The article was originally featured on CSS Tricks 👍

It would surprise me if you’d never come across a ghost button 👻. You know the ones: they have a transparent background that fills with a solid color on hover. Smashing Magazine has a whole article going into the idea. In this article, we’re going to build a ghost button, but that will be the easy part. The fun and tricky part will be animating the fill of that ghost button such that the background fills up in the direction from which a cursor hovers over it.


Photo by Amador Loureiro on Unsplash

Get familiar with this little font property 👐

What

The font-variant property enables a developer to use alternate glyphs/ligatures for fonts. This means extra font styles without extra markup or CSS 👍

Before CSS3 it only supported two values, normal and small-caps. normal is normal. But small-caps converts lowercase letters to a smaller uppercase that can look cool 😎


Add a little “pizzazz” to your site ✨

I’m sure we’ve all seen the effect. A block slides in, slides out and reveals some text. Simple enough when we only want to animate in some content. Can even achieve that with only CSS. But what about when we want to loop between content? From one phrase to the next for example.

It gets a little trickier.

For those in camp TL;DR, you can check out the code in the CodePen collection at the bottom of the article 👍 All the code required is available there 👍


Photo by Rock’n Roll Monkey on Unsplash

Atomic CSS from JS 🚀

Styletron is a toolkit for component-oriented styling comprising of CSS in JavaScript flavouring. It’s great for React apps but you can use it elsewhere too!

What’s CSS in JS?

It’s exactly that. Defining your styling within JavaScript. The major benefit being that we can abstract styling to the component level.

const Button = styled('button', {
background: '#276EF1',
color: '#FFFFFF',
cursor: 'pointer'
})

You also get the full power of JavaScript within your styling. Global class name pollution or creating bloated style sheets are no longer a concern 🙌

There are some great resources about CSS in JS. Here’s a great speaker deck about CSS


Base UI by Uber Design

Let’s build a password generator! 🛠

In this post, we take a look at Base Web. It’s Uber’s component library offering for React apps. Base is a design system comprised of modern, responsive, living components. Base Web is the React implementation of Base.

A major selling point for Base Web is its clever customization solution. This gives you a high level of control over components. This is key when extending components or if you wish to move away from the out of the box Uber Base design.

For an example app, let’s build a password generator/validator! 🤓

Jhey Tompkins

I make awesome things for awesome people!

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store