Showing posts with label Tutorial. Show all posts
Showing posts with label Tutorial. Show all posts

Touch The Future: Create An Elegant Website With HTML 5 And CSS3

Demo | Download

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.
Our brain works well, in order to solve a big problem, if we can divide the main issue in N operations that solve N little difficulties, and the total sum of these N little steps provides the solution for our big problem. Perfect, ‘Houston, we have a big problem!’ We should create a working web design. Actually the common routine requires the following main steps:

  • Step 1: understand the theme and the topics of the website and decode the client’s requests
  • Step 2: choose the right style and sketch your ideas
  • Step 3: draw a clean and clear wireframe to summarize the structure of the website
  • Step 4: design the website (in pixels) through an image editor, like Photoshop, to create a real-scale mockup
  • Step 5: convert your psd mockup to HTML and CSS

Five macro-steps to build an effective website using brain, pencil, paper, Photoshop, HTML and CSS. But technology doesn’t stop, luckily, and we have other two great allies for the future to design better website: HTML 5 and CSS3.

Read more

How to Turn Humdrum Photos into Cinematic Portraits



Adobe Design Premium CS5 software offers you complete creative freedom without sacrificing precision or quality, whether working in print, web, interactive, or mobile media.
There are a plethora of ways to treat a portrait for a myriad of uses, but that is for another feature. Let’s tackle adding drama or a cinematic quality to a regular, humdrum portrait. Let’s even throw in a little bit of faking HDR. That way if you work on a project that requires a stunning shot without the stunning photography, you’ll be able to cobble something together using your mad skillz!

Read More

How to Create Eroded Metal Text with Photoshop



Adobe Design Premium CS5 software offers you complete creative freedom without sacrificing precision or quality, whether working in print, web, interactive, or mobile media.
In this tutorial I’ll show you how to create an eroded metal text effect. Throughout this tutorial we’ll make use of various drawing techniques, channels, and patterns. Let’s get started!

Click Here

Brilliant jQuery Image Gallery/Slideshow Plugins


Image galleries and slideshows provide a good user experience and make viewing images more pleasant and intuitive on your website. With the advent of powerful JavaScript frameworks like jQuery, Prototype, Mootools etc., the quality of JavaScript based image galleries and slideshows have improved dramatically.

As these frameworks are getting popular day by day, more and more web developers are coming out with new and creative ideas every day. Here are some brilliant jQuery plugins which you can easily use to create an image gallery/slideshow for your website.

1. Spacegallery
Spacegallery displays your images with a nice 3D effect and it is also pretty easy to use and customize.


2. prettyPhoto

prettyPhoto might look like jQuery Lightbox clone but it supports videos, flash, YouTube videos, iFrames besides images. It also comes with useful API and 4 beautiful themes. It is a great plugin to create an image as well as multimedia gallery.


You Don’t Know Anything About Regular Expressions: A Complete Guide

Regular expressions can be scary…really scary. Fortunately, once you memorize what each symbol represents, the fear quickly subsides. If you fit the title of this article, there’s much to learn! Let’s get started.

Section 1: Learning the Basics

The key to learning how to effectively use regular expressions is to just take a day and memorize all of the symbols. This is the best advice I can possibly offer. Sit down, create some flash cards, and just memorize them! Here are the most common:
  • . – Matches any character, except for line breaks if dotall is false.
  • * – Matches 0 or more of the preceding character.
  • + – Matches 1 or more of the preceding character.
  • ? – Preceding character is optional. Matches 0 or 1 occurrence.
  • \d – Matches any single digit
  • \w – Matches any word character (alphanumeric & underscore).
  • [XYZ] – Matches any single character from the character class.
  • [XYZ]+ – Matches one or more of any of the characters in the set.
  • $ – Matches the end of the string.
  • ^ – Matches the beginning of a string.
  • [^a-z] – When inside of a character class, the ^ means NOT; in this case, match anything that is NOT a lowercase letter.

Yep – it’s not fun, but just memorize them. You’ll be thankful if you do!

Tools

You can be certain that you’ll want to rip your hair out at one point or another when an expression doesn’t work, no matter how much it should – or you think it should! Downloading the RegExr Desktop app is essential, and is really quite fun to fool around with. In addition to real-time checking, it also offers a sidebar which details the definition and usage of every symbol. Download it!.

Section 2: Regular Expressions for Dummies: Screencast Series

The next step is to learn how to actually use these symbols! If video is your preference, you’re in luck! Watch the five lesson video series, “Regular Expressions for Dummies.”
Read the full article here

Minimum Width for a Page

A very handy CSS command that exists is the min-width command, whereby you can specify a minimum width for any element. This can be particularly useful for specifying a minimum width for a page.
Unfortunately, IE doesn't understand this command, so we'll need to come up with a new way of making this functionality work in this browser. First, we'll insert a

under the tag, as we can't assign a minimum width to the :


Next, we create our CSS commands, to create a minimum width of 600px:
#container
{
min-width: 600px;
width:expression(document.body.clientWidth <>

The first command is the regular minimum width command; the second is a short JavaScript command that only IE understands. Do note, though, that this command will cause your CSS document to become invalid; you may prefer to insert it into the head of each HTML document to get around this.
You might also want to combine this minimum width with a maximum width:
#container
{
min-width: 600px;
max-width: 1200px;
width:expression(document.body.clientWidth <> 1200? "1200px" : "auto");
}