Tutorial Lounge [Learn Step bu step]

Make your Website Attractive Using CSS3 Tutorials

Posted: 26 Mar 2012 06:44 AM PDT

Website Designers love to get tricky way of modern website designing and development, CSS3 (Cascade style sheet) discovering unique and attractive effects using css3 techniques, in this roundup we bring some implausible CSS3 tutorials that will help you learn new techniques without difficulty for front-end development. CSS3 is such a great extension of the present coding language, that I have collected a list of the ultimate useful css3 tutorials that a developer would need to use the tricky language successfully.

CSS3 will allow for attractive buttons and navigation with only a little bit of code required, that will be compatible in older browsers, specifically when combined with jQuery (Javascript library), the possibilities are infinite and it can be a great technique to expand usability, hopefully you will learn more helping techniques of css3 for create striking results.

Create a Slick CSS3 Login Form NO IMAGES ALLOWED

The goal of this post is to harness some new functionality provided by CSS3 and move away from images. We are going to create a CSS3 login form without images yet still have a visually pleasing result.

Create a Sticky Note Effect in 5 Easy Steps with CSS3 and HTML5

In this tutorial, you'll learn how to transform an HTML list into a wall of "sticky notes" that look and work like the following…

CSS3 Animated Bubble Buttons:

With this tutorial, you can easily turn any link on your page into an animated button by just assigning a class name. No JavaScript necessary. you can also add more colours in this buttons by adding more classes.

Making an Impressive Product Showcase with CSS3

Impress.js is a small, standalone library that makes it easy to design advanced CSS3 presentations with eye-catching effects. But what if we used impress.js for something other than a presentation?

How to Create a Beautiful Icon with CSS3

Today, I'd like to show you a neat trick. We'll create a document icon with pure CSS3. Even better, this effect will only require a single HTML element.

How To Create a Sleek Grid Based Website Design

Follow this step by step tutorial to create a sleek website design for a fictional eyewear company. In part one of the tutorial we'll build the Photoshop design concept with a dark colour scheme and lay out the content to a solid underlying grid.

The Ultimate Guide to CSS Typography

Typography is often overlooked in todays design specifically by web developers. It really is a shame because CSS gives us so much control over our type. That being said, we our limited to certain "web safe" typefaces but that shouldn't decrease our creativity. Here are a few CSS tips for typography on the web.

HTML 5 and CSS 3: The Techniques You'll Soon Be Using

In this tutorial, we are going to build a blog page using next-generation techniques from HTML 5 and CSS 3. The tutorial aims to demonstrate how we will be building websites when the specifications are finalized and the browser vendors have implemented them. If you already know HTML and CSS, it should be easy to follow along.

Apple Navigation with CSS3

Apple is known for very clean design and if you have been to their website in the last few years you've seen their primary navigation. It's a staple of the apple website and today I wanted to take a crack at recreating the Apple navigation using CSS3 techniques.

Coding a CSS3 & HTML5 One-Page Website Template

Today we are making a HTML5 web template, using some of the new features brought by CSS3 and jQuery, with the scrollTo plug-in. As HTML5 is still a work in progress, you can optionally download a XHTML version of the template here.

CSS3 Multiple Columns

Use CSS3 to create a set of columns on your website without having to assign individual layers and / or paragraphs for each column.

Shiny Knob Control with jQuery and CSS3

In this tutorial we will be writing a jQuery plugin for creating a shiny knob control. Aptly named knobKnob, this plugin will use CSS3 transformations and jQuery's new event handling methods to give visitors of your website a new way of interactively choosing a value from a range.

Making a CSS3 Animated Menu

In this short tutorial, we will be using the power of CSS3 effects and transitions, to build a JavaScript-free animated navigation menu which you can use to add a polished look to your website or template. We will be using some neat features such as the :target pseudo selector and :after elements.

Dark Menu: Pure CSS3 Two Level Menu

