Now Viewing
the CSS

Subscribe via RSS

Front-End Tooling: Do or (you won't) Die.

*Note this is not a personal attack on Ashley, but my thoughts on where I see our industry and reliance on tools going. Also it’s 4am while I’m writing this (during insomnia), so forgive me if I’m not making much sense. TL;DR Read about everything. Learn selectively. I just finished reading Ashley Nolan‘s fantastic ‘State of Front-End Tooling’ survey (which I took...

Read More

Using @supports To Test For Clip-Path

I stopped using Modernizer a few years back for a few reasons, mainly because I wanted to drop as many dependencies and scripts as I could. I was using Modernzier mainly for smaller visual items that wouldn’t be missed if certain users couldn’t see them, so I didn’t see it as a critical script. Since then, I’ve been using CSS3 features...

Read More

Responsive Angles

I had a design I needed to code that was a bit of a fun challenge. Here were the requirements: The header looked like a “tab” on top of a utility nav that was transparent There was a diagonal angle on the right side of the logo, on top of the utility nav, with a white background expanding 100% of...

Read More

Working With A UX Developer

I’ve long since noticed that the way I approach development is completely different than most other developers. While I always aim to get the final product as close to the design mockups as possible, a lot of clients are often surprised at how well I do that (I thought that was the basic job of a front-end dev!)  and that they...

Read More

CSS3 Transforms Card Flip Animation

Short and simple this week! I needed to code a card flip animation on hover for a client. I love how simple it is to create cool animations in CSS3. Just a couple lines of code needed! Just uses CSS3 transforms and some backface-visibility. See the Pen CSS3 Transforms Card Flip Animation by Amber Weinberg (@amberweinberg) on CodePen.

Read More

Vertically and Horizontally Align Any Element with CSS3 Transforms

A super simple and foolproof way of centering anything. It works with relative or absolute positioning, which makes it more versatile than other methods I’ve seen. Note: if you’re using position relative to horizontally align your element, it must have a definite width See the Pen Horizontal and Vertical Align Anything by Amber Weinberg (@amberweinberg) on CodePen.

Read More

CSS3 Content Rollover Animations

I’ve recently had a few different clients request some snazzy rollover animations. Basically an image with a title at the bottom, that on rollover moves to the top of the image with a bit of content below. Not one to make things jerky and plain – I decided to jazz this up with smooth animations and fading content – and...

Read More

Super Hijinksified – Developer Starter Theme

A lot of people have been asking if I use a framework for WordPress. I use my own custom blankish framework that allows me to quickly get started on projects. It’s basically the core files, cleaned up, with all the nonsense divs removed, a basic structure and some basic CSS. Super Hijinksified now includes some responsive theming, commonly used WordPress...

Read More

What Being Responsive Really Means

When a new client asks for a responsive site, I always ask them what they mean by “responsive”. Many are still unsure of what this means, and often end up quoting back a lot of industry buzzwords they’ve heard a long the way, usually to do with some kind of framework or jQuery plugin. What a lot of clients don’t...

Read More

Using JS to Hide Site Until Loaded

I recently needed to hide the entire site until everything was loaded and ready, due to using a scroll loading script, which was making the content flash before it was ready to fire. I made a super easy way to do this, using CSS opacity, a tiny bit of JS and a non-JS fallback for usability. In your CSS: body...

Read More