Tutorial Lounge » CSS

How to Create CSS3 Borders – CSS3 Handy Techniques

asim9ice — Thu, 22 Dec 2011 08:09:05 +0000

In this helping and creative technique based article where we are using CSS3 (Cascading Style Sheets), these are useful methods which we can use in website development, in this modern web development era we should get control on these kind of advanced development tricks.

I think this is not last end of sharing basic tips and tricks of css3, we’re preparing more tricky posts for you near future, please share your user experience for motivation.

1. Rounded Corners by CSS3

we’re adding “rounded corners” with easy way and hopefully this is another CSS3 technique can more helpful to you in front-end development.



HTML5 and CSS3 Combinations







	Rounded Corners by CSS3

2. Rectangle Shadow by CSS3

I know you enjoying this beautiful article to learn about CSS3, in this technique we have to share “rectangle shadow effect” with little code.



HTML5 and CSS3 Combinations







    Rectangle Shadow by CSS3

3. Borders with Image by CSS3

In this area we using border image property using CSS3, we also sharing an image below which we’re using in this above border effect:



HTML5 and CSS3 Combinations







    Borders with Image by CSS3

How to Create Attractive Ribbon Using CSS

Anupama Rao — Tue, 13 Dec 2011 11:10:30 +0000

Website designing going to be more advanced as look of any website and all new websites trying reduce file sizes even try to avoid images in websites, so in this special requirements we focus on some specific areas in front-end development.

In this CSS tutorial we’re designing “Attractive Ribbon Using CSS” to get advantage of design where we avoiding useless images and even have options to develop creative way of website designs, I got this idea from latest design where most of commanding language CSS (Cascading Style Sheets) with few lines and get output as we showing below.

I know everyone will learn from this little creative way of ribbon design which can use in website headers and even I have seen in latest website design footers as well, we appreciate if you share your suggestions in comments area.

Code Start Now



Attractive Ribbon Using CSS



	
	      
	            
	            
	            
                	Attractive Ribbon Using CSS by Tutorial Lounge

Turn to Be a Skilled via Wholesome CSS3 Tutorials

admin — Thu, 17 Nov 2011 19:06:30 +0000

Today in this day by day updates on web development we’re with CSS3 (Cascading Style Sheet) that’ll consents to progress the look and feel of new web era with awesome features like gradients, special text effects, rounded corners, beautiful animations, drop shadows and relative opacity settings to get special browser friendly results.

CSS3 and HTML5 going to alternate of Adobe Flash with some superlative features that also support cross browser usability and help improving the web development, hope you’ll get different and unique experience from listed CSS3 Tutorials roundup, we’ll get in touch.

Create a Vibrant Digital Poster Design with CSS3

The Circlicious poster art makes use of plenty of circular geometric shapes and features lots of transparency to add multiple levels to the design, giving the design that bright and crisp feel of typical vector artworks. Being a design that makes use of CSS3 properties, it’s only suited to the modern browsers of Firefox, Safari and Chrome.

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.

Slick login form with HTML5 & CSS3

We already know that CSS3 has the ability to create a lot of new possibilities to design and implement better web forms. Also, HTML5 has its important role when it comes about creating more usable forms, without actually needing any Javascript code.

Knowing that, check out the below preview to see the login form we’re going to create in this article:

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.

Spin those Icons with CSS3

Glass Text Effect (refractive index) with CSS3

ZEPPELIN is an experiment trying to create a glass text effect (refractive index) with CSS3. Yes, another useless CSS3 demo. But I always try to keep the markup as minimal as possible.. this time there is only one extra

tag needed. I tried to use the :after pseudo-element, but somehow the animation didn’t work.

The refractive index effect is achieved by using two background images on top of each other. The underlying one get’s scaled down a bit and the top one get’s cutout by the text using -webkit-background-clip: text. For the embossing effect a -webkit-text-stroke with a low opacity is used. Something to keep in mind, animating clippings, text-shadows, transparency can make your CPU spike, it’s not just Flash, CSS can be misused too. So make sure you don’t loop the animation forever.

Fun With CSS Text-Shadow

I used 100 text-shadows to make the graphic below happen. Sure, it’s excessive, ridiculous and just plain silly. But why, at times, can’t the web be all of those things? I’m all for sensible, well-reasoned CSS, but let’s keep things in perspective. We’re not surgeons. We can experiment without causing anyone bodily injury. So go! Have a blast! Pull up your localhost and build something wonderfully useless!

Photobooth with PHP, jQuery and CSS3

In this tutorial, we will be building a jQuery and PHP powered photobooth. It will allow your website visitors to take a snapshot with their web camera and upload it from a neat CSS3 interface.

As you might know, it is not possible to access web cameras and other peripheral devices directly from JavaScript (and it won’t be for some time). However there is a solution to our problem – we can use a flash movie. Flash has perfect web camera support, and is installed on nearly all internet – enabled computers.

The solution we are going to use for this app is webcam.js. It is a JavaScript wrapper around flash’s API that gives us control over the user’s webcam.

CSS3 Image Styles

When applying CSS3 inset box-shadow or border-radius directly to the image element, the browser doesn’t render the CSS style perfectly. However, if the image is applied as background-image, you can add any style to it and have it rendered properly. Darcy Clarke and I put a quick tutorial together on how to use jQuery to make perfect rounded corner images dynamically. Today I’m going to revisit the topic and show you how much more you can do with the background-image CSS trick. I will show you how to use box-shadow, border-radius and transition to create various image styles.

HTML5 & CSS3 envelope contact form

Nowadays, contact forms can be found everywhere. To attract visitors’ attention, you need a cool CSS3 contact form, with a catchy look, one that your visitor would love to fill.

In this article you’ll learn how to create a nice CSS3 contact form using also some HTML5 features.

Create a Stylish Contact Form with HTML5 & CSS3

Follow this step by step process to create your own stylish contact form completely out of HTML5 and CSS3. We’ll be using a couple of the handy new features in HTML5 to add cool functionality to our form, while making use of cool CSS3 properties to recreate our Photoshop concept purely in code.

The design we’ll be building features all the things that make a rich interface; gradients, highlights and shadows! We’ll create a visual concept in Photoshop first of all, but when it comes to building the form we’ll recreate every effect with HTML5 and CSS3.

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.

What follows is a classical device used by film makers of the period – newspapers flashing and spinning towards the camera, praising the heroic feats of our protagonist. So lets have some fun and build this classical scene using the CSS3 animations capabilities of the new versions of Firefox, Chrome and Safari, picking useful techniques along the way.

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).

You can use today’s example as a placeholder for your upcoming personal website, or as an actual about page.

Create a Multi Color and Size CSS3 Buttons

Today we are going to create some CSS3 Buttons which are available in multi color and size. There are lots of tutorials on creating css3 buttons over internet, But we have created our own css3 buttons for our various wordpress themes which we sold on wordpress marketplaces, so we thought why not to share that buttons with you guyz. So lets follow the steps for creating css3 buttons.

First of all we need to have a simple HTML mark up for our button, here we need to define the class for our link.. like the main class as button then the size class as small, medium or large and then the color class as red, blue, green etc etc.

