Tag Archive: CSS3


Speed Up Your Website with CSS

With more customers using mobile to access your sites, it just makes sense to make sure you have blazing fast load times. Customers on mobile will click off after just 2 seconds if your site does not load.

One of the things you can do to have faster load times is to minimize the amount of JavaScript or jQuery used. So how do you balance the awesome effects leveraged with these tools against the needed load time? Use more CSS transitions and animations in your site.

CSS has really expanded the range of effects possible without additional load on end users. One very popular effect for responsive design is the slide out menu. This effect allows users to have instant access to the menu with one hand and no fumbling!

This excellent video courtesy of Codecourse shows how to create a great slide out menu with only CSS and HTML. No snippets, no JavaScript at all. This video rocks and will take you to the next level as a designer. And if you want a great mobile website with this effect, contact DKemp Designs, we’ll be happy to help.

DKemp DesignsGreat design requires commitment and continuous education on trends and techniques.  Alone, it is an impossible task to keep current and revelant in this business.  Fortunately, the Web Design community is the most generous industry ever.  There is no shortage of professionals and geeks sharing their answers on time saving techniques.  DKemp Designs uses many sites and tools to meet customer needs.

Techsnoop has rounded up some great free resources available;

Give n GoGive ‘n’ Go

A wonderful site with great resources like animated menus, CSS animations, glowing buttons, all reworked from shots on Dribble.com.  Copy the HTML, CSS, javascript and you’re ready to go!

SVGenerator

This site generates SVG background code to create effects without large background images.  There are subtle patterns, stripes, even gradients and a starfield.  So, select one you like and edit the settings and colors.  Then download the code and paste into your site.  Easy just got a new home.

CSS3 Animation Cheat Sheet

Looking to spice up your site with some fast loading animations?  This is the site for you.

Select the animation effect you want, download the code, add to your project and away you go.  There are helpful hints to incorporating the effects into your code and any jQuery needed is posted with instructions.

So now you can concentrate on designing the fun elements and animate away.

Just For Fun

If you have been pondering whether to use parallax in a project, check out Cyclemon a site with a great example of parallax effect being used well, with purpose and not annoying.  The site states you are what you ride and shows each type of cycle in a great graphic with catagories like “Night Rider” and “Hipster” among others.  If the graphics appeal to you, they are available for purchase.