CSS3 Transforms

02/02/12

I’m sure many of you have heard of CSS3, the newest version of CSS that is still being actively developed. One of the most exciting parts of CSS3 is the new transforms module, which allows developers to animate and manipulate elements on the page without resorting to the use of javascript.

HTML Starter Template

01/19/12

Whenever we designers start a new HTML/CSS project, we have to create a new HTML file, open it, and write in some basic code to get started. Next, we create a reference to a stylesheet. We then have to open up the stylesheet and type in a basic CSS reset. Today, I’ll share with you my personal starter template.

Design Showcase for January

01/06/12

Every month here on design lunatic, I present a showcase of beautiful website designs for your inspiration. These websites are hand-picked out of the hundreds that I look at every month on my travels around the web. If you know of a website that is worth mention, or would like me to showcase your website, contact me using the contact form to the left.

Jquery Lavalamp Menu with Keyboard Control

12/28/11

Today, I will explain how to create a jquery lavalamp menu. However, this is more than just a simple lavalamp menu; it will also have keyboard navigation. Sound interesting? Let’s get started!

Design Showcase for December

12/08/11

Every month here on design lunatic, I present a show­case of beau­ti­ful web­site designs for your inspi­ra­tion. These web­sites are hand-picked out of the hun­dreds that I look at every month on my trav­els around the web.

Pros and Cons of Responsive Web Design

11/15/11

As I’m sure you all know, this amazing new thing is coming into use: media queries. These media queries allow the developer to specify which chunks of CSS code are applied to which situation. The layout will dynamically change depending on what size the browser viewport is. This allows the developer to optimize the layout for the display being used. In this post, I’ll talk about the pros and cons of media queries.

Design Showcase for November

11/01/11

Every month here on design lunatic, I present a show­case of beau­ti­ful web­site designs for your inspi­ra­tion. These web­sites are hand-picked out of the hun­dreds that I look at every month on my trav­els around the web.

Swipe Gestures With Jquery

10/25/11

In this tutorial, I will explain how to create swipe gestures in Jquery, and use these gestures to create a simple image gallery.

CSS3 Featured Posts Widget

10/20/11

A featured posts widget is a great thing to have at the top of your site, because it’s a wonderful way to add some interactivity to your site. And if this “featured posts widget” is done in CSS3… well, I don’t think it’s even necessary to say how awesome that is.

10 Great Free Fonts

10/15/11

Nowadays in web design, sticking to the default system fonts such as Arial, Times New Roman, and Verdana, is boring. Why? Because there are so many great fonts out there that are just waiting to be used in your next design. The following fonts are definitely among the best on the web.

Interesting Hover Effect With CSS3

10/11/11

In this tutorial, I’ll teach you how to create an impressive hover effect, which works great for when you have a box with text inside it. You’ll see what I mean in a moment.

CSS3 Image Gallery

10/07/11

Today, I’ll be showing how to make a CSS3 image gallery. That’s right, CSS3. I’ve said this before, and I’ll say it again: I love CSS3. So, the gallery has thumbnails that resize on hover, and a main image that changes depending on what thumbnail was clicked.

Design Showcase for October

10/03/11

Every month here on design lunatic, I present a showcase of beautiful website designs for your inspiration. These websites are hand-picked out of the hundreds that I look at every month on my travels around the web. If you know of a website that is worth mention, or would like me to showcase your website, contact me using the contact form to the left.

Great CSS3 Generators

09/29/11

CSS3 is an amazing new way to simplify site building. From rounded corners to easy gradients, CSS3 has you covered. In this post, I’ll share some of the best CSS3 generators out there right now.

CSS3 Sliding Boxes

09/25/11

I think CSS3 is amazing. With that thought in mind, I’ll explain how to create an interesting image hover effect that’s usually made in Javascript, in CSS3.

Create a Jquery “Slidebar”

09/21/11

Today, we’ll go over how to create an interesting navigation section that slides into the page when a link is clicked on. We’ll use HTML(surprisingly enough), Jquery, and a bit of CSS3 to spice things up.

“End” Classes in Grid Systems and How To Get Rid Of Them

09/17/11

In my opinion, grid systems are great. They provide an easy way to get started with your next project, and can simplify the developing process behind a site by a lot. However, there are some problems associated with them. Most of them are subject for a seperate post, but today, we’ll go over one of the big ones: the required classes that signify the first and last elements in a row of elements.

Important HTML5 Elements and How You Should Use Them

09/13/11

I’m sure all of you know about HTML5, the new HTML spec. With HTML5, you can make your site more SEO-friendly as well as easier to code and to style. Today, we’ll go over the new HTML5 elements specifically made to help with semantics.

CSS3 Drop Caps

09/09/11

Nowadays, typography is extremely popular in web design. There are many things that fall under the category “typography”, and today, we’ll be exploring one of those things: CSS drop caps. These can add some flair to a site, and can improve usability if used correctly.

Jquery Search

09/05/11

Usually, search forms are done with PHP. But why does this always have to be the case? Exactly, it doesn’t. Today, I will explain how to make a javascript search form.

Design Showcase for September

09/01/11

Every month here on design lunatic, I present a show­case of beau­ti­ful web­site designs for your inspi­ra­tion. These web­sites are hand-picked out of the hun­dreds that I look at every month on my trav­els around the web.

BluCSS

08/28/11

Well, I’m releasing an amazing new grid system today. It’s based on what I call the “rubber layout” system. There are 4 different layout types, and each one is optimized for different displays. There are also some starter styles. Check out the project page for more info.

Flash an element with CSS3

08/24/11

