Jewel

Archive for the ‘Web Portfolio’ Category

CSS3 Tutorials

In Web Portfolio on December 10, 2011 at 10:05 am

In this post we provide you with a great collection you can always turn back to; whether you’re a pro and haven’t seen that particular tutorial yet, or a beginner who has newly discovered their love for CSS3. Either way, please feel free to mention tutorials that were missed out and would like to share with others.

Awesome Cufonized Fly-out Menu with jQuery and CSS3
In this tutorial you can learn how to create a full page cufonized menu that has two nice features:

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!

CSS3 Minimalistic Navigation Menu
Here is a simple CSS3 animated navigation menu, which degrades gracefully in older browsers and is future-proofed to work with the next generation of browsers:

CSS3 Background-Clip: Text
To carry out the DIN typeface, a transparent PNG with letters was used to achieve that subtle yellow to blue fade animation: Click on the image to read more:

Read the rest of this entry »

50+ Useful CSS Tools And Generators for Developers

In Web Portfolio on December 10, 2011 at 10:02 am

CSS Colors Tools

Color Scheme Designer
This tool provides colors in the form of a color wheel that offers mono, complement, traid, tetrad, analogic and accented analogic color variations in the percentage ratio; and it also highlights the same with the suitable scheme chosen.

Screenshot

Ultimate CSS Gradient Generator
It is a CSS gradient editor and generator that lets you create CSS gradients having cross-browser support.

Screenshot

CSS Color Codes
This tool offers two options for furnishing the hexadecimal and RGB color codes. You can pick the color from the color picker and then copy its hexadecimal value from the bottom field.

Screenshot

Colors Pallete Generator
This is a powerful tool that generates a color palette derived from the primary colors of the image that you upload. It is a useful tool for rapidly grabbing a particular color within an image for inspiration. With this, you can also generate Photoshop swatches and CSS styles.

Screenshot

Read the rest of this entry »

Coding a Band Website Created in Photoshop

In Web Portfolio on March 8, 2010 at 10:26 am

Band Website Series:

Working Proof

If you follow along with the tutorial, you should end up with the following live demonstration.

Working ProofClick to view live demo

Setting up the files

1 Start out by creating a new folder on your computer to put all of the site files in; I titled my folder sixrevisionsband. Create another folder in your working folder you just created and call it images; it will contain all the images, including CSS background images, for the site.

Setting up the files

Read the rest of this entry »

Design a Band Website Layout in Photoshop

In Web Portfolio on March 8, 2010 at 10:20 am

Create the Photoshop document

1 Start out by opening a new document in Photoshop, 1200 pixels wide by 1000 pixels tall.

Create the Photoshop document

2 Then drag your guides from the Ruler (press Ctrl/Cmd + R if you don’t see your rulers) so that the middle content area is centered and 960 pixels wide, my preferred width to work with.

Create the Photoshop document

Working on the rough background

3 Start by filling your Background layer with a nice warm gray color, I chose #C4C2AF. To do this, set your Foreground color to #C4C2AF in the Tools Panel. Then, with the Background layer selected in the Layers Panel, choose Select > All and then Edit > Fill, which will open up the Fill dialog box. Make sure that the value under Use option is set Foreground Color, and then press OK.

Read the rest of this entry »

jQuery Tutorials for Designers

In Web Portfolio on January 11, 2010 at 10:38 am

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a “write less, do more” Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.

Note: the version used in this article is jQuery 1.2.3

View jQuery Demos

Download Demo ZIP

How jQuery works?…..

Read the rest of this entry »

Best of CSS Design 2009

In Web Portfolio on January 11, 2010 at 10:29 am

Since 2007, every year I do a round up of best of CSS from Best Web Gallery (check out 07 and 08 collection). Well, it is the time of the year again — Best of CSS Design 2009. This year I’ve selected another 50 nicely designed web sites. Among the list, I notice a lot of them are minimalistic design with beautiful serif fonts. The grungy and sketchy styles are still strong. However, the large background is no longer as hot as in 2008, instead, texturized background is popular in 2009.

Sushi and Robots

screenshot

Bobulate

screenshot

A Way Back

screenshot

LegiStyles

screenshot

For a Beautiful Web……

Read the rest of this entry »