Cascading Style Sheets posts

CSS

Learning LESS: Mixins

We continue on our journey of Learning LESS today as we dig into an extremely powerful component of LESS: Mixins. If you haven't read our first two posts on the topic, check out Learning LESS: An Introduction and Learning LESS: Variables. Blog Series Roadmap ... An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action So let's introduce LESS Mixins, and showcase some of what you can do with them. What is a Mixin? ... A Mixin in LESS is basically...

Giving Users Offline Access with HTML5 Application Cache

Offline storage is one of the most anticipated features of HTML5. With users browsing to your pages and accessing your Web apps on various devices, often with limited connectivity, the Application Cache utility could prove to be a serious advantage. With HTML5 App Cache, you can instruct supporting browsers to cache copies of certain files. Once these files have been downloaded they will then be accessible offline. In this tutorial we will work through a simple example of caching a page, including...
CSS

Learning LESS: Variables

We continue on our journey of Learning LESS today as we dive in to the wonderful world of Variables. If you haven't read Learning LESS: An Introduction, be sure to read that first to cover some intro to this topic. Blog Series Roadmap ... An Introduction Using Variables Using Mixins Using Nested Rules Using Functions Divide and Conquer Put It Into Action So let's dive in to LESS Variables, and showcase some of what you can do with them. The Syntax ... The syntax for LESS is almost identical to CSS. And the...
CSS

Learning LESS: An Introduction

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...
CSS

Creating First Animations With CSS3 Using Keyframes

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...

Implementing Drag and Drop Functions with HTML5 and JavaScript

With HTML5 and JavaScript, you can implement native drag and drop functions within the Web browser. This is one of the emerging HTML5 tools that promises to make websites more interactive without relying on additional technologies such as Flash. In this tutorial we will create a simple page with images the user can drag and drop into designated areas. Create an HTML5 Web Page ... Create an HTML file for your drag and drop function. Use the following basic outline, with sections for JavaScript and CSS...

Coding Vendor Prefixes with JavaScript

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...
CSS

Developing a Responsive Website Part 4: Finishing The Homepage Portfolio Slider

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...
Load more
Home CSS Deals DesignBombs HTML HTML5 JavaScript jQuery Miscellaneous Mobile MySQL News PHP Resources Security Snippet Tools Tutorial Web Development Web Services WordPress