Index - Articles - DMXzone.COM

CSS

Animating Buttons with CSS3

Many of the emerging techniques in CSS3 are particularly well suited to interactive Web page elements such as buttons. In this tutorial Sue Smith will explore using CSS3 properties including transforms, transitions, box shadows, backgrounds and rounded corners. She will be working with an anchor element, animating the button when it is in hover state. Most modern browsers support the bulk of the properties she will be using, but users with non-supporting browsers will still be able to see and interact with the button.

Ivo Rangelov

1430

CSS

Learning LESS: Divide and Conquer

Alex Ball is getting to the end of his Learning LESS series, and this is one of the posts he is most excited about. One of the best features of LESS is how modular and organized your code can be, and how it doesn’t add much weight or calls to your live sites (if you compile locally with LESS.app, CodeKit or some other compiler). If you haven’t read the first four posts on the topic, check out the variables, mixins, nested rules and using Functions posts.

Ivo Rangelov

1561

CSS

Circle Hover Effects with CSS Transitions

In this tutorial Mary Lou will experiment with hover effects on circles. Since she have the border radius property, she can create circular shapes and they have been appearing more often as design elements in websites. One use that she especially enjoy seeing is the circular thumbnail which just looks so much more interesting than the usual rectangular. And because the circle is such a special shape, she is going to create some special hover effects for it!

Ivo Rangelov

6764

CSS

3D Flipping Circle with CSS3 and jQuery

Mary Lou would like to show you how to create a little component with a realistic touch. Maybe you have created these kind of paper effects when you were a kid; basically something opens or rotates when pulling or pushing some handle. She’ll create a circle with a handle which will open once the little handle is clicked, creating a realistic 3D flipping effect with the help of CSS 3D transforms and shadows/gradients.

Ivo Rangelov

2101

CSS

Learning LESS: Using Functions

Alex Ball continues on his journey of Learning LESS as he take a look at Nested Rules in LESS, which will help you write extremely clean code. Time to get our hands dirty in some LESS functions, which will likely blow your mind that it can be done in CSS. If you haven’t read the first three posts on the topic, check out the variables, mixins and nested rules posts.

Ivo Rangelov

1621

CSS

Creating a Radio Toggle in CSS3

A toggle slider presents the user two states that are mutually exclusive. Those states can be on or off for example. On the right side of the screen, it shows a horizontal strip with a controller, the toggle slider. The title and the current state are found on the left side of the toggle. You’ll often find yourself using toggle sliders as a trendy alternative to checkboxes. Today Sebastian Sandqvist will be creating one using plain CSS3 and HTML.

Ivo Rangelov

1273

CSS

Learning LESS: Nested Rules

Alex Ball continues on his journey of Learning LESS as he takes a look at Nested Rules in LESS, which will help you write extremely clean code. Now he jumps into Nested Rules, a topic that can be somewhat difficult to conceptualize, but Alex Ball will break it down with great code examples and some diagrams. If you haven’t read the first two posts on the topic, check out Learning LESS: Variables and Learning LESS: Mixins.

Ivo Rangelov

1755

CSS

Image Tagging Using jQuery and CSS

There is a popular saying that a picture is worth a thousand words. Images are a great way of catching our attention instantly. But sometimes its necessary to tag or link specific parts of images to provide information. Popular social media giants like Facebook and Google Plus use image tagging to identify the people and places in images. In this tutorial Rakhitha Nimesh is going to show you how to create a simple image tagging system using jQuery and CSS.

Ivo Rangelov

3648

CSS

Perfectly Rotate and Mask Thumbnails With CSS3

Image galleries with rotated thumbnails are somewhat infrequent, but it’s a simple trick to add style to your webpage. However, if not done right, achieving and maintaining this effect can sometimes prove to be a major hassle! To properly achieve this effect, your first thoughts might turn to creating rotated thumbnails in Photoshop. However, this can prove to be difficult in the long term.

Ivo Rangelov

1792

CSS

Learning LESS: Mixins

Alex Ball continues on his journey of Learning LESS, as he digs into an extremely powerful component of LESS: Mixins. A Mixin in LESS is basically a common group of CSS properties grouped into one, which can then be inserted into various other LESS selectors. You can think of it like a variable, with several different properties. If you haven’t read the first post on the topic, check out Learning LESS: Variables.

Ivo Rangelov

1551

Explore the Articles