Create a Cool Anaglyphic Text Effect with CSS

Anaglyphs are those amazing 3D images that are created by offsetting two of the red, green and blue channels, and are viewed with those nerdy looking 3D glasses with different coloured lenses. I don’t know if this effect works for real, as I’ve unfortunately misplaced my 3D specs, but it’s a pretty cool text effect nevertheless! Let’s take a look at how a similar style can be created for sprucing up your web designs, while taking into consideration semantics and avoiding the repetition of any markup.

Create Beautiful CSS3 Typography

In this tutorial, we’ll look at how to take basic markup and transform it into an attractive and beautiful typographical design through pure CSS3. There are no images or other external resources, just pure CSS magic. We’ll also touch on some general typographical concepts along the way.

Design a Prettier Web Form with CSS 3

CSS 3 Transform Experiment

Transform is a pretty exciting feature that’s been implemented in CSS 3. So why haven’t we used more of it in our designs? When I made the switch to web design, the thing I missed most was the ability to angle text. Sure it could be done with images, but at a price called page weight. I’ve searched online and there are a few examples that use the feature to make cubes, or rotate an image in an attempt to recreate some type of flash-like image gallery, but I haven’t seen it used in a visually impacting way. I asked myself why?

The best way to learn is by doing. So in my attempt to learn why, this is what I created. It was about an hours time and I think it’s pretty stunning visually for the web. This works in Chrome, Safari, Firefox, Opera and maybe IE9(not tested). If it doesn’t work, you’re not on the current browser version. Sorry IE6, IE7 and IE8, you’re out of luck.

Push Your Web Design Into The Future With CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Here are five techniques snatched from the future that you can put into practice in your website designs today.

CSS3 Background-Clip & @Font-Face

With no clear purpose or plan, I’ve resolved to experiment with CSS3 on a regular basis. Some of these note-posts may be more useful and practical than others, but the only way to know for sure is to learn by doing. That being said, here is another experiment with background-clip: text and @font-face via Typekit. When I finished Volume 2 in my Quoting Lebowski series the first thing that came to mind was that I bet I could CSS this. Here is the webkit happy code for this live example, sparing you all the structural bits from style.css:

Create a Grid Based Web Design in HTML5 & CSS3

Follow this step by step walkthrough of the making of a sleek website design for an eyewear brand in HTML5 and CSS3. We’ll build the HTML structure with the latest elements then style up the appearance of the site with CSS3 affects to match the original Photoshop concept with minimal use of background images.

Halftone Navigation Menu With jQuery & CSS3

Providing an intuitive, yet eye-catching navigation on your site, is one of the ingredients for a great design. And with the performance improvements in newer browsers and the rise of JavaScript frameworks such as jQuery, it is becoming easier to include beautiful animations in your page designs.

Today we are making a CSS3 & jQuery halftone-style navigation menu, which will allow you to display animated halftone-style shapes in accordance with the navigation links, and will provide a simple editor for creating additional shapes as well.

A Look at Some of the New Selectors Introduced in CSS3

Everyone who has been using CSS is immediately familiar with selectors as they are what is used to target elements on a page and style them. CSS3 brings even more options as far as selecting elements goes. It will allow designers and developers to implement designs much easier and quicker than before.

Here is a run-down of just some of the things that is possible with CSS3 selectors. Of course CSS3 isn’t supported at all by any IE browsers including IE8 but all latest versions of Safari, Firefox and Opera support most, if not all of them.

Get Started with CSS 3

If you follow CSS, you’re probably sick of hearing promises of CSS 3 — the next generation style sheet language that should have been here several years ago. Well, the specification document still isn’t finalized. If you’re impatient, you’re not alone. Browser manufacturers have already started rolling out support for many of the new features even if they aren’t yet set in stone.

Opera and Safari have been leading the way when it comes to CSS 3 features, but Firefox 3 packs in a few and 3.1 promises to bring Firefox alongside the others. Yeah, we know what you’re thinking: “I can’t do it. I have to support Internet Explorer.”

Well, you’re right. Users of Internet Explorer are out of luck. Although, there’s no reason you can’t use some rounded corner properties solely for your Firefox/Opera/Safari visitors. IE will still render the backgrounds as usual, it just won’t understand the rounded corner bit.

CSS3 Transforms & @font-face Experiment

How to Create a CSS3 Tabbed Navigation

Hiya folks! Today we’re going to have fun creating a CSS3 Tabbed Navigation. In this tut we’re going to be creating the darkwash jean version out of the many different themes available for these awesome tabs just because… #1 we can and #2, there is more styling involved and I can show you more neat tricks with CSS3 than with the other styles. If you prefer, there are much simpler themes in the source files so feel free to follow along with those as the structure is pretty much the same.

Note: Support for IE7 & 8 is there but limited in that the functionality works perfectly but some of the overlay styles aren’t treated properly. If not for the wonderful and awesome CSSPIE and Dean Edwards fix, there would be no support for any version other than IE9.

Ok, now that that’s out of the way, I think it’s time we got started!

CSS3 Click Chart

CSS3 Bling in the Real World

All you disco-dancing designers out there (no more anticipation of alliteration) have been loving the new features CSS3 provides for making websites look cool in an easier, less hackish, and more straightforward fashion. Features like CSS3 gradients, drop shadows, rounded corners, animations, and opacity are giving us the promise of less time spent in Photoshop, fewer horribly nested

s, more flexibility, and more fun! Not to mention more time down at the pub, excitedly showing your friends your latest cool experiments on your iPad, while sipping on a smooth glass of ale with an intense air of self-satisfaction and smugness. Face it, most of us have enjoyed such a moment!

The new breed of CSS3 shizzle even allows a self-confessed design amateur like myself to produce some fairly tasty looking designs. CSS3 is here, CSS3 is fun, and CSS3 allows us to evolve the look of the web as we go. At least, that’s the theory. But the reality is a bit different:

On both desktop and mobile (and other alternative browsing devices) there are rendering engines out there other than Webkit. (Many designers out there forget this, and don’t consider the fact that it isn’t that hard to make the new CSS3 features work in other browsers, too.)
Some browsers in use today support a reasonable set of features, while some support none at all.
Some of us have real live clients who want their websites to look pretty much identical, even across older browsers.

Interactive Typography Effects with HTML5

Still hyped by the possibilities of CSS3, I want to share some CSS3 button experiments with you. The idea is to create some animated link elements with different styles, hover effects and active states.

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.

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.

Free Overlapped CSS Menu Using CSS Sprites

It is said that 70 to 80 percentage of the end-user response time is spent on the front-end. A major portion of this time is exhausted on downloading all the external components in a web page including, stylesheet, images, scripts, flash etc. An extra HTTP request adds 200+ milliseconds to a page (worldwide average). Since most of today’s browsers limit about 3 or 4 parallel requests at a time, a page with so many external references can cause the requests to get queued up. This may eventually cause the page loading time to increase. In short, the fewer files the web browser has to fetch that much faster the site loads. It’s as simple as that.

iPhone “slide to unlock” Text in WebKit/CSS3

Original Hover Effects with CSS3

