Index - Articles - DMXzone.COM

CSS

3D Restaurant Menu Concept

Applying CSS 3D transforms to components can bring some more realism to normally flat web elements. Mary Lou has experimented with some simple concepts for restaurant websites and came up with a 3D folded menu (a real menu, not a “web” menu). The result is a restaurant website template where the menu will open by unfolding. Clicking the linked items will reveal a modal overlay which contains some more info. Since this flyer structure requires a decent amount of space, and, although she will make this responsive, she’ll add a media query for smaller screens where everything will fall back to a simplified stacked structure. The same will be applied for browsers that don’t support 3D transforms.

Ivo Rangelov

2267

CSS

Swishy CSS3 Navigation

CSS3 offers so many possibilities to create cool rollovers on website menus. Here’s a simple way to spice up your navigation with just a sprinkle of CSS magic. This technique takes your typical list based navigation and adds a nice rollover effect. Obviously this is only visible on modern browsers, but it fails very gracefully for the others. Dan Voyce explains how he created this effect.

Ivo Rangelov

1691

CSS

Button Switches with Checkboxes and CSS3 Fanciness

For a while now, Hugo Giraudel is having fun with the new CSS properties (CSS3). It’s an incredible playground for creativity and cleverness. He particularly enjoy designing and creating UI elements like buttons, switches, toggles and such. That’s the focus of this tutorial, he will show you how to create button switches with CSS only, without a line of JavaScript.

Ivo Rangelov

2353

CSS

Design Product Page with CSS Background Attachments

Rakhitha Nimesh is going to show you how to create a product page for your website with awesome CSS effects. He will be using CSS background attachments and jQuery to create these effects. There are 2 commonly used techniques using this effect. First method is creating the before and after effect of an image. He is going to create the second method which will change the product’ as he scrolls down.

Ivo Rangelov

1485

CSS

Sticky Menus Are Quicker To Navigate

Most designers would agree that navigation is one of the most critical components of a website. Despite this, it is not always easy to use or access. Traditionally, users must scroll back to the top of the website to access the navigation menu. Hyrum Denney recently wondered whether sticky menus makes websites quicker to navigate, and he conducted a usability study to find the answer.

Ivo Rangelov

2162

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

2892

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

1466

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

1935

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

1870

CSS

Learning LESS: Put It Into Action

Alex Ball is finishing his Learning LESS series as he talks about putting your LESS into action on your web projects. This post will be slightly different than previous posts, as he won’t really showcase new techniques and code examples as much as he’ll talk about how to use LESS, projects you can work on to jump start your LESS development and more. If you haven’t read the first five posts on the topic, check out the Variables, Mixins, Nested Rules, Using Functions and Divide and Conquer.

Ivo Rangelov

1297

Explore the Articles