Articles > CSS

CSS

Clever Problem Solving Techniques for CSS

With the launch of HTML5 and CSS3 came new ways and techniques of using these advanced tools to resolve development challenges in clever ways. CSS3 can be implemented on websites to improve the browsing experience for users as well as help in quickly creating effects or functionality that for a long time required hours of labor for web developers. Below are clever ways to leverage CSS3 for Web developers: Responsive Images ... Responsive web design allows a design to scale perfectly based on the context....
CSS

How to Make Smooth Transitions with CSS3

In the past, the W3C debated whether page transitions belong in our CSS stylesheets, under the domain of web designers, or in our code, under the domain of web developers.  After much lobbying by both designers and developers, they created a working draft for transitions. Once this specification is officially adopted, CSS3 Transitions will become a standard tool in web browsers. Until that time, we had to rely on vendor prefixes for this feature. NOTE: IE9 does not support the CSS3 Transitions...
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

Creating Bulletproof Email Buttons

Regardless of the social media networks that are popular at the time, email marketing will always be the number one way for a company or organization to connect with customers or clients. But, the average internet user has 2.3 email addresses and sends and receives an average of 112 emails a day. So what does that mean? That means your emails need to be clean, lean and quick to digest. With that in mind, I'm going to show you a great button replacement technique that will limit the number of images your email...
CSS

Transforming Elements in 3D Using CSS3

With CSS3, you can apply animated effects on Web page elements in 3D as well as 2D. In this tutorial we will go through the basics of rotating in 3 dimensions and will combine these transforms with the scale and translate transforms for more complex results. We will also add a basic level of interaction to animate the effects as the user interacts with the page. Create a Page with an Image Element ... Create a basic page with a CSS section in the head area, as follows: <!DOCTYPE html> <html> <head>...
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...
CSS

Implementing Drop-Down Menus with CSS3

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