With Halloween just a few days away, this seems like the perfect time to explain how to create an incredibly simple ghost button, in pure CSS. These buttons are referred to as ghost buttons because they have just an outline and let whatever is behind them show through. They’re incredibly popular with startups, because they have a minimal simplicity that fits that style of site. They’re also super easy to make, and can add real impact with just a few lines of CSS. To build one, the first thing you need...
One of the biggest headaches you’re likely to encounter as a developer is cramming a designer’s gigantic menu onto a mobile screen. There are options open to you: you could repurpose the menu for mobile, you could compact it with JavaScript, you could even reposition it with CSS. But thanks to the amazing jQuery community, you probably don’t need to. There are dozens of jQuery mobile navigation solutions available, all of which have been designed to solve the problem of menus that don’t fit...
In CSS3 we have two ways of creating animations: We have CSS Transitions that allow us to create some simple effects for things like hover; and we also have CSS Animations for more complicated effects. We can in fact create pretty much any animation we want using pure CSS and since it works with keyframes it uses a system we are already used to seeing in software like After Effects and Flash. In this article I'll get you through the basics of animating with vanilla CSS. Browser support ... CSS Animations...
CSS has developed exponentially in a relatively short time. From a language that began with simple style choices, we’ve developed a sophisticated way of laying out content. CSS3 has tons of amazing features, and one of the key aspects is the ability to modify an element using CSS Transforms. Browser support ... Browser support for transforms is actually fairly extensive; 2D transforms are supported by all major browsers, including IE9 and above; 3D transforms are supported by all modern...
In the first part of this tutorial we created a very simple jQuery plugin, but the main problem with what we created was that the user didn't have any control over how the tooltip would appear, and in this second part we will create the necessary code to allow the user to change the defaults and replace them with their styles. Creating our options ... The first thing we need to do to allow the user to pass their own styles when calling the plugin is change the code we use to name the plugin, our code was: $.fn.tooltipMe...
Creating your first jQuery plugin means that you’re no longer a beginner. You can now create something that you can use over and over again, or even package and sell to other developers. It may seem hard, but in reality creating a jQuery plugin is actually a simple process. In this article I’ll show you how simple by creating a simple tooltip plugin. The markup ... Any jQuery plugin requires some kind of markup and in our case all the plugin will need to be able to run properly is an anchor tag that...
We’re creating more and more demanding websites, with more and more assets. Now more than ever we need to make our sites blazing fast on desktop and on mobile. Fortunately there are some simple steps that we can take to achieve this… 1) Optimize images ... This may seem obvious, but it’s surprising how many people fail to optimize their images. What’s more, there’s a huge difference between using a medium sized image, and a fully optimized image. Image optimization doesn’t just reduce the...
Welcome, friends, to your first lesson in version control. This article is entirely for non-expert-programmers. If you’re already an expert, this article isn't for you. Shoo. For those programmers who don’t already know it all, readable information can be hard to come by. Most of the things I've read about version control systems like Git and Subversion are written in harshly-accented programmerese. This is my attempt to simplify the concept in plain English for those of us who are just getting...