TheCSSKing's profile picture. Frontend Viceroy, UI/UX Czar, and The CSS King.
http://jormars.com, http://gradientmagic.com

Jordan Marshall

@TheCSSKing

Frontend Viceroy, UI/UX Czar, and The CSS King. http://jormars.com, http://gradientmagic.com

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 codepen.io/TheCSSKing/pen…

codepen.io

Legal Pad as a CSS Gradient

A CSS Gradient that looks like the classic legal pad that you can still find around most offices. ...


The "user icon" CSS gradient - a perfect ironic background for your user settings page. @CodePen codepen.io/TheCSSKing/pen…

TheCSSKing's tweet image. The "user icon" CSS gradient -  a perfect ironic background for your user settings page.  @CodePen 

codepen.io/TheCSSKing/pen…

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 codepen.io/TheCSSKing/ful…


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. gradientmagic.com


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.


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. codepen.io/TheCSSKing/ful… #css #webdesign #webdev


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 codepen.io/TheCSSKing/ful…


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!


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.

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

anatudor's tweet image. Saw a @CodePen demo by @TheCSSKing codepen.io/TheCSSKing/pen… and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions codepen.io/thebabydino/pe…
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...
anatudor's tweet image. Saw a @CodePen demo by @TheCSSKing codepen.io/TheCSSKing/pen… and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions codepen.io/thebabydino/pe…
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...


Jordan Marshall reposted

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

anatudor's tweet image. Saw a @CodePen demo by @TheCSSKing codepen.io/TheCSSKing/pen… and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions codepen.io/thebabydino/pe…
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...
anatudor's tweet image. Saw a @CodePen demo by @TheCSSKing codepen.io/TheCSSKing/pen… and noticed gradients could be simplified a bit, so I wrote a couple of Sass functions to generate clean code versions codepen.io/thebabydino/pe…
Before vs after CSS comparison:
231 vs 185 bytes (1)
310 vs 159 bytes (6)
...

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 codepen.io/TheCSSKing/pen…


I guarantee you've never seen buttons like this before. HTML buttons styled w/ CSS gradients for some very fun and colorful effects. codepen.io/TheCSSKing/ful… @codepen #css #css3 #webdev #html


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. codepen.io/TheCSSKing/ful… @CodePen #css #cssgradients #cssgrid

TheCSSKing's tweet image. 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. codepen.io/TheCSSKing/ful…  @CodePen #css #cssgradients #cssgrid

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


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. codepen.io/TheCSSKing/ful… @CodePen @github


Banksy Meets Vue: A CSS shredding effect, inspired by "Girl with Balloon", the painting Banksy shredded after it was sold. codepen.io/TheCSSKing/ful… #artcodevue @vueconfus @CodePen


Try your luck with "Full-Stack Groupie", "Backend Soothsayer", or "Enterprise Content Management Sorbet", and watch the job offers roll in. codepen.io/TheCSSKing/ful… @CodePen #PersonalBranding


Wasn't sure how to brand myself, but thanks to my handy new tool I think I figured it out. I'll share the tool itself soon.

TheCSSKing's tweet image. Wasn't sure how to brand myself, but thanks to my handy new tool I think I figured it out.  I'll share the tool itself soon.
TheCSSKing's tweet image. Wasn't sure how to brand myself, but thanks to my handy new tool I think I figured it out.  I'll share the tool itself soon.

Loading...

Something went wrong.


Something went wrong.