The power of CSS3 is enormous and in this tutorial we will see how to exploit it in a very creative way. We are going to create some thumbnail hover effects with CSS3 transitions. On hover over a thumbnail, we will reveal some description of the thumbnail, using a different style in each example.

Fullscreen Image 3D Effect with CSS3 and jQuery

Today we want to share one of our CSS 3D Transforms experiments with you. The idea is to show an image’s fullscreen version by rotating two blocks in three-dimensional space. The faces of the blocks being rotated to the front will show the fullscreen image.

Create Spinning Rays with CSS3: Revisited

Last December I wrote a blog post titled Create Spinning Rays with CSS3 Animations & JavaScript where I explained how easy it was to create a spinning rays animation with a bit of CSS and JavaScript. The post became quite popular so I thought I’d take some time to look at it and improve it. It occurred to me that one solution I didn’t present was a much lighter solution; a solution that required only CSS!

HTML5 Techniques – Ultimate Collection of Tutorials

admin — Mon, 22 Nov 2010 14:17:54 +0000

As my experience we always close to the latest technologies as we have one step ahead on web development techniques as HTML5. HTML 5 is the advanced version of HTML. HTML 5 is giving new techniques and advanced features/structure in designing. These new features and tags makes designing very easy to create a web page.

CSS3 and HTML 5 are capable of revolutionizing the way we design websites. Both include so many new features and functions that it can be hard to wrap your head around them at times. HTML5 is giving web designers and developers new capabilities that were things of fantasy with previous versions of HTML. Web pages will now be more semantic with the use of structure specific tags. The inclusion of native support for things like rounded corners and multi-column layouts are just the tip of the ice berg.

When saying about HTML5, developers mean the new semantic structural tags, API specs like canvas or offline storage, new inline semantic tags, etc. HTML5, in fact, is aimed at creating a comprehensive markup language for front-end development, able to provide qualitative information on the different elements of the page. But to help make some sense of what’s new and essential in HTML5, you could review some helpful and indispensable HTML5 tutorials that go over many of the major HTML5 aspects and new standards.

In an front-end development effort to encourage our respected visitors and readers to do the same and to prepare you for the future, we’ve rounded up “HTML5 Techniques – Ultimate Collection of Tutorials“.

How to Make an HTML5 iPhone App

You’ve been depressed for like a year now, I know. All the hardcore Objective-C developers have been having a hay-day writing apps for the iPhone. You might have even tried reading a tutorial or two about developing for the iPhone, but its C—or a form of it—and it’s really hard to learn.

I don’t want to say that you should give up on the objective: you can get it eventually. But in the meantime, there is something else that you can do. You can create a native app that lives with all the other apps, and for the most part, it’s going to be a pitch-perfect imitation. You can do this with the skill set you probably already have: HTML(5), CSS, and JavaScript.

A Marriage Made in Heaven? HTML 5 and CSS3

Perhaps foreshadowed by Google’s adoption of HTML 5, Jeffrey Zeldman pointed out late last week; the future of XHTML 2 is no more. Obviously the selectors we use in CSS 3 depend on the underlying markup we work with, so this news is very interesting and we think timely. As CSS 3 support inches forward with each browser release and as JavaScript libraries supplement poor browser behavior, the need for web developers and enthusiasts to be able to focus their attention has become a paramount concern.

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.

When can I use…

Look up which browsers support CSS3, HTML 5, and other technologies not supported by all browsers.

The Power of HTML 5 and CSS 3

Web designers can do some pretty cool stuff with HTML 4 and CSS 2.1. We can structure our documents logically and create information-rich sites without relying on archaic, table-based layouts. We can style our web pages with beauty and detail without resorting to inline and
tags. Indeed, our current design methods have taken us far beyond the hellish era of browser wars, proprietary protocols, and those hideous flashing, scrolling, and blinking web pages.

As far as we’ve come using HTML 4 and CSS 2.1, however, we can do better. We can refine the structure of our documents and increase their semantic precision. We can sharpen the presentation of our stylesheets and advance their stylistic flexibility. As we continue to push the boundaries of existing languages, HTML 5 and CSS 3 are quickly gaining popularity, revealing their collective power with some exciting new design possibilities.

Code a Backwards Compatible, One Page Portfolio with HTML5 and CSS3

HTML5 is the future of web development but believe it or not you can start using it today. HTML5 is much more considerate to semantics and accessibility as we don’t have to throw meaningless div’s everywhere. It introduces meaningful tags for common elements such as navigation’s and footers which makes much more sense and are more natural.

This is a run through of the basics of HTML5 and CSS3 while still paying attention to older browsers. Before we start, make note of the answer to this question.

Design & Code a Cool iPhone App Website in HTML5

HTML5 isn’t here just yet, but the Working Draft is complete enough for us to play around and get to grips with the exciting new elements we can use in our code. To learn how a few of these elements can be used, let’s put together a simple website for say, a fictional iPhone app. How about we use the recent tutorial I wrote over at Tutorial9 as a base for our app website? This tutorial covered the process of building an interface just like the awesome apps from Tapbots, so head over and check it out, then we’ll be ready to build an accompanying website for our PKE Meter application.

HTML5 Unleashed: Tips, Tricks and Techniques

Can we use HTML5 today? What can we do with it? Is it really going to kill Flash? You must have noticed a gradual increase in the frequency of these and similar questions being asked, debated and even answered. In my opinion, you must answer such fundamental questions yourself.

The whole purpose of this article is to help you get started with some basic guidelines and easy to follow code templates. If you are familiar with the basics and want to take things to the next level, you will also find several useful resources providing more tips, tricks and techniques.

HTML5 Features

Official Specification Document is the best place to look for HTML5 features, but you can also start with simple and easy to follow HTML5 Tag Reference at W3Schools. We will cover following features in this article:

Semantic Markup

Form Enhancements

Audio / Video

Canvas

ContentEditable

Drag and Drop

Persistent Data Storage

Designing a html-5-layout-from-scratch

HTML5 and CSS3 have just arrived (kinda), and with them a whole new battle for the ‘best markup’ trophy has begun. Truth to be told, all these technologies are mere tools waiting for a skilled developer to work on the right project. As developers we shouldn’t get into pointless discussions of which markup is the best. They all lead to nowhere. Rather, we must get a brand new ideology and modify our coding habits to keep the web accessible.

While it is true HTML5 and CSS3 are both a work in progress and is going to stay that way for some time, there’s no reason not to start using it right now. After all, time’s proven that implementation of unfinished specifications2 does work and can be easily mistaken by a complete W3C recommendation. That’s were Progressive Enhancement and Graceful Degradation come into play.

HTML5 JavaScript APIs

Just because you didn’t get to go to that awesome conference doesn’t mean that you can’t still watch the lectures! Each weekend, we’ll feature a recommended web development lecture on Nettuts+.

In December of last year, Remy Sharp spoke at CODEBITS about the various new HTML5 APIs. In the talk, he covers the video element, canvas, web storage, and other techniques.

Build Awesome Practical CSS3 Buttons

What once required background images and icons can now be created with plain-old CSS. Because modern browsers have access to things like box shadow, gradients, rounded corners, text-shadows, and font-face, we can finally take advantage of this and remove any need for images, when creating visual elements, such as buttons! I’ll show you how in today’s video tutorial.

