CodeinWP CodeinWP

Mimic ‘onmouseout’ with CSS3 Transitions

Mimic 'onmouseout' with CSS3 TransitionsHere’s a crazy and ridiculous tip that probably has limited uses, but illustrates some quirky possibilities with CSS3 transitions. I’ve written something about this before and Chris Coyier explained the basic concept on his site.

But in this quick post I’ll show you how to make an element have a “mouseout” or “mouseleave” transition with no “mouseover” or “mouseenter” transition.

Read Article

Some Useful Docs and Guides for Front-End Developers

Some Useful Docs and Guides for Front-End DevelopersMy “saved for later” link lists are getting bigger, so I thought I’d post another one of these little roundups. This time, I’m mostly focusing on some interesting guides and docs that I’ve found recently.

As always, I can’t necessarily vouch for the quality and accurateness of all of these sources, but they are all certainly worth a glance. Enjoy.

Read Article

CSS3 Structural Pseudo-class Expressions Explained

CSS Structural Pseudo-class Expressions ExplainedYou probably know that the CSS3 spec includes a number of structural pseudo-classes. Four of these pseudo-classes use function-like syntax that allow an argument to be passed in using parentheses. These are: nth-child(), nth-last-child(), nth-of-type(), and nth-last-of-type().

The purpose of the parentheses is to allow one or more elements to be selected based on a keyword (either odd or even), an integer, or an expression.

Read Article

Ancient Cringe-worthy Posts on Your Favourite Web Design Blogs

Ancient Cringe-worthy Posts on Your Favourite Web Design BlogsI think everyone should be willing to look back at their older work and laugh and realize how far they’ve come. Even the best designers, developers, and bloggers have past work that they cringe at today. Heck, I cringe at stuff I wrote six months ago!

So with the help of Archive.org and WordPress’s easy-to-navigate paging system, I thought it would be fun to cause a whole bunch of people tons of embarrassment by rounding up some of the earliest articles I could find on various popular web design blogs. Enjoy.

Read Article

What Do You Want to Learn Next in This Crazy Industry?

What Do You Want to Learn Next in This Crazy Industry?It’s sometimes intimidating and often ridiculous how quickly this industry moves forward. Just when you think you’ve reached “front-end developer” status, you realize there’s so much you still don’t know, or else only know superficially.

Others have expressed their views about our industry and how frustrating it feels, and still others feel that too much is asked of front-end developers.

Read Article

CSS Selectors Defined

If you’re just getting started with CSS, it’s good to have a fundamental understanding of what we mean when we refer to CSS selectors. In this post I’ll briefly describe all the most well-known CSS selectors along with some examples.

Read Article

Alternative Units for CSS3 Rotation Transforms

Alternative Units for CSS3 Rotation TransformsCustomarily, the unit being used to rotate elements with CSS3 transforms is the “degrees” unit, declared by appending the string “deg” at the end of the unit value.

But “degrees” isn’t the only unit available when rotating elements with transforms. You can also use other units, namely gradians, radians, and turns.

Read Article

Should the Standard Property Be Omitted for Some CSS3 Features?

Should the Standard Property Be Omitted for Some CSS3 Features?As many of us have learned, vendor prefixes are a pain in the butt to maintain, and it’s great that CSS preprocessors and client-side scripts are available to help in this regard.

Although I’ve recommended that the standard property be listed after the vendor-specific lines, for “future-proofing” the code, I’m starting to think that might be bad advice in some circumstances.

Read Article