Some days ago we released a Freebie called Dark Menu in Free PSD and in this easy to follow tutorial you will learn how to create this two level Dark Menu in HTML and Pure CSS3. No Javascript or Images has been used in the creation of this menu and I hope that you can learn a few techniques that will help you in future projects.

Having Fun With CSS3: Spinning Newspapers

Imagine a cop drama taking place in the 1930s. After a streak of bank heists, a young detective is given the case of his life. He accepts the challenge, and after grueling months of hard work and life-threatening situations, he manages to bring the bad guys to justice.

Creating a PHP and CSS3 Powered About Page

In this tutorial, we will be creating a simple about page that is powered by PHP, HTML5 and CSS3. It will present your contact information to your visitors, with an option for downloading it as a vCard (useful for importing it in third party applications).

CSS3 Gradient Buttons

Today I’m going to show you how to put the CSS gradient feature in a good practical use. Check out my demo to see a set of gradient buttons that I have created with just CSS (no image or Javascript).

CSS3 Minimalistic Navigation Menu

So today we are making something practical – a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers.

3D animation using pure CSS3

A couple of days ago, somebody tweeted a great looking CSS3 example. I was absolutely stunned by the example And all that Malarkey created and was wondering how he was able to produce that kind of effect. I knew about the CSS3 transition property, but how to create that 3d effect?

FULLSCREEN BACKGROUND IMAGE SLIDESHOW WITH CSS3

This tutorial is a part of our latest CSS3 experiments; you can find more of those here:

CSS3 quickie: The Facebook loading animation

After the couple of jQuery Quickies that have been placed online on this website, I today present you a CSS3 quickie. Just a short walkthrough to create a simple effect, to learn some basic stuff. In this case, we’re recreating the Facebook loading animation using CSS3 animations. I’m pretty sure that you’ve seen the animation before, if you’re a Facebook user.

Making a Beautiful HTML5 Portfolio

In today's tutorial we will be making a beautiful HTML5 portfolio powered by jQuery and the Quicksand plugin. You can use it to showcase your latest work and it is fully customizable, so potentially you could expand it to do much more.

Turn postcard photo into a stunning comment form using CSS

This tutorial will teach you how to make a stunning comment form using an old postcard photo. Final result can be seen on the image above.

CSS Styling of Forms

I have had many requests recently for a demonstration of using CSS for styling FORMS. Well here is a quick example based on form examples on the w3c website.

ELEGANT ACCORDION WITH JQUERY AND CSS3

Today we will create an elegant accordion for content. The idea is to have some vertical accordion tabs that slide out when hovering. We will add some CSS3 properties to enhance the looks.

The Apple.com navigation menu created using only CSS3

This menu bar was a lot darker than the previous, grey version, but looks just as great. One thing which I noticed about the navigation, is that the buttons are created out of images. That’s the moment I thought we could do better, using some nifty CSS3 techniques.

Shutter Effect Portfolio with jQuery and Canvas

In today's tutorial, we will be using the HTML5 canvas element to create a simple photography portfolio, which displays a set of featured photos with a camera shutter effect. This functionality will come in the form of an easy to use jQuery plugin that you can easily incorporate into any website.

FILTER FUNCTIONALITY WITH CSS3

Using the general sibling combinator and the :checked pseudo-class, we can toggle states of other elements by checking a checkbox or a radio button. In this tutorial we will be exploring those CSS3 properties by creating a experimental portfolio filter that will toggle the states of items of a specific type.

CSSG Collections: Web Forms

In this collection I used my typical form markup. I always use FIELDSET and LEGEND elements although I sometimes hide them. I find FIELDSET element to be very useful in presentation, because I have an extra element without jeopardizing semantics.

Animated wicked CSS3 3d bar chart

Do you remember the Wicked CSS3 3d bar chart that I placed online a couple of weeks ago? Paul Irish left a comment, requesting for an example with transitions. My reply was that I was already working on that, and today I’m proud to release the animated wicked CSS3 3d bar chart.