Quick Tip: Mimic Equal Columns with CSS3 Gradients

What happens when your main content area needs two specific background colors: one for the primary content, and another for the sidebar? If you’ve ever tried applying the background to each container itself, you’ll no doubt have realized that your layout quickly becomes fragmented as soon as, say, the primary content section exceeds the height of the sidebar.

Generally, the solution is to set a background image on the parent element, and set it to repeat vertically. However, if we get clever with CSS3 gradients, we can achieve the same effect with zero images. The irony in this is that we’re using CSS3 gradients to create an effect that doesn’t contain a gradient! Read on to learn more.

Have a Field Day with HTML5 Forms

Forms are usually seen as that obnoxious thing we have to markup and style. I respectfully disagree: forms (on a par with tables) are the most exciting thing we have to work with.

Here we’re going to take a look at how to style a beautiful HTML5 form using some advanced CSS and latest CSS3 techniques. I promise you will want to style your own forms after you’ve read this article.

Designing a blog with html5

Much of HTML 5′s feature set involves JavaScript APIs that make it easier to develop interactive web pages but there are a slew of new elements that allow you extra semantics in your conventional Web 1.0 pages. In order to investigate these, let’s look at marking up a blog.

Firstly what we’ll do is use the header, footer, and nav elements to mark up the broad structure of the page. We’ll make the blog comments form much smarter by using the new data types and built-in validation available in HTML 5-aware browsers.

Then we’ll do some work on the guts of the page, using HTML 5’s article elements to better mark up blog posts and comments and show how to use the section elements to better structure accessible hierarchical headings on sites that are CMS-driven. As blogs are chronologically ordered, we’ll see what HTML 5 offers us for representing dates and times.

Blowing up HTML5 video and mapping it into 3D space

I’ve been doing a bit of experimenting with the Canvas and Video tags in HTML5 lately, and found some cool features hiding in plain sight. One of those is the Canvas.drawImage() api call. Here is the description on the draft site.

HTML5 Audio and Video: What you Must Know

In promotion of what I consider to be the best HTML5 book currently available on the market, Remy Sharp and Bruce Lawson agreed to donate a chapter of Introducing HTML5 to our readers, which details the ins and outs of working with HTML5 video and audio.

A LONG TIME AGO, in a galaxy that feels a very long way away, multimedia on the Web was limited to tinkling MIDI tunes and animated GIFs. As bandwidth got faster and compression technologies improved, MP3 music supplanted MIDI and real video began to gain ground. All sorts of proprietary players battled it out—Real Player, Windows Media, and so on—until one emerged as the victor in 2005: Adobe Flash, largely because of the ubiquity of its plugin and the fact that it was the delivery mechanism of choice for YouTube.

HTML5 provides a competing, open standard for delivery of multimedia on the Web with its native video and audio elements and APIs. This article largely discusses the element, as that’s sexier, but most of the markup and scripting are applicable for both types of media.

Hybrid Column Layout

Have you done a website with fixed columns? Easy, right? What about one with liquid columns? you know, those that use percentages.. easy too. Have you ever mixed them up? If so, Did you have problems? I bet you did..

Create an Elegant Website with HTML 5

I’m sure that who chooses to work as web designer makes a choice of heart, a choice of love. He/she decides to bet any given day on his creativity and his ability of producing an idea and of making it tangible, visible and perceptible for all. These crazy men have my respect. But, also when the creative side is very important for a work, there exists a logical (and technical) part in all creative process.

There are some moments and situations in which the creative mind needs an analytical method to achieve the objective, that is, for us, the creation of a well-done website.

In his article on Design Informer titled “Web Design Iterations And Algorithm,” Adit Gupta explains how we can approach a web design work and how a website project can be processed in a number of iterations following a main algorithm. Well, generally it’s just how Adit has described.

Coding Up a Web Design Concept into HTML & CSS

I’ve recently been working on a design concept for a WordPress theme as part of a personal project. In this walkthrough we’ll go through the process of converting the design concept from PSD document right through to completed HTML and CSS mockup, complete with clean and valid code, a few touches of CSS3 and some quick fixes to help out old IE6.

Coding a CSS3 & HTML5 One-Page Website Template

Web development is an area in which you have to keep up with the latest technologies and techniques, so that you are at the top of your game. And no wonder – this is an area which changes with an amazing pace. What is the standard now will be obsolete in just a couple of years.

But changes do not come from nowhere. The early adopters are already using what we are going to use day-to-day a few years from now. One of these technologies is HTML5 – the new version of the fundamental language of the web.

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.

Comprehensive video tutorial on HTML5

This is an old video put up by a Google Employee called Brad Neuberg as an educational Introduction to HTML5. This is for the people who don’t find time to keep up with HTML5 developments by reading up articles.

The topics covered in this article are:

Web vector graphics with the Canvas tag and Scalable Vector Graphics (SVG)

The Geolocation API

HTML 5 Video

The HTML 5 Database and Application Cache

Web workers

The video is long enough, so sit back and enjoy it completely and thank us later for digging this out for you.

Create modern Web sites using HTML5 and CSS3

This tutorial serves as a hands-on introduction to HTML5 and CSS3. It provides information about the functionality and syntax for many of the new elements and APIs that HTML5 has to offer, as well as the new selectors, effects, and features that CSS3 brings to the table.

Finally, it will show you how to develop a sample Web page that harnesses many of these new features. By the time you have finished this tutorial, you will be ready to build Web sites or applications of your own that are powered by HTML5 and CSS3.

Structural Tags in HTML5

The HTML5 specification has added quite a few interesting and useful tags for structuring your markup. For a majority of everyday uses, these tags will replace many of our typical

entries from our code. So let’s dig in.

How to Make All Browsers Render HTML5 Mark-up Correctly – Even IE6

HTML 5 provides some great new features for web designers who want to code readable, semantically-meaningful layouts. However, support for HTML 5 is still evolving, and Internet Explorer is the last to add support. In this tutorial, we’ll create a common layout using some of HTML 5′s new semantic elements, then use JavaScript and CSS to make our design backwards-compatible with Internet Explorer. Yes, even IE 6.

Pocket Books

Build a Custom HTML5 Video Player: Free Premium Tutorial

Much like the other various Envato marketplaces, our newly launched Tuts+ marketplace will offer a free file each month. For September, that free file/tutorial just so happens to mine! I’ll show you how to build a custom HTML5 video player with Flash fallback support.

Be sure to grab this one for free for the entire month of September. Next month, it’ll return to its original price.

Quick Tip: Getting Offline Access with HTML5 Application Cache

Just when you thought you’d seen all the cool features of HTML5, I’m here to bring you yet another one. The internet is no longer about just websites; it’s about web applications. Often, our users are on portable or mobile devices, and they won’t always have access to a network. With HTML5’s Application Cache, you can provide them with all or some of the functionality they would have online, no matter where they go.

Ultimate Collection of CSS3 Tutorials and Techniques

admin — Mon, 23 Aug 2010 17:42:52 +0000

CSS3 and HTML 5 are competent of revolutionizing the way we design websites, CSS3 is the latest technology of CSS (cascade style sheet). CSS3 is giving new techniques and advanced features, structure in designing. These new features and techniques makes designing very easy to create a web page.

