When I look at the innovative web design/development techniques that are helping take websites to a new level, I see three things happening.
One, CMS systems are being used much more consistently, which is a great way to manage websites with a large number of pages, allow internal users to update only their area of the website and a great way to update the website without knowing code.
Two, Parallax animation features using jQuery, HTML5 and CSS has rapidly increased and we are now seeing website that are horizontally or vertically scrolling with the click of a button.
Three, more and more websites are being built with Responsive Design features that work equally well on every device.
While surfin’ the net last week, I came across a really well designed site.
It was simple—which I liked—but they had added some really subtle CSS effects.
That’s exactly what I thought of when I came across this CSS resource, Effeckt.css:
CodePen is a pretty cool instant preview, in-browser way to play with your code. It’s also a great place to find inspiration, collaborate and get noticed!
Just as I finished up putting together a new design for my personal website, I find this mess of awesome free responsive HTML5 CSS3 templates!
Take a look at these:
Transit provides some super-smooth CSS transitions and transformations for jQuery.
Simply include the script, and instead of using jQuery 1.4+ transition, use Transit’s animate.
And there’s a lot of different styles!
I’m not sure what kind of project this could be used for, especially since it works best with browsers using webkit (could we please adopt a standard and everyone comply!?!), but this Hyperspace generated with CSS3 is a whole lot of fun.
Check this out:
Mmmm. Another Bootstrap resource for your coding and designing pleasure.
Bootsnipp, as it’s called, is full of design elements and code snippets specially made for the Bootstrap HTML/CSS/JS framework. There are currently almost 70 up for grabs.
Here’s a closer look:
Finding just the right shade of color when you’re formulating your web design can be a pain sometimes. You might need a color just a little darker or lighter for your link values or whatever CSS element it might be.
Instead of opening Photoshop or other favorite design app, just jump over to this cool online color tool!
They finally did it.
If you like to dig into Google Fonts for your web development, it can be a little bit of a pain when you’re also trying to do graphic design with the same fonts. Sure, you can download them as needed and install them, but all-in-all, it’s a pain and once you install a font it’s not easy to keep up with updates.
If you’re a regular reader of ChurchMag, you’ll know that I’m the resident ‘Britisher’ on the author team.
Well, if you’ve ever wanted to add a bit of class and quality to your CSS – you can with the splendidly named ‘Spiffing CSS’.