Jordan Marshall

Frontend Viceroy, UI/UX Czar, and The CSS King.

[Jordan Marshall @TheCSSKing]

First new pen in a few months! I made several CSS Gradients that looked like different types of paper. My favorite is a pretty good facsimile of a yellow legal pad - check it out! @CodePen #css #webdesign

https://t.co/Bqxu46rSOU

[Jordan Marshall @TheCSSKing]

The "user icon" CSS gradient - a perfect ironic background for your user settings page. @CodePen

https://t.co/W80RSFdRZI

[Jordan Marshall @TheCSSKing]

A lot of folks have been asking about animations for the CSS Gradients I've been working with, so I made a pen to play around with options. You can change styles, speed, and gradient. Please let me know which ones you like! @CodePen

https://t.co/317LHTtLI3

[Jordan Marshall @TheCSSKing]

Shout out to the @Netlify free tier. My project @GradientMagic hit #1 on Hacker News (briefly) last week and barely made a dent on the bandwidth limit.

https://t.co/eKbGhujfKa

[Jordan Marshall @TheCSSKing]

Just deployed a new Jekyll site to @Netlify and holy cow, that was easy! It automatically recognized the project and populated all of the build settings, all I had to do was click a button.

[Jordan Marshall @TheCSSKing]

My Latest Pen: Subtle grid styled CSS Gradients, in a CSS grid (A grid of grid gradients). Perfect for adding that graph paper charm to a header or background. Includes some variations on the @codepen blog header theme.
https://t.co/PVDpJo6ywt #css #webdesign #webdev

[Jordan Marshall @TheCSSKing]

Have you ever thought the X-factor your website was missing was... POLKA DOTS? Well now you can add the magic! The Polka Dot Generator uses radial gradients to create Pure CSS patterns that are easy to add to your site. @CodePen #css #webdesign

https://t.co/WXdEB27Lif

[Jordan Marshall @TheCSSKing]

Me in 2019 (feeling lazy): I think I'll get delivery

Me in 2020 (feeling like a hero): I stand between our beloved local restaurants and utter oblivion! I will not fail them!

[Jordan Marshall @TheCSSKing]

Thanks for the tips! I'll have to look at ways of optimizing my gradient generation toolchain.

One thing I love about gradients are that these un-optimized versions are still smaller than most images you would use in their place.

[Ana Tudor 🐯 (find me on Bluesky/ Mastodon) @anatudor]

Saw a @CodePen demo by @TheCSSKing https://t.co/CTqhokYjTT and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions https://t.co/Y0bo00n4ic
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...

[Ana Tudor 🐯 (find me on Bluesky/ Mastodon) @anatudor]

Saw a @CodePen demo by @TheCSSKing https://t.co/CTqhokYjTT and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions https://t.co/Y0bo00n4ic
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...

[Jordan Marshall @TheCSSKing]

A triple underline effect with pure CSS? It can be done. That, and several more in this fun little pen that explores underline effects via CSS gradients. @CodePen https://t.co/FrCDV2W2uH

[Jordan Marshall @TheCSSKing]

@anatudor @CodePen Absolutely incredible! I've been doing a number of gradient related projects in the last few months and none look this good.

[Jordan Marshall @TheCSSKing]

I guarantee you've never seen buttons like this before. HTML buttons styled w/ CSS gradients for some very fun and colorful effects.
https://t.co/9jBRwQzwDk

@codepen #css #css3 #webdev #html

[Jordan Marshall @TheCSSKing]

Very excited for this pen. I actually came up with the name "CSS Grid-ient" first, and worked backwards to design a pen that fully fit the concept. https://t.co/KJcbPkjKls @CodePen #css #cssgradients #cssgrid

[Jordan Marshall @TheCSSKing]

There is no feeling quite like solving a complicated problem with a finely crafted regular expression. On a related note, the regexp support in VS Code is pretty good! #regexp

[Jordan Marshall @TheCSSKing]

Ever wondered how to animate a CSS Gradient? It's not magic - it's CSS Variables 🎆 https://t.co/xEGAIaiTef @CodePen @codrops #cssgradient

[Jordan Marshall @TheCSSKing]

Too many Github followers? Its a common problem. Try using my revolutionary "don't follow me" button, which actively runs away from pesky potential followers. https://t.co/nv79I6xiIz @CodePen @github

[Jordan Marshall @TheCSSKing]

Banksy Meets Vue: A CSS shredding effect, inspired by "Girl with Balloon", the painting Banksy shredded after it was sold. https://t.co/xzSvz6eSFv #artcodevue @vueconfus @CodePen

[Jordan Marshall @TheCSSKing]

What it feels like to browse the web these days
https://t.co/mpgZFNp6gX
@CodePen #gdpr #cookies

[Jordan Marshall @TheCSSKing]

Try your luck with "Full-Stack Groupie", "Backend Soothsayer", or "Enterprise Content Management Sorbet", and watch the job offers roll in. https://t.co/Q4QcvQCjCh @CodePen #PersonalBranding