CSS3 leads to greater flexibility and makes it much easier to recreate previously complex effects. Many time-saving rules are being thought up for CSS3: text-shadow, box-sizing, opacity, multiple backgrounds, border-radius, border-image and multi-column layout. In this post we will take a look at some interesting properties of CSS3 that you can put into practice in your website designs today.

Here some informative online school resources.

Image Hover Effects Using CSS3

First of all thanks to giving me a great response on Ajax Style Loading Animation in CSS3 ( no Images ) .
In this post I am going to show to How to create a sexy css effect on image hover.This kinda effect you have seen before in Flash or in javascript as well.But why use Flash or js when CSS can do the same work.So lets do it…

Introduction to CSS3 – Part 2: Borders

For the second part of our series on CSS3, we’ll be taking a look at borders. Everyone who uses CSS is familiar with the border property – it’s a great way to structure content, create effects around images and improve page layout.

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. We are going to look at each of these in a bit more detail, using examples where possible.

Get Started with CSS

If you follow CSS, you’re probably sick of hearing promises of CSS 3 — the next generation style sheet language that should have been here several years ago.

Well, the specification document still isn’t finalized. If you’re impatient, you’re not alone. Browser manufacturers have already started rolling out support for many of the new features even if they aren’t yet set in stone.

Opera and Safari have been leading the way when it comes to CSS 3 features, but Firefox 3 packs in a few and 3.1 promises to bring Firefox alongside the others.

Gradient Borders

CSS3 takes borders to a new level with the ability to use gradients, rounded corners, shadows and border images. Mozila, Firefox and Safari 3 have implemented this function, which allows you to create round corners on box-items.

CSS 3 Cheat Sheet (PDF)

Just last week we released an extensive printable HTML 5 Cheat Sheet that lists all currently supported HTML 5 tags, their descriptions, their attributes and their support in HTML 4. In comments to this post we received many requests for a similar CSS 3 cheat sheet that would present the main features of CSS 3 in a handy, printable reference card.

So we asked our friend Chris Hanscom from Veign.com (who created the HTML 5 cheat sheet) to create a quick reference card for CSS 3. We already encouraged you to experiment with CSS 3 in our last posts and now you can use this handy cheat sheet to use the new CSS 3 features in some modern browsers (Firefox 3.5, Opera 9.6, Safari 3+, Google Chrome and Co.). The result is a printable CSS 3 scrib sheet, created and released exclusively for the readers of Smashing Magazine. Thank you for your great work, Chris Hanscom!

Introduction to CSS3 – Part 4: User Interface

This tutorial will be taking a look at some of the new ways you can manipulate user interface features in CSS3. But what do we mean by “user interface”?

CSS3 brings some great new properties relating to resizing elements, cursors, outlining, box layout and more. We’re focusing on three of the most significant user interface enhancements in this tutorial.

The examples shown below can be seen at our CSS3 examples page. Many, however, can only be appreciated in the latest builds of various browsers…

11 Classic CSS Techniques Made Simple with CSS3

We’ve all had to achieve some effect that required an extra handful of divs or PNGs. We shouldn’t be limited to these old techniques when there’s a new age coming. This new age includes the use of CSS3. In today’s tutorial, I’ll show you eleven different time-consuming effects that can be achieved quite easily with CSS3.

Subtle CSS3 Typography that you’d Swear was Made in Photoshop

Thanks to text shadows, outlines, transitions, and even text gradients, we can now create cool typography that you’d swear had to be made with a program like Photoshop. Nope, all CSS3 baby! Let’s take a look in this video quick tip.

Border Image

Another exciting new border feature of CSS3 is the property border-image. With this feature you can define an image to be used instead of the normal border of an element. This feature is actually split up into a couple of properties: border-image and border-corner-image.

Take Advantage of CSS3 to Achieve Subtle Design

I hear this CSS3 thing is all the rage. Resources are flying around the tutorial world and blogosphere providing brilliant examples of creative new ways to design using CSS3 modules. However, it’s easy to over-implement and lose the brilliant subtlety of great user interfaces. Here are three quick tips for using powerful CSS3 techniques in subtle ways.

3 Easy and Fast CSS Techniques for Faux Image Cropping

This article is a summary of a 3 fast and easy CSS techniques you can use to display only a portion of an image in your content. All techniques explained here actually need only couple of lines of CSS. However, it is not cropping in a real sense of the word, we are not cutting the image down to a certain size (CSS can’t do that yet) we are merely hiding the “extra” and displaying only a part of the image we want. That’s why I call it Faux Image Cropping.

These techniques can be very helpful if you need to keep images at a certain size, i.e. thumbnails in the news section or something similar. Being able to use CSS to control which portion of image to display is a great bonus.

Rounded Corner Boxes

If you’ve been doing CSS for a while you’ll know that there are approximately 3,762 ways to create a rounded corner box. The simplest techniques rely on the addition of extra mark-up directly to your page, while the more complicated ones add the mark-up though DOM manipulation. While these techniques are all very interesting, they do seem somewhat of a kludge. The goal of CSS is to separate structure from presentation, yet here we are adding superfluous mark-up to our code in order to create a visual effect. The reason we are doing this is simple. CSS2.1 only allows a single background image per element.

Box Shadow

The css3 property box-shadow allows to add without the use of images a shadow effect to the selected elements.

Thanks to the different values of the box-shadow, we can specify that the shadow is positioned to the left/right or top/bottom on the outside of the element, its gradient of blur and its color.

The box-shadow is not part of the so-called ‘box-model’, meaning that the shadow is not considered in the final total measure of the element. This css3 property can be combined with other properties such as css3 border-radius.

RGBA colors

CSS3 has added a new feature to color setting. Next to rgb you can now also use rgba. The “a” in this property-name stands, for, you guessed it: alpha. This new feature allows us to specify an opacity value for a color.

Multiple background Images

Now that Safari announced there support of CSS3′s multiple backgrounds developers can have a taste of the future. In this article I will describe how multiple backgrounds work, how you can profit from them and how to do the fix for browsers who don’t support it.

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.

Along with multiple background images, this following piece of CSS3 is among my favourites list. I think there is a lot of great potential for this CSS and in ways more than just a news paper/magazine layouts too!

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

Flexible, Mobile-First Layouts with CSS3

Some experts are projecting mobile devices to become the dominant medium for web browsing within five years, overtaking browsing on desktop computers. Regardless of how accurate this projection turns out to be, it is clear that formatting websites for mobile-friendly viewing needs to become a staple of web design and development. There are many ways to accomplish this, of course. However, CSS3 provides a fairly rich toolset for mobile-friendly formatting, relying on the client’s browser capabilities instead of back-end templating.

Quick Tip: You Need to Check out LESS.js

Quick Tip: Multiple Borders with Simple CSS

How To Create A Sexy Vertical Sliding Panel Using jQuery And CSS3

Quick Tip: Did Internet Explorer get the Box Model Right?

