Index - Articles - DMXzone.COM

CSS

CSS Sprite Sheets

Using CSS sprites, instead of a collection of smaller individual images, will improve your web pages’ performance and keep things more organized. Let’s take a look at some best practices and some helpful tools for your sprite-making workflow. The name sprite might remind you of gaming sprites; retro console games and even browser-based games these days and in CSS terms the role sprites play is more or less the same. A sprite is one large file containing multiple images for your website, saving loading time and web space.

Ivo Rangelov

2918

Photoshop

Create a Candy Flavored Text Effect in Photoshop

Photoshop is the leading digital image editing application for the Internet, print, and other new media disciplines. In this quick tip tutorial Enrique Elicabe will explain how to create a candy cane-style text effect in Photoshop. Let’s get started!

Ivo Rangelov

2585

CSS

Practical Tips For Using LESS

There is a fair amount of subjective advice in this article. Many things that Daniel Pataki will be discussing have to do with methodology as opposed to rules and regulations of a language. Variables, mixins, functions and the nesting in LESS should all be familiar and you should have at least some hands on knowledge of LESS. He will show you how he organizes files and create mixins, but there could be other, better, ways of doing things.

Ivo Rangelov

1493

Tips & Tricks

Faster HTML/CSS Workflow with Chrome

Chrome has fast become a popular choice amongst web designers and users for its speed, ease of use and support for adopting early experimental features such as modern CSS3 properties. One of the reasons for its popularity amongst web designers and developers is the developer tools which bundle with the browser. Under the hood, Chrome Developer Tools is a web application that is written in HTML, JavaScript and CSS. The app is triggered at Javascript runtime. Once triggered it allows you to interact with web pages and play around with them. In this article Aaron Lumsden is going to be looking specifically at how these tools can help speed up your HTML and CSS workflow.

Ivo Rangelov

1815

Manuals

HTML5 3D Flipping Gallery Manual

HTML5 3D Flipping Gallery is the perfect solution if you are looking for to create a polaroid-like image gallery. It features CSS 3D transforms for native 3D in browsers that support the new CSS properties. You can drag your images all over the screen, give them titles and add descriptions. This and a lot more you'll find in this article, explained in tutorials and videos.

Lubov Cholakova

2473

CSS

Create Faster Fluid Layouts With LESS

Every new web technology or school of thought comes with a learning curve, but responsive web design is based in familiar territory – CSS. Luckily for you there’s some new kids in town with some new toys to help you out. CSS preprocessors such as LESS and SASS are taking a front seat and showing that there is room for a more dynamic stylesheet language. Variables, mixins and functions are now available to Paul Mist and, as the web becomes a more fluid and device-agnostic place, he couldn’t be in better company. In this tutorial he's going to show you some of the basics of the LESS dynamic stylesheet language and finally, how you can harness some of its greater potential into speeding up the creation of fluid layouts.

Ivo Rangelov

1964

Usability

Responsive Web Design Sketch Sheets

There are several well argued articles that champion the browser as the only place where the behaviour of adaptive/responsive layouts can be accurately described. This may well be true, but James Brocklehurst would still advocate starting the whole design process with sketches on paper. Put simply, using a pencil to think visually has an immediacy that is clouded once software interfaces and html/css are introduced — these should come later, after the initial design concept has been formed. But paper is static, responsive designs change according to display context. So how can you use the former to describe the latter?

Ivo Rangelov

1889

Usability

Optimizing The Design Workflow With Extensions

Ashish Bogawat has been using Adobe Fireworks for over a decade now and he recommends it to anyone searching for the optimal screen design workflow. Much has been said about Fireworks capabilities as a design application, but today he wants to focus on one of its other biggest strengths — its extensibility. As a platform, Fireworks gives its users a lot of freedom, when it comes to extending it. Because of that, Fireworks has a thriving ecosystem of add-ons (extensions) that add a lot of valuable functionality with newer options. In this article, Ashish Bogawat will try to list some of his top extensions for Fireworks.

Ivo Rangelov

1384

Usability

How to Create a Set of Dark Check Buttons

In this little quick tip you will learn how to create a simple set of dark check button. First, Andrei Marius will create a small rounded rectangle using a simple rectangle and the Rounded Corners effect. Next, using some Pathfinder and alignment options along with a bunch of basic effects he’ll add the extra details and the check sign shape. Finally, he’ll use some new effects for the different types of buttons.

Ivo Rangelov

1161

CSS

Unfolding 3D Thumbnails Concept

Mary Lou wants to share a little 3D concept for an image slideshow (or similar) with you. The idea is to reveal thumbnails using a neat effect: the current image will be opened in the middle and the thumbnails view will unfold in 3D. 3D is absolutely in right now. With CSS 3D transforms she can explore new ways of playing with space and create depth and realism to normally flat elements.

Ivo Rangelov

1902

Explore the Articles