Archive for the ‘CSS’ Category

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

CSS Idea: /*autoprefix*/

Browsers, CSS | Posted by Keefr May 22nd, 2013

Love this idea from David Walsh. Prefixes are the bane of CSS, and I love the idea of the web browser becoming the processor for CSS properties that it knows need prefixing.

The one complexity comes in with prefixes that change the syntax within the properties. This may be a case that only applies to older versions of IE (examples I’m thinking of are all old IE browsers). But auto prefixing would old help with new browsers going forward, unless I’m misunderstanding.

Autoprefix for older browsers would have to have a JS framework to work for older versions of browsers. Beyond that, I’m not seeing any reason why browsers going forward couldn’t and shouldn’t auto prefix.

CSS Idea: /*autoprefix*/

Paul Irish on Chrome Moving to Blink

Browsers, Chrome, CSS, WebKit | Posted by Keefr May 17th, 2013

Yay, no prefixes in the CSS! They seem pretty adamant about it. I really hope it works out well and becomes the standard to you know… use the standards.

Paul Irish on Chrome Moving to Blink

Curving Text Using CSS / jQuery

CSS, jQuery, Responsive Design | Posted by Keefr May 16th, 2013

Ah, isn’t it cool to see how far we’ve come? While there are still a fair amount of restrictions and browser compatibility, there are some cool things that can be done by combining some CSS with good ol’ jQuery.

Check this jQuery plugin out that allows a simple way to have curved text that’s actual text — and not a graphical representation of text. Love it — as long as it’s used sparingly and appropriately.

How to Curve Your Text Using CSS3 and jQuery – Arctext.js Responsive jQuery Plugin

CSSMatic – CSS Tools for Web Designers

CSS | Posted by Keefr May 6th, 2013

This site touts itself as the ultimate CSS tools for web designers. I’m not sure it’s the ultimate, but the gradient generator, border radius and box shadow tools are nice for some quick CSS code when you’re mocking up or building a site.

CSSMatic – CSS Tools for Web Designers

Hyperspace – CSS Style

CSS, Web Development | Posted by Keefr May 3rd, 2013

This is pretty impressive — what a modern browser and just a bit of CSS (lots of transforms and some animation), HTML and a single image can do.

Hyperspace – CSS Style

Using Tabindex with :Focus

CSS, Web Development | Posted by Keefr May 2nd, 2013

I’m embarrassedly inept with some of this accessibility stuff. Interesting read.

Using Tabindex with :Focus

shame.css – Putting All Your Hacktastic CSS in One File

CSS | Posted by Keefr May 1st, 2013

Been meaning to post this for awhile.

This is an interesting idea — not sure I’m on board with adding an http request just to motivate change down the road. That being said, it’s a neat concept, and possibly a good motivator.

shame.css – Putting All Your Hacktastic CSS in One File

Magic Numbers in CSS

CSS | Posted by Keefr April 25th, 2013

Interesting article on magic numbers in your cascading style sheets. I had no idea what magic numbers referred to, but know the concept well.

Magic Numbers in CSS

Helium – Utility For Discovering Unused CSS

CSS | Posted by Keefr April 19th, 2013

I’m really surprised I’ve never posted about this utility on Keefr.com, and even more surprised I haven’t used it on a project. Need to use this soon.

Helium -Utility For Discovering Unused CSS