The CSS standard states that borders and padding should be applied on top of the specified width of an element. As such, if I have a 200px div, and apply 40px worth of borders and padding, total, the width will then be 240px. This makes perfect sense; however, Internet Explorer actually did things differently. They adopted a model where the maximum width is what you specified. The borders and padding are then factored into that width, reducing the content area. As a result, the width of the element never exceeds the stated width of 200px.

As we mostly work with extremely sensitive floated layouts, where even the addition of a 1px border can break the design, I wonder: did Internet Explorer get it right?

How to Create a Drop-down Nav Menu with HTML5, CSS3 and jQuery

In this tutorial, we’ll take a look and see what we can achieve with HTML5 and CSS3 when it comes to the staple of current web sites: the humble drop-down navigation menu. We’ll also use jQuery to handle the effects and add the finishing touches for us.

HTML5 brings to the spec a dedicated

element that should be used as the container for any major navigation structure, such as the main vertical or horizontal site navigation menus, or an in-page table of contents for example. IE unfortunately doesn’t support this new element yet, but there is a simple fix we can use, of which I’m sure you’re all aware.

Using CSS3 we can do away with what would have required the use of several background images and possibly an additional wrapping container or two and rely (almost) purely on some of the new style properties, such as rounded corners and drop-shadows for example, that are available to supporting browsers. Again, not all browsers (cough, IE!) support these new rules, but we can very easily provide fall-back solutions for the browsers that can’t handle our styles.

Introduction to CSS3 – Part 6: Backgrounds

For the last part of our introductory series to CSS3, we will be taking a look at the new background properties. These include background size, using more than one background for an element, and background origin (which effects the position of a background).

The new features allow greater control of the background element and will provide designers with a whole array of new possibilities. As usual, examples can be found below:

CSS3 Color Names

Color names also known as color keywords, named colors and named color keywords in which their is 147 color names that are defined in the CSS3 color specification. Now the 147 color names also include the 17 standard color names. All 147 color names where taken from the X Windows Systems, X color names, which has been in use for many and I mean many years. So the 147 color names even though they are not the standard are likely to be very well supported.

The color name gray can be spelled with an ‘e‘ as in grey but Internet Explorer (IE) will not recognize the color names with the word grey spelled with an ‘e‘, it will only recognize the color names with the word gray spelled with an ‘a‘ just to let you know. So Internet Explorer (IE) only has 140 color names in the CSS3 color specification instead of the 147.

Cascading Style Sheets Current Work

This page contains descriptions and a rough schedule of what the CSS WG (Cascading Style Sheets Working Group, formerly “CSS & FP WG”) is working on. If you want to follow the development of CSS3, this page is the place to start. Publication descriptions are ordered roughly according to their priority within the working group. (See explanation.) Also available: the index of all CSS properties, by Jens Meiert

CSS3 Dropdown Menu

While I was coding the Notepad theme, I’ve learned some new CSS3 features and now I would like to share it with you. View the demo to see a Mac-like multi-level dropdown menu that I’ve created using border-radius, box-shadow, and text-shadow. It renders perfect on Firefox, Safari and Chrome. The dropdown also works on non-CSS3 compitable browsers such as IE7+, but the rounded corners and shadow will not be rendered.

A Look at Some of the New Selectors Introduced in CSS3

Create a Dynamic Stack of Index Cards using CSS3

Recently we hear a lot about CSS3 and its features and even though there are already some web sites out there that take advantage of some of the CSS3 features (including DesignLovr) we hardly ever see the full potential of what can be achieved with CSS3.
Today we’re going to take a step into that direction and discover some of the possibilities CSS3 gives us.

Overview of CSS3 Structural pseudo-classes

CSS’s goal of “separating style from content” relies heavily on its ability to reach that content first. Well, in CSS3, that mission is bolstered by the addition of Structural pseudo-classes. These selectors let you select child elements of a parent based on a variety of generic criteria, such as the 3rd child, even/odd child elements, the nth child within each group of children of a certain type (ie: LI) within the parent, and more. A little overwhelming, yes, but it’s sure better than underwhelming, right?

Meanwhile back in the real world, CSS3 Structural pseudo-classes are supported in Firefox 3.1+, IE8+ (only in IE8 standards mode), and Safari 3.1+ to various degrees, so they are usable right away.

CSS DIY Organization

I detest looking at code or mark-up that I’ve written in the past, which I don’t understand right off the bat. I’m surely no different from you in that I want to be able to come back years later, pick the code up, and understand exactly what is going on. I don’t want to dissect the simplest concepts, where the brackets are located, or even how the mark-up is indented. I have created habits to help me with rapid development, which have kept my sanity somewhat intact. I will be honest though, I have never given much thought to how I write and organize my CSS until recently, and that is what I am sharing today.

Liquid faux columns with background-size the CSS3 way

Until the Advanced Layout and Grid Layout modules are implemented, we have to get by with the existing tricks of the trade. One of those is the use of faux columns, a background image which simulates equal-height columns. This is a good technique, but the drawback is that it only works with fixed-width columns.

That problem was overcome with the advent of liquid faux columns, which uses some background-position trickery and a bit of maths to create a variable-width effect.

With the (tentative) introduction of background-size in Safari and Opera, however, faux columns are about to become a lot easier; all you need to do is create a background image and assign a percentage value to background-size, allowing the image to expand or contract with its containing box.

Creating a Polaroid Photo Viewer with CSS3

A beautiful country that my girlfriend and me visited last year during our summer holiday. While we were there, we took a lot of pictures that would look pretty nice on polaroid.

Placing them on simple polaroids on a webpage simply didn’t do it for me. I wanted to drag them around, rotate them and still have a fun time. That’s were CSS and jQuery come in play. By combining the CSS3 Box Shadow and Rotate properties, this effect is relatively easy to create. When dragging a polaroid around, you’ll see the shadow. When it’s placed down, it’s rotated to the left or the right (random).

CSS3 colors, today (MediaCampAthens session)

Yesterday, I had a session at MediaCampAthens (a BarCamp-style event), regarding CSS3 colors. If you’ve followed my earlier posts tagged with “colors”, my presentation was mostly a sum-up of these.

It was my first presentation ever, actually, the first time I talked to an audience for more than 1 minute . This caused some goofs:

CSS3 Analogue Clock

Having read the blurb around Safari’s CSS transitions I opted to familiarize myself with a quick project — the aim of which was to create a functional, CSS only, analogue clock.

Get the Best Out Of CSS3

Web designers spend quite a lot of time being angry. If they’re not moaning about how some typographic nicety isn’t available yet for online design, they’re rattling on about how Internet Explorer has once again left something nasty and smelly in their cereal. So, as an antidote to all that, this month’s CSS article is chock-full of unbridled optimism. What we’re going to do is take a look at some upcoming features of CSS3, and show how they can be of benefit to web designers.

Design a Prettier Web Form with CSS 3

Thanks to advanced CSS properties, such as gradients and shadows, it’s now quite easy to turn a dull web form into something beautiful – with minimal effort. I’ll show you how in today’s tutorial!

CSS Fundamentals: CSS 3 Transitions

As CSS3 rolls out around the web, it is bringing some interesting new presentational techniques along with it. Today, we’ll review the basics of using CSS3 transitions and animations to add an extra layer of polish.

Take Your Design To The Next Level With CSS3

