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.
The faster something loads, the happier the user is. This is something it is important to understand when creating websites. Today, I’ll show how to use jQuery’s AJAX capabilities in conjunction with isotope.js to dynamically load content in once the user reaches the bottom of the page, which makes everything seem faster and improves the user experience.
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.
Sometimes, as web designers, we create a perfect design. Everything is exactly the way it should be, every pixel in the right spot, every color the right tinge. However, there is one thing that we often leave unchanged, and that is the scrollbar. Today, I’ll show how to create custom scrollbars using jQuery.
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.
Tooltips are a great way to display some information about an element on the page. Normally, these are used on links. In this post, I’ll explain how to create a jQuery script that allows for easy tooltips on a page.
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.
Media queries have proven to be extremely useful in responsive layouts. However, they do have a drawback: they can’t analyze the content on the page before deciding when to kick in. In this post, I’ll show how javascript can be used to make layouts even smarter and more adaptable.
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.
Isotope is great, but what if the user refreshes the page? Or decides that what the content was previously filtered by worked better, and presses the back button? Then, problems begin. Today’s post aims to solve that problem by using a plugin called jQuery hashchange event.
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.
Isotope.js is a powerful tool for creating dynamic webpages with interactive capabilities. It does this by using “filtering”, by which certain elements on the page are removed or added, depending on what the user requests. This by itself is incredibly useful, but it can be made even better, by using combination filters. This allows the user to select two criteria by which content is filtered. In this tutorial, I’ll show how to do just that.
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.
CSS3 offers many exciting new opportunities for web designers looking to spice up their webpages, but one of the most interesting ones are the 3D transforms. Objects on the page can be manipulated in 3D space. In this tutorial, we’ll make an image gallery that utilizes 3D transforms to make things a bit more interesting.
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.
In web design, the navigation bar is crucial in telling the user where he is located. Usually, the user is further helped out by highlighting the currently active menu item. Unfortunately, if the site uses Isotope.js, the user won’t know what is currently being displayed. In this post, I’ll show how that can be fixed so that the user can have an excellent experience even on a site using Isotope.
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.
Design Lunatic readers, here’s your chance to help this blog grow. Submit an idea, and the next Design Lunatic post might be about what you asked for.
Today, I’m launching an interesting jquery plugin named “elasticresize.js”. You can read the full description on the plugin homepage, but the basic point is this: imagine using media queries to make your layout responsive. Now take the awesomeness of those media queries and square it. That’s elasticresize.js.
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.
Today, I’ll be showing how to create an awesome CSS3 hover effect that is normally done with javascript. This one is particularly useful for masonry layouts and image galleries.
Today, I’ll be teaching you how to create a CSS3-only lavalamp menu. This menu will behave much like This jquery powered one, except for the keyboard control. Lavalamp menus are a unique way to add some creativity to your site, and if said menu is made with only CSS3 – that’s pretty cool.
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.
Today, I’ll show how to style checkboxes and radio buttons in web forms with CSS3. Nowadays in web design, almost everything can be controlled with only CSS. This tutorial will allow you to further customize your web pages.
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.
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.
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.
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.
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!
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.
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.
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.
In this tutorial, I will explain how to create swipe gestures in Jquery, and use these gestures to create a simple image gallery.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
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.
These apps are a great addition to any developer or designer’s toolbox.
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.
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…
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.
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…
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.
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.
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.
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.
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…
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…
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 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…
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.
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…
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…
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.…
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 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…
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.
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