Index - Articles - DMXzone.COM

CSS

How to Create a CSS Drop Down Menu

It used to be that if you wanted to create a drop down menu then you needed to use a lot of background images as well as complicated Javascript. Today however all of that is a thing from the past. In this tutorial the DeveloperDrive Team will create a simple yet very effective drop down menu using only CSS. They will build their drop down menu in two steps, first they will construct a simple menu using HTML and then add the styling with CSS. They will create this drop down menu by using the <nav> element, as well as the display:block, and use the position element in order to position the menu.

Ivo Rangelov

4711

CSS

How to Create a Sticky Note Using CSS

In this tutorial, you will learn how to create a sticky note for your website. The effect is built of five simple steps, the first step simply adds the text you want to use, as well as creating the square that in essence becomes the sticky note. Step two focuses on the getting the font right as well as adding a drop shadow effect. Step three focuses on tilting the notes so they don’t look as boring as if they were all lined up. The fourth step allows the sticky notes to zoom when you move your mouse over them. The fifth and final step adds a smooth effect and allows you to change the colors of the sticky notes.

Ivo Rangelov

5714

CSS

Getting CSS Animations to Trigger at the Right Time

When Karl Schellenberg redeveloped his new website, he decided to use CSS3 animations to provide an impressive and interactive site experience. However, he struggled to time the animations to trigger at the right time. Because animated elements below the fold (depending on the screen resolution) animate on page load, some animations had already played before the user had chance to scroll to them.

Ivo Rangelov

2748

CSS

Create Realistic 3D Image Gallery Room

Mary Lou wants to share another 3D experiment with you: a gallery room in 3D. The idea is to create a realistic environment for an image exposition using CSS 3D transforms. Images are hanged along a wall which will have an end. Once the end of the wall is reached, a rotation will happen and you’ll be turned to the next wall with more images. To give a real sensation of being in a room, she only have four walls and corners. Each image will have a little description tag with a small-sized font and when clicking on it, a larger version will appear from below.

Ivo Rangelov

2289

CSS

Click Events With CSS

One thing Hugo Giraudel has always been missing is the possibility to handle click events with CSS. Actually, some people think you shouldn’t have this option since interactions are more like a JavaScript kind of stuff. He understands the idea, but it always bothered him to have to use JavaScript for a very simple click event. Anyway, as of today, CSS doesn’t provide any official way to handle a click event in CSS. But there are some very interesting tricks that he can use to detect a click using CSS only, without a single line of JavaScript, and this is what he is going to talk about today.

Ivo Rangelov

1960

CSS

Sneak Peek Into The Future: Selectors, Level 4

The buzzword CSS4 came out of nowhere, just as Andrzej Mazur was getting used to the fact that CSS3 is here and will stick around for some time. Browser vendors are working hard to implement the latest features, and front-end developers are creating more and more tools to be able to work with the style sheets more effectively. But now, on hearing about CSS4, you might ask, Hey, what about CSS3? Is it over already?

Ivo Rangelov

1627

CSS

Build a Basic Responsive Site with CSS

Everyone’s talking about responsive web design. But does everyone understand what it’s for? Jason Michael is not sure. Many web designers and developers seem to him to have misunderstood the problem it’s trying to solve. Put simply, it’s not about making sites for mobile devices, it’s about adapting layouts to viewport sizes. In this tutorial he’ll look at the principles behind responsive web design in detail, so you’re sure to understand the concepts correctly. Once Jason Michael has got that out of the way, he’ll walk you through building a website that scales perfectly on both large and small screens.

Ivo Rangelov

2970

CSS

Building Icons With a Single HTML Element

With the arrival of ultra high definition screens (think Retina) new design challenges have arisen; you need to find ways to accommodate all devices. Take displaying icons for example. You could lean on serving images at 200%, or using SVG, but it’s also possible to build a surprising amount of graphics with CSS alone. Let’s build an elaborate icon with just one HTML element.

Ivo Rangelov

1791

CSS

How to Use the CSS3 Transition Property

Along with the introduction of CSS3 comes many new features that are available for use in creating great effects; one of the most useful is the transition property. The transition property is an important new development in CSS. It can be used to create a dynamic change effect on a div or class using a simple structure. CSS3's transition is a great way to add a little animation to sites without the large overhead of a JavaScript library like jQuery.

Ivo Rangelov

1723

CSS

How to Use Any Font You Like With CSS3

Custom fonts are among the most potentially appealing aspects of CSS3 for designers. With the font-face rule, you can render any font you have online within your web page text, regardless of whether the user has it installed or not. As with most CSS3 techniques, the basic code is pretty simple, but the practical reality is a little more complex. In this short tutorial, Susan Smith will run through the basics of including custom fonts in your pages.

Ivo Rangelov

1868

Explore the Articles