Cascading Style Sheets were introduced 13 years ago, and the widely adopted CSS 2.1 standard has existed for 11 years now. When we look at websites that were created 11 years ago, it’s clear that we are a thousand miles away from that era. It is quite remarkable how much Web development has evolved over the years, in a way we would never have imagined then.

So why is it that, when it comes to CSS, we’re stuck in the past and so afraid of experimenting? Why is it that we still use inconvenient CSS hacks and JavaScript-dependent techniques for styling? Why can’t we make use of the rich CSS3 features and tools available in modern Web browsers and take the quality of our designs to the next level?

Fun with CSS3 and mootools

These examples came about when experimenting with the extend property in MooTools. By extending the styles class I could add CSS3 properties into the Core MooTools framework and do CSS3 animations.

Push your Web Design Into the Future with CSS3

There are exciting new features in the pipeline for Cascading Style Sheets that will allow for an explosion of creativity in Web design. These features include CSS styling rules that are being released with the upcoming CSS3 specification. Realistically, you won’t be able to use these on your everyday client projects for another few years, but for design blogs and websites aimed at the Web design community, these features can help you push the boundaries of modern Web design today, adding that extra spice to your design and helping the industry move forward.

Text-shadow, Photoshop like effects using CSS

CSS3 finally eliminates the need for Photoshop when all you want to do is a simple shadow. The text-shadow property is used as follows:

Awesome Overlays with CSS3

These overlays use a number of new CSS properties, some of which are simple like border-radius and using RGBa colors.

The trick with these overlays is the gradient border, going form a lighter to darker orange as you go from top to bottom. To create that effect we used to the border-image property, which is a tricky little addition to CSS.

CSS3 & Flexible UI: Avoid Recutting UI Graphics for Mobile

Designing UI elements for a mobile browser has taught me a great deal when it comes to creating interactive graphical elements that are to be used in a very small space.Â Of course, when I say small space, I mean a small space that has the potential to be different for each handset out there.Â Not only are we talking resolution differences, but the screen DPI can change from device to device as well.

So after resizing and re-slicing the Fennec UI for the second time, I quickly realized that this could be a full-time job for a team of designers depending on the list of handsets Fennec will be appearing on.

Halftone Navigation Menu With jQuery & CSS3

Coding a CSS3 & HTML5 One-Page Website Template

Useful Tutorials Listing From Tutorials Palace

admin — Mon, 02 Aug 2010 16:43:04 +0000

Today we are sharing with you the best free tutorials based on Photoshop, Illustrator, Dreamweaver, HTML, CSS, PHP and Flash, all these useful tutorials we compiled from TutorialPalace, its an inspirational post because TutorialPalace team working really hard and introducing new advanced techniques in the categories we just mentioned above.

Thought behind this post was just to share these new advanced techniques with our users and visitors, so that they can learn better about these major topics and also they can apply in their future projects, hope you’ll also appreciate the work done by TutorialPalace, lets have a look…

Basic Connectivity of Flash and XML

How to Make Transparent Background of SWF in Webpage

Simple PHP Contact Form Tutorial

PHP Upload Single File

Contact Form Validation in Dreamweaver

Metallic text effect in Photoshop

Make Gift Box in Adobe Illustrator Using Skew Techniques

How to make Necklace in Adobe Illustrator

3D Shade Effect in Photoshop

Wind Text Effect Photoshop Tutorial

Designing of Beautiful Contact Form

25 Ultimate Useful PSD to HTML Tutorials

Andy Boyd — Fri, 12 Mar 2010 18:37:25 +0000

At the start of a web project many designers find it extremely useful, and timesaving, to create page mockups in Photoshop or Illustrator. This is an opportunity to play around with ideas, try out different styles and generate themes for the site.

There are many tutorials available on the Internet explaining how to convert PSD visual layouts into operational CSS/HTML files, ready for a completed web design. This post brings together 25 such tutorials, some covering detailed overviews of the conversion process, others aimed at specific website themes, while some offer simple tricks to bring a creative flourish to a designer’s work.

1. From PSD to HTML, Building a Set of Website Designs Step by Step

This is a top tutorial, taking an expansive view of the process from Photoshop to completed HTML products. The tutorial starts with four PSD mockups of a website that are eventually converted into a WordPress theme. It’s an impressively detailed tutorial, which covers almost everything users need to know to get started in converting PSD files.

2. From Photoshop to HTML

This tutorial explains how users can produce generic business templates from Photoshop files using CSS and HTML coding. The lesson includes demos along with PSD, CSS and HTML files available to download.

3. From PSD to CSS/HTML in Easy Steps

This four-part tutorial series covers easy steps on converting PSD designs into well-structured and semantically correct CSS/HTML layouts. The lessons explain the process set-by-step, including the correct procedural processes, and offers coding, templates and files to download.

4. Build A Sleek Portfolio Site From Scratch

This popular tutorial by Collis Ta’eed shows users the steps to coding a sleek portfolio, from the basic building blocks to a stylish finished page. The tutorial shows the whole procedure to create a homepage; from there the basic layout can be duplicated and adapted to construct the site’s interior pages.

5. Encoding a Photoshop Mockup into XHTML and CSS

Chris Spooner’s tutorial focuses on exporting Photoshop images and coding specifically for blog design.

6. Alternative Style: Working With Alternate Style Sheets

This ‘switcher’ tutorial explains how to create a cross-browser method for dynamically switching between style sheets, so alternate aesthetics can be quickly viewed.

7. Create a Killer Band Site with Drupal: A 6-part Tutorial Series

Gomediazine presents this series of six tutorials, explaining how to make band web sites using Illustrator files and coding with Drupal, open source CMS that’s popular in the music industry.

8. PSD To XHTML/CSS

This easy-to-follow tutorial explains the process of coding PSD files, and is aimed at web designers of all skill levels, from beginner to advanced.

9. Creating a CSS Layout from Scratch

This tutorial takes users through the process of constructing a functional CSS layout, and is aimed at those with a basic knowledge of using CSS.

10. Breaking Out of the Box With CSS Layouts

This guide encourages designers to think beyond the conventions of page layout, to employ creativity and experimentation.

11. Lab TV Layout, PSD to HTML

PSD Vibe presents a tutorial showing how to code the Design Lab TV Styled layout into XHTML and CSS, including downloadable files.

12. How to: CSS Large Background

This tutorial provides instructions on designing large background websites. In addition to the explanations of the techniques there are examples of creating large backgrounds using single and double images.

13. How To Create a Horizontally Scrolling Site

Conventionally, web pages scroll vertically, but this tutorial shows how to have content scrolling horizontally from left to right. The tutorial contains files for download, demos and enables users to add an unusual touch to their web design.

14. Slice And Dice That PSD

This tutorial shows how to slice and dice a PSD file and code it for the web. The tutorial, from Net Tuts, compares the HTML and PSD formats, and has a distinctive ‘Web 2.0’ feel.

15. How to Make Sexy Buttons with CSS

This neat tutorial explains how to make attractive buttons, with alternate ‘pressed’ states, coded with CSS.

16. Building a Website: HTML/CSS Conversion

