Posts tagged css
– page 2

Just finished up a quick Pen to try out some diagonal swipe/background hover animations using transform: skew.

I have an example page here and you can check out the code below. All of the background images are courtesy of Unsplash It.

I don’t remember what sent me down this path but here I am browsing through pure CSS lettering and icons. My favorite finds so far:

CSS Sans - Just a basic looking sans serif font but it’s all CSS

CSS Illustration - ABC - A super detailed Art Deco CSS alphabet

Material Design Alphabets in CSS - A cool, colorful geometric alphabet

icono - Single element CSS icons

Using transform: rotate() for a sideways text effect is pretty simple CSS but if you’re anything like me, you forget the details for positioning that text and have to play around with translates and transform-origins in the Inspector every time.

So I made myself a cheatsheet for positioning rotated text and thought I’d share it. You can align text to the top, center, or bottom of its parent container and change the direction of the text up or down.

Check it out here.

This is a fairly common request in my office: slide in animated drawers with fixed headers and scrollable bodies. Also, the content in the headers is constantly changing so both the body and header heights need to adapt.

Before flexbox, this was kind of a nightmare. Absolute positioning doesn’t play particularly nice with transforms. Multiple classes to set multiple heights seems like overkill. So does using JavaScript just to get this layout.

But with flexbox, it can be done in basically four lines (eight with prefixes). Use a flexbox column display for the drawer itself:

.drawer {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
}

And set the drawer body to grow and scroll:

.drawer-body {
    -webkit-box-flex: 2;
    flex-grow: 2;
    overflow-y: auto;
}

That’s all it takes. Here’s a Pen that also includes the code for animating on and off the page.

It’s the holiday season so here’s a quick Pen featuring a trio of Christmas tags. Each tag has a festive little design around the edges and flips over on hover.

A lot of Destiny playing has been going on in my apartment lately and after weeks of seeing it whenever I glanced up at the TV screen, I was inspired to work on a few geometric animations.

You can view the results here.

The code is embedded below or you can get it directly at CodePen.

These are both pretty cool:

How To Create CSS Glitch Effect (ihatetomatoes.net)

CSS Animated Neon Text (freefrontend.com)

An update on a quick post I wrote a while back about some social sharing buttons I was working on. I just cleaned up that pen a bit — created examples for each sharing service, prefixed the CSS, added a new animation option — so a demo page to show them off seemed in order.

The demo page is here and the code is here.

I should also mention that the social icons all come from Font Awesome and the background were much easier thanks to this post.