Newest Tutorials

Dark Button Navigation Using CSS3
I'm a big fan of his design style and decided to whip together a quick CSS3/HTML version of the buttons. Check out the demo and feel free to download the example zip file as well.

Create a Slick Menu using CSS3
In this article I am trying to mimic the navigation menu in Dragon Interactive website using only CSS (no images, no JavaScript). The effects can be seen in Latest Webkit Browser only. Gradients works in Firefox 3.6 but not the fade-in and fade-out transition.

Easy HTML 5 & CSS 3 Navigation Menu
With HTML 5 and CSS 3 now standard in most modern browsers, web developers can create interactive, attractive menus with ease. A few years ago we would be looking at using Javascript for many of the modern features, not now!

Building an Interactive Navigation Bar
A straightforward navigation structure can increase the usability of your site, and make information easy to find. By using basic HTML and CSS, you can build a horizontal nav bar that provides interaction when a user hovers over a navigation link.

CSS Triangles
I was recently redesigning my website and wanted to create tooltips. Making that was easy but I also wanted my tooltips to feature the a triangular pointer. I'm a disaster when it comes to images and the prospect of needing to make an image for every color tooltip I wanted made me rethink my redesign. Lucky for me, MooTools Core Developer Darren Waddell shared with me a great trick: CSS triangles. Using pure CSS you can create cross-browser compatible triangles with very little code!

CSS Triangle
You can make them with a single div. It's nice to have classes for each direction possibility. The idea is a box with zero width and height. The actual width and height of the arrow is determined by the width of the border. In an up arrow, for example, the bottom border is colored while the left and right are transparent, which forms the triangle.

CSS list styling using ASCII special characters
When creating a list of items in HTML we have a choice of two list types: ordered and unordered . While for ordered list we have a number of options, unordered list can only be styled with: circle, disc or square markers.

Pure CSS3 image slider with responsive design
This is a well-designed image slider that uses new features of CSS3 including: animations and media queries. It works without JavaScript which makes it faster. This image slider has responsive design which means it changes its size automatically for any mobile device. It has 4 different versions of design and can be easily customized and implemented.

Breadcrumb Navigation with CSS Triangles
Did you know you can make triangles with pure CSS? It's pretty easy. You just make a block level element with zero width and height, a colored border on one side, and transparent borders on the two adjacent sides. They are fun for all kinds of things, like little arrow sticking out from speech bubbles, navigation pointers, and more. Often times these are just visual flourishes, undeserving of dedicated markup. Fortunately, pseduo elements are often a perfect fit. That is, using :before, :after, or both to create these block level elements and place the triangle. One neat use that came to mind in this vein: breadcrumb navigation.

Coding A Graceful Breadcrumb Navigation Menu In CSS3
Navigation menus and links are possibly the most important interface elements to a web layout. These are the only outlets for users to travel between pages and interact with all the content you’ve created. Breadcrumb offers similar functionality with the added benefit of tracking your current position. You’ll be able to display all the previous link paths as the user traverses your site hierarchy.

Code a Useful Expanding Vertical Navigation Menu
Today we have yet another awesome step-by-step CSS project for you! This time around we’re going to build a super useful expanding vertical navigation menu. It’s a great way to hide a lot of links in a fairly small space and the animations will add a nice touch to your site. Even if you’re a complete beginner, you should be able to pull this off. I’ll guide you along every step of the way and explain how each chunk of code works so you can implement these same techniques in future projects and deepen your understanding of CSS.

Blur Menu with CSS3 Transitions
There are so many great things we can do with the additional properties and possibilities that CSS3 brings along. Today I want to show you how to experiment with text shadows and with transitions in order to achieve a blur effect that we’ll apply to a menu on hovering over the elements. The main idea is to blur the other items while enhancing the one we are currently hovering.

Creative css3 animation menus
Being in the mood for experimenting with CSS3, I'd like to show you some creative menu hover effects in today's tutorial. The idea is to have a simple composition of elements, an icon, a main title and a secondary title, that will be animated on hover using only CSS transitions and animations. We'll be exploring some different effects for the elements.

How to Whiten Teeth in Photoshop CC 2014
Photographers post-process their photos in Adobe Photoshop in order to remove the uncontrolled issues that can occurs while taking the shot. One of these issue is to have the nice smile get spoiled with the yellow teeth. Therefor, one of the most used image editing steps after taking portrait photography is to learn how to how to whiten teeth in Photoshop.

How to create a vector Bokeh background
In this tutorial we are going to show you how to use Transfuchsian’s Bokeh Brush set to create a vector Bokeh background. Open a new document and set up your art board to the size you want. For this tutorial, I am using a simple 11 x 11 inch square document.

Web fonts with CSS @font-face rule in detail
The current article in detail describes @font-face rule in CSS which is used for embedding custom fonts on websites without JavaScript. The normal type of CSS rules, which can be generated by any online generator for applying fonts look like this:

Create texture shading
In this tutorial you will learn how to create a textured light and shadow using native functions of Adobe Illustrator. We will generate organic vector texture and apply it to objects. Knowledge gained today will help your retro-style illustrations look more natural. You can also apply the resulting grainy texture in typography and logo design.

The nav element
The element is for "major navigation blocks"*. It can go in the header or article tags (which we will look at next); or it can be on its own. On the left I have it on its own and in the article element the "previous" and "next" links are in nav tags.

Semantic navigation with the nav element
One of the new elements for HTML 5 is the element which allows you to group together links, resulting in more semantic markup and extra structure which may help screenreaders. In this article I’ll discuss how and where to use it as well as some reservations I have with the specifications definition.

Building a Nav Menu
Essentially, the idea is that we're using a series of nested unordered lists, where the top-level list items are our top-level navigation items, and the lists nested under those represent the contents of the drop-down menus. We use CSS syntax we've already covered to define the look and feel of the menu items in each of their states