This video screencast, part two of a three-part series, explains HTML/CSS conversion of Photoshop mockups. The tutorial begins by creating a skeletal project framework, moves onto Photoshop file layer organisation, and them describes writing the coding for the individual elements of the design.

17. Fixed Footer Backgrounds with CSS

This is a simple trick for using CSS to fix a background image to the bottom of a page design.

18. From PSD to HTML – How to Turn Your Designs into Usable Web Interfaces

This tutorial from Part Digital Design is a detailed look at slicing up PSD designs and creating powerful web interfaces using CSS and HTML.

19. CSS Gradient Text Effect

Web Designer Wall presents a tutorial explaining how to create fancy headings using pure CSS. The trick means that there’s no need for designers to render each heading in Photoshop

20. Tutorial: Coding a Layout

This is a relatively quick tutorial showing the necessary steps for analyzing PSD layouts for CSS/HTML conversion.

21. Advanced CSS Menu

Code an advanced list menu utilising the CSS position property in this tutorial, which enables ‘hand-drawn’ or ‘painted’ style menus.

22. How to Convert a PSD to XHTML

This is another tutorial from Net Tuts, this time a screencast that explains how to convert a PSD file into perfect XHTML and CSS.

23. Making Simple Work of Complex CSS Layouts

This tutorial aims to create flexible layouts that can easily be adapted to meet the requirements of its content and surroundings, with graceful degradation in legacy browsers.

24. Blurry Background Effect

A simple and fun trick is covered in this tutorial, explaining how to create a ‘blurry background effect’.

25. CSS Slicing Guide: Picking The Right Layout

This is a guide to choosing the best template for headers, navigation areas, content areas and footers, and then slicing them for page layouts.

This is a guest post by Tom Walker who writes and designs for an online print supplies store offering a range of ink for HP PSC printers and other accessories. You can keep up to date with his latest writing on the CreativeCloud.

Really Useful CSS Tips and Tricks for Web Designers and Developers

admin — Wed, 20 Jan 2010 17:39:33 +0000

CSS (Cascading Style Sheet) is most important language technique for web designing and development, we mostly prefer in our modern designs where some new techniques also introduce like CSS3 and some third party scripts as well which can help in latest website designs.

Now CSS (Cascading Style Sheet) offering many advanced advantages which helping in table-less and web 2.0 designs, as you know number of websites offering tips and tricks about CSS, but we choose some very useful techniques which you cannot ignore as designer or developer.

How To Create an IE-Only Stylesheet

Figures & captions

Create a Beautiful Looking Custom Dialog Box With jQuery and CSS3

Get a Consistent Base Font Size

Until IE finally supports the resizing of text in pixels, this is the best technique to gain full control over your font sizes. By setting the body font-size to 62.5%, that will set your font size to 10 pixels. That way, 1em is equal to 10 pixels.

Although I typically then set my container font-size to 1.2em, which in turn sets the font-size to 12 pixels. But still, then you know that 1em is equal to 12 pixels.

Avoid CSS hacks, use future proof method

Nifty Corners: rounded corners without images

CSS Sprites

CSS sprites is the technique of combing images to lessen the number of calls that need to be made to the server. Then you just shift the position of the background image to view the correct part of the image. May sound complicated, but it just takes a little math. Note: In both of these examples, I am using the Image Replacement technique discussed above.

The CSS Overflow Property

Poll Results: Hyphens, Underscores, or camelCase?

A pinned-down menu

The CSS Box Model

Alternative style sheets

CSS Ratings Selector

A confetti menu

Rational Z-Index Values

CSS Tabs

CSS For Bar Graphs

Even/odd: coloring every other row

Adam’s Radio & Checkbox Customisation Method

The ‘:target’ pseudo-class

5 Techniques to Style Buttons using Images and CSS

CSS Image Replacement for Buttons

CSS Unordered List Calender

Drop shadows (using css)

CSS-Based Forms: Techniques

Rounded corners and shadowed boxes

CSS-Based Tables: Techniques

Using CSS to Style Radiobuttons and Checkboxes in Safari and Chrome

Image Floats without the Text Wrap

Dynamic Piechart with CSS

Creating rounded corners (the “Deviant art’s” way)

35 Ultimate Useful CSS Cheats to Streamline Web Development

admin — Mon, 14 Dec 2009 19:28:59 +0000

We are follow our visitors and readers request presenting “35 Ultimate Useful CSS Cheats to Streamline Web Development” Cheat Sheets can help you save so much time and can really help you learn about CSS in an easy to understand format. I have gathered a list of CSS cheat sheets that I have found to be the most helpful.

We encourage our readers and visitors to find use of these tools and find ways to improve your development process. If anyone have also some helping tools can share here for more help each others.

This post is supported by: Virtual Cloud Hosting

Gosquared CSS help sheets

CSS Cheat Sheet (V2)

Core css

Blueprint CSS Cheat Sheet

lesliefranke.com

CSS Shorthand Cheat Sheet

csstypeset

CSS Frame Generator

CSS Quick Reference Guide

HTML Cheat Sheet

Grid Designer

HTML5 Canvas Cheat Sheet

CSS 2 – Quick Reference Guide – PDF

CSS Quick Reference

Cascading Style Sheets Level 1 properties Cheat Sheet

CSS Cheat Sheet

Dev Guru : CSS Quick Reference Guide

CSS Property Index

RGB Hex Colour Chart

MoreCSS

Cheat Sheet CSS Shorthand Codes

Elizabeth Castro : CSS Properties and Values

How to Add Variables to Your CSS Files

YAML Builder

Drawter

5 Techniques to Acquaint You With CSS 3

CSS fix for the double margin float bug in IE6

IFSkinZone: CSS Cheat Sheet (HTML)

Deploy

Fun With CSS Shapes

Prototype a Magazine-Style Home Page Template with the Blueprint CSS Framework

Creating a CSS layout from scratch

Prototyping With The Grid 960 CSS Framework

Advanced Typography techniques using CSS

Absolute Positioning Inside Relative Positioning

http://blog.nihilogic.dk/2009/02/html5-canvas-cheat-sheet.html

CSS 2 – Quick Reference Guide – PDF

35+ Web Developers Useful Ajax Tutorials

admin — Sat, 17 Oct 2009 10:39:09 +0000

Here is a bundle pack about AJAX Tutorials for Web Developers, Ajax a short form of synchronous JavaScript and XML is a set of techniques used by many contemporary and popular web sites. Ajax provide web developers with copiousness of opportunities to improve the user practice and improve the presentation of their websites, In the recent years, There has been a larger plunge on developing rich Internet applications.

The web developers are driven to newer technologies that could enrich users experience, Some examples about functionality: in voting pole With Ajax, your vote could be registered without having to load the entire page again. web designers can use the greatest development tool If they already know about JavaScript, HTML, CSS and XML then you will need to spend your few mints to start with AJAX learning.

It’s one of the first choices building faster and responsive user interface. Ajax, which consists of HTML, JavaScript™ technology, DHTML, and DOM, is an outstanding approach that helps you transform clunky Web interfaces into interactive Ajax applications. Here is the list of 35+ Web Developers Useful Ajax Tutorials, which includes some useful tutorials with real time professional examples.