Today, I'm proud to start a series of posts that will focus on LESS, the dynamic language that takes your CSS and puts it on steroids. LESS let's you use variables, mixins, nested rules, and even functions within your CSS. It's extremely powerful and can dramatically speed up your development. There is a little bit of a learning curve to it, but once you wrap your head around it, you won't type CSS again without using LESS. Blog Series Roadmap ... An Introduction Using Variables Using Mixins Using Nested...
One of the main reasons the emergence of CSS3 has been so hotly anticipated is the fact that, in combination with HTML5, it will pose a genuine alternative to technologies such as Flash. With CSS3 and HTML5, you will ultimately be able to create animated, interactive multimedia applications that will be accessible to users regardless of whether Flash is supported in their environment - great news if you're developing Web apps for iOS or for mobile users in general. In this tutorial we will create a simple...
CSS3 allows developers to implement a variety of visual and interactive functions most of us would previously have turned to JavaScript for. In this tutorial we will implement a drop-down menu, with background images featuring a gradient and rounded corners, all defined purely in CSS3 code. Our list will be structured using embedded lists in the HTML code, with top-level menu options appearing above their sub-menus, which we will display when users hover the mouse over the top level item. Here is...
Anyone who has played, watched friends play, or briefly saw video games that were released in the 80’s and 90’s is familiar with parallax scrolling. Think of games like Mario Bros, Streets of Rage, Kung Fu, Turtles in Time, or the original parallax scrolling game, Moon Patrol. Parallax scrolling is when there are multiple layers of images all moving at different speeds, causing a 2D image to have a 3D-like effect. Why am I talking about retro video games on a web development site? Well, the simple...
Savvy web developers often use vendor prefixes to try out the latest browser styles before the styles have been approved by the W3C and turned into a standard. By specifying a browser or vendor prefix within your CSS stylesheet or style property within a JavaScript function, you can gain control of how an element will render within a specific browser (Chrome, Firefox, IE, etc.). This gets you access to these browser’s newest and coolest styles and elements. This article will illustrate how to...
This week we're going to finish up the portfolio slider on our homepage that we have already started. At this point, if you view your index.php file and scroll down to the secondary screen it should look something like this. We’re close, all we have to do now is plug in our jQuery elements and then add some CSS to make our secondary portfolio slider screen responsive. Go ahead and download the Java files you'll need from here, keep the js directory in your root folder and check out what out the image below...
With CSS3, developers and designers can utilize an enhanced range of options for Web page backgrounds. New options include the ability to use multiple background images, to specify size properties for background images, and to define background origin and clipping in terms of the CSS box model. In this tutorial we will work through various options using these new techniques, demonstrating the CSS syntax for each one. Create a Page ... Create a Web page with a single element and an area for your CSS declarations...
Google Analtyics gives so much data that sometimes it becomes hard to digest. For larger sites it is easy to become so overwhelmed that you can't find the time to look up the analtyics for each page. Or maybe you have many editors for a site who don't have access to your Google Analtyics account and you want to provide them with data so they can see how well their pages are performing. With the Google Analytics API we can easily display some basic analytics right in each page. Google offers many libraries...