Archive for the ‘CSS’ Category

Hitch.js For Better CSS

CSS, JavaScript | Posted by Keefr June 19th, 2013

I’ve never been a fan of CSS pre-processors, but something about this one makes me want to try it. Maybe it’s cause it’s JavaScript, ratter than a server-side processor, but this Hitch seems appealing to the way I code, and the logic I’m already using in things like jQuery and PHP. So, I might have to explore it further.

Check it out:
Hitch.js Provides a Better Way to Write your CSS

Replace the Image in an with CSS

CSS | Posted by Keefr May 31st, 2013

Seems outlandish that you wouldn’t be able to access the server to make a change to the src of an image via the markup or even JavaScript, but we’ve all had wacky clients and even wackier situations that require a little creative thinking and a bit of hackery. The situation described in the article below is definitely one of those situations, but pretty cool solution utilizing CSS.

Replace the Image in an with CSS

The REM Checker / Calculator

CSS, Responsive Design, Web Development | Posted by Keefr May 30th, 2013

Working on a project the next couple weeks that’s responsive in nature, which as should be the rule going forward, rather than an exception.

Anyway, I’m building out a WordPress template, using the newest default WP theme (twenty twelve) as the underpinnings. Till this point, I’ve always used twenty ten as my starting point when not starting completely from scratch with my WordPress theme.

The twenty twelve theme is responsive, unlike its predecessor. While I’ve used pixel values and ems countless times in my CSS< this is the first time I've been introduced

The REM Checker

Create Modern CSS3 Hover Effects

CSS | Posted by Keefr May 28th, 2013

Nice little tutorial on using 2D CSS transforms to make more modern looking hover effects/transitions using CSS3. I’m a big fan of throwing transitions in just for a nice little touch. I’ve always got this little snippet ready to go for a little polish:

-moz-transition:all .5s ease;
-webkit-transition:all .5s ease;
transition:all .5s ease

Create Modern CSS3 Hover Effects

Slider with Sliding Backgrounds

CSS, How-Tos, jQuery | Posted by Keefr May 23rd, 2013

This one took me a little while to understand what the demo was really doing. It definitely is a nice little bit of polish and attention to details — making for a subtle, but nice effect in a slider gallery.

Funny enough, I like the little CSS-based gradient effect to make sure light text shows up on whatever background is utilized. I’ll actually utilize that a lot more than the tutorial as a whole.

Slider with Sliding Backgrounds