Have you ever been to a site where there are links pointing to different parts of the same page? Well, as you’ll find out in this post, there are some problems with this.

CSS3 Lightbox

08/20/11

Today, we are going to make a CSS3 lightbox. They can be a great tool, but please, don’t overuse them. I hate those sites where a lightbox pops up asking you to register, or buy one of their products. It can turn a perfectly fine site into a really annoying experience.

Design Lunatic Freebie: Content is King

08/16/11

Today, I’m releasing Design Lunatic’s first ever freebie: Content is King! It’s a minimalist wordpress theme, with a sticky sidebar and a nice background.

Web Apps Great for Web Developers and Designers

08/12/11

These apps are a great addition to any developer or designer’s toolbox.

CSS3 Accordion

08/08/11

Today, I will explain to you how to make another CSS3 version of a popular javascript widget. In this case, an accordion. You know, those things that unfold when when you click on a link. Follow along, and you will learn how to make a CSS3 accordion.

Isotope Tutorial

08/04/11

I’m sure many of you have heard of jQuery Masonry. It “Arranges elements vertically, positioning each element in the next open spot in the grid. The result minimizes vertical gaps between elements of varying height, just like a mason…

Design Showcase for August

08/01/11

Every month here on design lunatic, I present a show­case of beau­ti­ful web­site designs for your inspi­ra­tion. These web­sites are hand-picked out of the hun­dreds that I look at every month on my trav­els around the web.

Developing Native Web Apps

07/28/11

You make think that the title of this article is incorrect. Well, today, I will prove to you otherwise. There has been a raging debate for the past year or so: Native Apps or Web Apps? While many think that there are only two distinct possibilities to developing mobile apps, that’s not true. Today, I’ll show you how to make a native Android app using…

Jquery Sticky Sidebar

07/25/11

Today, I will be showing you guys how to make a simple jquery sticky sidebar script. So simple, as a matter of fact, that I made it into a plugin. The link is in the post.

Get Out There!

07/22/11

As web designers/developers, we generally tend to sit in front of our big 1980×1024 screens for most of the day. Now, this isn’t necessarily a bad thing thing, because it shows that we have a work drive and that we love our jobs. On the other hand, however, there are minuses to sitting in front of a computer all day.

Shaken Grid WordPress Theme Review

07/19/11

Today, I’ll be reviewing a wordpress theme called Shaken Grid, from Shaken and Stirred Themes. The theme is very nicely made, but it has some issues, as you will find out when you read the post.

Useful WordPress Plugins

07/16/11

Wordpress plugins allow Wordpress to accomplish some amazing things. From SEO to typography, there is probably a Wordpress plugin that allows you to accomplish what you need. Take a look at this list to find some great Wordpress plugins. I’m sure that you will use at least one of these.

CSS3 Tooltips

07/13/11

Today, I’m going to show you how to replicate something that is normally done with javascript: A tooltip. Every browser out there takes the title tag of an element and displays this, but sometimes, the default browser “tooltip” just isn’t…

CSS3 Text Columns

07/10/11

The CSS3 text column module allows web developers to make text have multiple columns, like in a newspaper. It can be useful when there are long lines of text, and you wish to make the text more legible.

It is…

Lake Tahoe

07/07/11

Today I was at Lake Tahoe,which is the reason I don’t have a full post today. However, to compensate for that, I have some great pictures…

CSS3 Media Queries

07/04/11

CSS3 media queries are extremely useful for adaptive layouts. Depending on the visitor’s screen size, aspect ratio, and many other things, you can serve different layouts. For example, if I wanted to target browser viewport sizes that are between 400px…

Design Showcase For July

07/01/11

Every month here on design lunatic, I present a showcase of beautiful website designs for your inspiration. These websites are hand-picked out of the hundreds that I look at every month on my travels around the web.

Create a Super-Simple Jquery Content Slider

06/28/11

Content sliders are generally a good thing. They minimize screen usage, and can show lots of content in one small space. Today, I will show you how to build a super-simple content slider, with the barest of styles.

We will…

Dynamically Load WordPress Posts with jQuery

06/25/11

Today, I will show you how to dynamically load wordpress posts with jQuery’s .load function. Dynamically loading posts has many advantages and disadvantages over simply linking to the post page. It makes the page more dynamic, and decreases the wait…

CSS-Only Tabs

06/22/11

In this post, we will learn to create a functional tabs interface with only css (and html). Not using javascript is extremely useful because if the user has an old browser that doesn’t support javascript, these tabs would still work.…

CSSWork – A CSS Development Framework

06/19/11

For the past few days, I’ve been toiling over a project of mine – CSSWork. The aim of this project was to create a simple CSS foundation for building websites. It includes a css reset, some simple styles, and a…

CSS3 Keyframe Animations

06/16/11

CSS3 keyframe animations attempt to add animation support to CSS, so that Javascript doesn’t have to be used anymore to animate elements. Unfortunately, the only desktop web browsers that can support this are webkit-based ones, and the mobile devices with…

Animated Top Panel with Jquery

06/13/11

In this tutorial, we will learn to make a sliding top panel that slides out when you click a special link. The logic behind this: We have a div with a fixed height at the very top of the page, with a margin-top equal to the negative of its height. We also have a link inside that panel with position set to absolute, and a margin-top. The link ends up sticking out of the panel. When the link is clicked, the margin-top of the panel changes from -500 to 0, which ends up in it being fully visible.

Beginning Jquery Animations

06/10/11

Recently, I wrote a post on David Martin’s blog DesignWoop.com. The post is basically an intro to animating HTML elements with jquery.
Link: Getting Started With jQuery Animations