Legacy Posts
Attention: These articles are old and the content is outdated. I've left the articles here for historical purposes.
Recently I've had to do this and I was unable to find something that could solve my problem online. I wanted to merge a WooCommerce Wordpress site into a very large Wordpress blog. It ended up being relatively simple to…
This is a simple article that covers how to install Sass and Compass for terminal/command prompt usage, not how to use it. If you're looking for the latter, check out this css-tricks screencast. Installing When running…
I originally posted this article on 15 September 2010. This is an updated version. This tutorial is for beginners. The method for creating the slider could be done differently, but I feel this way is more simple to…
inline-block is something I hadn't used until a couple of months ago. I was comfortable with block and inline elements so I didn't feel the need to learn anything more. I was also under the impression, as I'm sure many…
CSS animation is definitely the next big step in CSS. Absolutely amazing things can be done with this. It is literally up to your imagination, as you’ll come to realize if you don’t already understand how CSS animations…
A couple of months ago I wrote an article titled "How to horizontally center anything with CSS". The featured method of the article was to center an element with a dynamic width using display: table. This works…
is a really great property that can and should be used right now. There are some decent fallbacks which gets covered later on in the article. MDN is usually really great resource when it comes to documentation relating…
Edited: 07 January 2014 - Updated article to reflect current browser support. Gaussian blur is something I use a lot when it comes to Photoshop. It would be very handy to have that kind of 'filter' power within a browser…
This article is about why I feel SublimeText 2 is the best text editor ever and how/why I ended up using it. I've decided to write this because I seem to talk about this topic quite often and it would be easier for me to…
They don't and can't exist. Before I continue, let me explain what a 'bulletproof full page background' is. This is a solution that will always give the 'perfect' full page background-image across multiple viewports…
Styling lists with CSS can be a bit of a pain from time to time. If I require an kind of customized bullet, the first CSS property I think of is list-style: none;. I've tried on more than one occasion to use list-style…
I've always loved placeholder text for input fields. Not too long ago the only way to achieve this would be to create a special javascript function that enabled the desired functionality, but now it magically comes pre…
The above example is selecting all <li> elements and looping over them. It is then adding a class of 'item-' with its index value appended to it. The index begins at 0. The $(this) keyword references each iterated…
First thing is first, let me clarify what I mean by Create an Accordion with CSS3, HTML5 and jQuery. I am talking about creating 3 different accordions, one which relies heavily on CSS3, one with jQuery and one with HTML…
There is no such thing as a jQuery if / else statement. Shocking, isn't it? You might be thinking something like: "There must be! In fact, I'm 99% sure there is!". It doesn't exist. This is because jQuery is JavaScript…
Note: Check out the demo before reading. I've been working on CSS lightsabers lately. I remember seeing one a while back and liking the concept, however I thought it could be greatly improved. I've also been itching to…
If you haven't noticed the new design, you're either new to CSS-Plus or you have hit ctrl / cmd + r in a while. I've been talking about a redesign for longer than I'd like but it's finally here, however it's not 10…
:first-child is a CSS selector that has been around since the CSS 2.1 spec. It is extremely useful and can be used effectively in various ways. :last-child has finally made an appearance in CSS 3. One would think that…
PlusAnchor is a jQuery plugin I've just created. At the moment it solves a simple and specific problem: Anchor links cause the browser scroll to the destination instead of merely jumping there. Download
Note: The original post was published March 19 2010. The original article's CSS3 emulator of choice was CurvyCorners When someone uses the words "rounded corners" and "IE" in the same paragraph, rest assured a puppy has…
Last year Chris Coyier posted an article titled "May is Maintenance Month". Chris' idea was to rewrite older articles to keep the resource (his website) up to date. I didn't join him in doing so last year — mostly…
The days of using javascript lightboxes are over! Just kidding,javascript lightboxes remain a much more efficient and cross-browser friendly way of doing achieving the lightbox effect. This CSS3 lightbox tutorial is for…
All too often images are given borders, drop-shadows, rotated slightly, etc via photoshop or some image editing program. This is not only undesirable since CSS should be taking care of the layout, but it is very…
I've been working on PlusSlider and I've finally finished Version 1 as promised. The two features I'm most proud of: The ability to swap between fading & sliding seamlessly Extremely easy to use Compatibility I've tested…
I think the title says it all, I'm taking a short and much needed break, but first a quick recap... P.S. You can still catch my one liners on twitter.
It's good to know and keep up with the latest CSS tricks, especially with all the latest browsers on the verge of coming out. In this tutorial, I'm going to create a navigation menu that relies heavily on CSS3. The…
I've been meaning to do this tutorial for a while now and it seems as if I'm finally getting around to it! Very simply put, this will function like a normal internal anchor link or named anchor link, but will scroll to…
I've been creating and working with sliders a lot lately and there have been a few things that have bugged me about them, the main ones are: Image-only sliders Sliders (Carousels) fade, but don't slide or vice-versa…
There two kinds of display elements we work with most of the time, and they are inline-level elements and block-level elements. By default, elements such as <span> and <a> are examples of inline elements whereas <h1>, <h…
I've created quite a few jQuery components before, and I continue to do so every day. This forces me to find best practices and short-cuts to cut down development time, keep things simple and cross browser compatible…
Before I even get started, the word "Solid" in the title implies that the HTML should work on pretty much all mobile phones. So no fancy smart-phone tricks, just a few good old wholesome HTML and CSS tips. Use an…
What is 'The Best of CSS-Plus'? It's the beginning of a possible series about some of my CSS tips and tricks. I wouldn't say I have many CSS tricks, but I do have a few practical cross-browser-compatible CSS methods I…
Timers are useful things to have in your javascript toolbox of tricks. Common examples of looped timers are carousel plugins. These normally have a couple of options, and often one of them is to have the carousel window…
You might notice that one or two things look a bit out of place – This is probably because they are! I’m going to be adding new features to the site, such as a Request page, where you can request tutorials, freebies or…
This article isn't about CSS selectors that you should be using and you don't know it yet... It's about CSS selectors you might not know about because 1 or 2 popular browsers don't support them. Basic CSS selectors are…
Functions save you time - And if you didn't know that, you should probably get on the function band wagon. Functions are shortcuts. They: Save you time Save you the hassle of rewriting code you have already typed Make it…
The name of the tutorial might be a bit confusing, so I'll start by clearing it up. Infinite - Refers to the fact that if you click the "next button" on the last slide, it loops to the first image, and vice-versa with…
Everyone needs to create a form at one point or another and I've got a few rules I generally stick to when designing and developing forms in general. Before we get started on actually coding the form, let's recap on the…
The biggest problem with javascript is that we can't completely rely on it. It can easily be disabled, and once this happens, websites should still function correctly. Javascript powered sub-navigation menus are a big…
Most websites nowadays have a search form somewhere. I'm pretty sure I don't need to explain why it's a good idea to have a 'search' functionality built into a website and most Content Management Systems already come…
This is probably one of the coolest CSS3 features, along with box-shadow and border-radius. @font-face was introduced in CSS2 by IE and it has been around since IE 5. Most browsers have the ability to use or fonts…
I've been meaning to create an image caption for a while now and instead of putting it off I just decided to do it. This image caption is not a plugin - It merely allows you to understand how a jQuery image caption would…
I have been trying to find an easy, efficient way of applying a Gaussian blur effect to images and elements. I would usually achieve this by creating the image with the Gaussian Blur effect already applied. I wouldn't…
Recently I created a tutorial named How to write a simple jQuery plugin. It is necessary to go through that tutorial if you have no idea how to create a simple jQuery plugin. This tutorial will teach you how to create…
IE is a pretty bad browser. It used to be the go-to browser, but now it would be an extreme understatement to say "it is no longer the go-to browser." IE9 is probably going to be a pretty decent browser, but this article…
There are a couple of ways to create tooltips, but I decided that I wanted to try and create a very lightweight and good looking tooltip without using any images. Alright, time to get started. The HTML This tooltip is…
I avoided learning how to create a jQuery plugin for quite a while because I thought it would be too difficult and/or too complicated to learn since I'm not a 'hardcore' programmer. Contrary to what I thought, it is…
CSS shorthand properties make your CSS file look cleaner, easier to edit, easier to type and it reduces the total file size. The above image "CSS Shorthand - Saving you money every day" is a play on "saving you time…
Recently, someone asked me how they would go about creating a "fading border". I can't recall ever seeing one, so I decided to create this tutorial. What exactly is a 'fading border with opacity focus'? At first I…
Achieving Internet Explorer (IE) opacity is a bit of an annoyance, no matter how you would like to achieve it. The most common way of doing this is to set a .png file as the background of an HTML element. Unfortunately…
Browser detection is evil, but sometimes a necessary evil. In a perfect world, we would create a webpage that looks the same in every browser without browser detection or any other troubles; This is exactly what web…
Haven't you ever just wanted a yoyo on your webpage? A beautiful, animated, spinning yoyo that slides down like a real yoyo would? I know I have never even thought of it and I probably would never have the need for it…
I have already done the Fading Navigation Menu tutorial, however it is a bit advanced for a beginner. This simple navigation menu tutorial will help you create a very basic horizontal navigation menu using semantic HTML…
I like doing things in an organised fashion, and I'm sure most of you do to. I write my CSS, HTML and jQuery in a certain way which I don't change, unless I decide I've found a more efficient way of doing it. For example…
1. The file is not there or does not exist People tend to become upset and/or frustrated (Including me) when something simple doesn't work, such as jQuery not working. Before you do anything, navigate to your jQuery file…
As we all know too well, IE6 has many issues, one of which is the IE6 height problem. The outdated browser reads the CSS differently to the modern browsers, and it places emphasis on things that aren't too important. Use…
The pseudo-class is a very important CSS function. It can be used to highlight text, table-cells, divs, images and much more. Without it websites would be very bland and boring. Unfortunately, there is an IE6 hover…
The effect and the attribute are very useful jQuery tools. I will show you how to quickly implement this into your website and perhaps give you ideas on how you can add this to your already existing websites. Step…
For my first tutorial, I have decided on building a simple, yet awesome navigation menu using CSS sprites. After we are done with this I will add a bit of jquery code to give it a visually appealing fade effect. I have…
Hi everyone. This is my first article on css-plus.com. I am going to be fine tuning a few things before I start on the awesome tutorials, articles and freebies. I'm pretty excited to get things going. Come back and check…