New Blog Address: http://blog.grayjunior.com/

Posts tagged ‘Guides’

Coding a Rotating Image Slideshow w/ CSS3 and jQuery

Today we are going to use jQuery and CSS3 rotations, along with the jQuery rotate plugin, to create a beautiful slideshow. You can use it to spice up your web sites, product pages and other projects with some CSS3 magic.

View Article… View Demo…

Advertisements

Ten PHP Best Practices Tips That Will Get You A Job

The last couple of weeks have been quite the experience for me. I was part of a big layoff at my former company, which was interesting. I’ve never been in that position before, and it’s hard not to take it personally…

View Article…

Step By Step: Designing A Landing Page With Photoshop.

Having learned and studied some techniques in designing and how colors may trick our eyes into believing something that is not, I hope to share with you these techniques so that you may create your own style of design someday. The techniques in this tutorial are simple and straightforward. Its all about understanding what our eyes will believe in, and the balancing of strong with softer colors.

Edit: Visit my newly setup blog over at http://blog.grayjunior.com/ to receive more tutorials and inspirational works by me!

Case Study: A Photographer’s Diary

In this tutorial, we shall be looking at how to create a simple landing page that sells a photographer’s prints and a simple diary. The theme I chose for this particular tutorial will be “Bokeh”.

The term “Bokeh” originated from “Boke” in Japanese which stands for blur, haze or out-of-focus, and its a popular technique in photography as well as web design. Most of it is applied as a background, and only on occasional designs will you see it elsewhere. As this is just a landing page, the design will focus more towards promoting as a single page, rather than an actual template applied throughout the other pages. Of course, it may be tweaked to become a template for use though. Let’s get started shall we?

The End Result: What You Will Be Creating

Photographer Diary

Preview ImageDownload PSD (External Mirror)

Step 1: Creating The Background

Setup a new template with the size of 1140px by width, and 1200px by height. Of course, you may wish to extend both sizes to your need, but in this case, let’s stay with 1140 x 1200px. I’ve placed standard guidelines to help me get equal spacing before I start throwing in stuffs. The guideline goes by 10 and 20px on the left, 20 and 50px on the top, 1130 and 1120px on the right.

Since we will be creating a “bokeh” design, we will need a rather unique background. A good photo will most definitely enhance the design results. I’ve picked this particular photography out from DeviantArt, which I think its a very good piece. Photo taken by TraceLegacy @ http://browse.deviantart.com/?qh=&section=&q=TraceLegacy#/d1mf4ob

Create a new layer and name it “Background” if you wish. This layer shall contain the background. Download and open the image in photoshop, resize and position it till you are comfortable with the result.

step-1_resize_bg

Step 2: Setting The Guidelines

Next, in order to have a neater and consistent look, guidelines are a must in a design. It helps you to be more organized and ease your process. So here, as you can see in the screenshot, apply these guidelines as follow: 100px on the left, 200px on the top, 1040px on the right and 1100px on the bottom.

These guidelines serve to help out setup the main content area background. On to creating the background.

step-2_guidelines

Step 3: Creating the Content Background

Now that we have the guidelines laid, its easy for us to create the shape we want with the exact size. Create a new layer and name it “BG Fill”, and use the Rectangular Marquee Tool and drag from the first point down, ending with a rectangular selection. Next, select a #fefefe as the base color, and use Paint Bucket to fill the shape.

step-3_content_bg

Add in a smooth gradient by right-clicking the layer “BG Fill” and check Gradient Overlay. Set it to #cccccc on the left and #fefefe on the right. To create that glossy border, simply add a 10px-sized stroke with the color #575757, position Inside and blend mode as  Soft Light. To make it look more “lively”, let’s add in a soft shadow with the following details: 40% opacity, 120° angle, distance 5, spread 0 and size 10. The following screenshots showed how it is done.

step-3_content_grad

step-3_content_stroke

step-3_content_shadow

Step 4: Adding Title & Description

A page without a title identifies nothing. So let’s quickly add in a simple yet elegant title and description for the page. Choose a cursive font face, such as “Bickham Script Pro” and set the size to 140px. I chose the word “Genius” as the word looks gorgeous in cursive style.

Download “Bickham Script Pro” Font at http://www.searchfreefonts.com/font/bickham-script-pro-regular.htm.

Remember the guidelines we have before? Place the title aligned to the top 20px margin, as show in the screenshot.

step-4_title

Add in a soft gradient, from #cccccc to #ffffff, just like what you did to the content background’s gradient. Drop its shadow to 40% opacity, at 120° angle, of a distance 2, spread 0 and size of 1 to add depth. To add in a small amount of glow/blur effect, we add in 1px-sized stroke, with the color #575757 positioning on the outside.

Give the page a short description using the font “Century” at size 20px, and aligned it just below the title. A mix of cursive and traditional serif gives it a nice touch and combines really well.

step-4_description

Step 5: Sparkling Effect

Let’s create some uniqueness to the title by adding a tiny sparkling effect to it. Select the title layer and use the Eraser tool to remove the “i” dot. Create a new layer with a name, say “Sparkle”, then select the brush tool and use a soft-round preset. Pick the #ffffff color and paint a spot shown in the screenshot. Now, we’re going to resize it and make it look like a sparkling effect.

step-5_sparkle_brush
Still selecting the “Sparkle” layer, use Free Transform to resize the brush shape. You may do so by either using the shortcuts CMD + T or CTRL + T for windows, or simply go to the menu -> Edit -> Free Transform. Resize it to a small width and height, tilt it 45° to the left and apply the transform. Copy that layer and paste it again, but this time round, tilt it 45° to the right. Now, does it resemble a sparkle? Merge this two layers together and all you need to do now is to resize it to an acceptable size.

step-5_sparkle_resize

Shift it above the “i” to replace its missing dot, as seen in the screenshot.

step-5_sparkle_place

Step 6: The Menu Buttons

We need just a simple menu in this tutorial, as it is a simple landing page. We will have two buttons, one on the left and one on the right. Let’s create the first one on the left. Select the Custom Shape tool, use the rounded-rectangle with a radius of 10px, and drag a shape. You may decide on your own size, or even create guidelines to make the shape’s size if you want. Once you have the shape, go to the blend options and add in drop shadow, gradient Overlay and a decent sized stroke. Then align it with the guidelines you have created previously. The screenshots below show how it is done. (Gradient colors: #485e90, #7f9bdb), (Stroke: #485e90)

step-6_button_grad

step-6_button_shadow

step-6_button_stroke

Just buttons alone may not seem obvious or attractive enough to catch much attentions. In this case, we may add small graphics icon to visually represent what that button might be. As the button on the left shall bring users to the “diary”, I chose to place a pencil as the detail. The usual blending options, drop shadow to add depth for the graphic.

step-6_pencil_effect

Step 7: The Menus

Well, now that you have the basic shapes and blending option for the first button, why create it again? Simply use this shortcut to speed up the process of designing: Press Alt while selecting the button layer, drag it to the position you want. There you go, you have another button of the exact shape and looks. Change the gradient colors so that the two buttons can visually identify themselves and create diversity. This may allow users to quickly know which area they are actually looking for, with the help of visuals.

Step 8: Setting The Content Guidelines

The important part of a well-designed page is always the content. No matter how visually attractive your design may look, without a well placed content layout, its hard to keep readers on it, much less to say creating hotspots or guiding user’s eye movement. To keep it simple, we will have a featured products on the top, and one of the diary logs below.

Take a look at the screenshot. I’ve taken the extra time to indicate each margin guidelines so that it is easier for you.

step-8_content_guidelines

Now, as you can see, I’ve already placed the title there. The reason is that it helps me better set the margins according to the layout I want. Don’t worry about the title as I will go into it in the next step.

Step 9: Product Titles & Descriptions

I’ve used “Bickham Script Pro” with a size of 100px for the title, but you may wish to explore around with a different set of fonts.

step-9_prod_title

step-9_prod_desc

I actually intended to use one of the popular web safe fonts this year, which is Georgia. But I thought, well its a landing page, so let’s add some characteristics to it instead. So instead, I used “Artbrush” to have some artistic style. With a size 30px and 50pt line height, it sits nicely on the margins we’ve created with a decent amount of space for our price tag.

Download ArtBrush Font – http://www.urbanfonts.com/fonts/ArtBrush.htm

To add in a striking price tag that attracts attention, increase the font size to 70px and change its color to maroon color such as #5f0c0c. In addition, as the scenario of this featured pack is very much like a discounted product, emphasizing on it would help greatly. There are multiple ways to go about it, and in this case, I chose a rather simplistic emphasizing by underlining it with a brush.

Next, since we are done with the description of the featured product, we need to have an image to visually explain what it contains and what is it. So, let’s throw in a few images here. Go ahead and use your own images if you want. The images I used here are stock wallpapers from Mac’s library, which are also brilliant works. As the images may be very big, we need to resize it. To achieve a proportionate image without distortion, hold down shift and then resize. Another ideal method to have equal sizes of different images, is to use the height and width percentages.

step-9_prod_price

Now that you have the basic product image on the left side, we need to do some blending to add some depth and making it look like a photo. Simply add in a small amount of shadow, say distance of 2px and size of 5px, and a 5px white border on the inside. If you wish to add some characteristic, you may wish to try tilting it 45°.

step-10_prod_effect

Step 11: The Purchase Button

We have all the image and its description done. But we lacked a button where users can purchase it right away. So let’s create one that would stand out from the rest of the graphics. Use the Rounded-Rectangle Tool to create a 10px radius shape, with the color #f2dd6b. You may wish to type in the words you want first, so that you may better estimate the size of the button you need. Use a web safe font, in this case, we are using Georgia, 25px for the “Purchase it!” phrase.

step-11_purchase_btn

Add in a Gradient Overlay with the color #f2dd6b on the left, and #fced97 on the right, to create a soft gradient. Give it a small shadow such as distance 2px and size 1px, and 1px stroke with the color #edd657, a slightly darker yellow than your gradient.

step-11_purchase_btn_border

Now, here’s another effect we are going to put in to create a double border effect, which makes the button looks very “alive”. Add in an Inner Glow effect, with the color #fdfeff, opacity 75%, choke 0, size 2px. There you go!

step-11_purchase_btn_innerglow

Step 12: What’s In The Pack?

To better present and market a product, its always a good practice to be detailed. Customers want to know what exactly are they purchasing. So do them and yourself a favor by displaying small thumbnails of the package, that is still visible, near the featured product. Get a few more photos and resize them accordingly. To speed up the process, you may want to use the percentage to adjust in order to get equal sizes.

step-12_item_resize

Step 13: Separating The Contents

Since we are creating a simple landing page, you should go ahead and throw in your own imagination and creativity. I decided to stick with just a single post below. Another idea is to fully promote your products below as well, such as featured products, popular picks, etc.

But before you continue, the contents below may differ from the what’s on top. In this case, a single post from the diary. By adding a simple border, you intentionally break the two set of contents apart. This helps to guide the user’s eye to read the top and the bottom separately. Let’s go ahead and add the border by using a pencil with the color #575757, and draw it along the margins we created. Well, I personally thinks that it was a little darker, making it stand out alot more than usual. You may wish to reduce the tone of the color to something lighter.

step-13_separator

Add another white border just below the first one to add some depth and character to it.

step-13_white_separator

Step 14: The Single Post

Let’s go ahead and setup the basic margins for the post. The screenshot below  shows the margines required for the post.

step-14_post

Give a title to it with font size 25px and drop its shadow with opacity 20%, disance 2px and size 1px. Add in a sample text, such as Lorem Ipsum, bold it with a font size of 15px. Place a post date to the right, aligning with the margins set before, as shown below.

step-14_post_date

If you notice, I had a faint white shadow, behind the actual font. To do this, simply duplicate the actual one and change its color to white. This helps to add some depth to it. Alternatively, you may just drop its shadow for the effect. This is just another technique similar to the border technique.

Step 15: Post Image

Nothing could better enhance your website visually, than a well-taken photo or beautiful image. So let’s go ahead and throw in a post image, just under the text. But wait, we need margins to properly set it in place. Follow the screenshot to correctly set the position and size of the image background.

step-15_post_image_bg

step-15_post_image_clip

With the margins set in place, what’s left is to place an image into the designated area. For this tutorial, I shall be using a photo taken by Chicah – Northern Lights, http://browse.deviantart.com/?qh=&section=&q=northern+light#/ductie. Add in the image and position it where you wish to have the beautiful view of it. Don’t worry if its larger than the designated size, photoshop will take care for you. After positioning it, right click on the layer and select Create Clipping Mask. Now, your image is seamlessly “cropped”, “cut” whatever you wish to call it, into the size you have designate it to be. That’s it! Your design template is ready!

Final Touches, Your Creativity

Of course, this design is nothing close to perfect nor is it complete yet. Even at this point, I could name a few areas for improvements, such as the navigation of the post with “Previous Log” or “Next Log”, highlighting what’s so unique about the products, some footer navigation and copyright stuffs, etc. The purpose of this tutorial is to guide you along with the basic setup of a design, and allowing space for you to throw in your creativity.

Conclusion

When it comes to web design, not only are we suppose to visually enhance a website, it is also our responsibility to properly design the content’s layout, as well as the development concerns. Whether is it possible to do so with the current technology? Would it really enhance the user experience with this design? Or does it simple visually enhance it but unintentionally created more problems such as, multiple HTTP requests, loading of images, etc.

I would like to thank you for reading through, as it is my first hands-on in putting up an actual tutorial. Should you have any comments or even to express whether you like it or not, please feel free to add in. I would very much appreciate it!

One last thing though, if you think this tutorial is good and hope to see a PSD to HTML conversion tutorial, please tell me by commenting in this article. If there’s enough responses, I will give it some thought and allocate time for it. Thank you!

Back to top ↑

At The End Of The Day…Get off your seat!

Back to top ↑

Introduction

Part-time jobs, ful-time jobs, client’s work, articles, hobbies, sidelines, etc. Everyday each and everyone of us has got tons of things to do or deal with. Multi-tasking is inevitably, and time is of the essence. In my case, besides meeting clients, my job and career requires me to sit in front of my computer, doing countless of research, practicing, and of course, client’s work. How many a times did any of us leave our seats for a short break? How many of us actually regulate the time we spent in a single position?

What I’ve Learned…

I realized that I’ve been sitting for past 6hours! Well, excluding the time for meal breaks and coffee. Even though we had no choice, nonetheless it is very unhealthy to remain in a single position for so long, as our body stiffens for as long as our muscles don’t move. But I found a simple solution to force me to lift my butt from the seat, and take a short break.

TIME OUT!

Yes, time out. No, I meant the App is called “Time Out”. It has 2 different sets of break: Normal and Micro. It simply means that Normal breaks is the slightly longer working period for the day, and taking a longer break, while Micro breaks are short intervals in between the long working hours, and taking a short break just to stretch our muscles.

You may download the App at http://www.dejal.com/timeout/ and its free. Only problem is: You need Mac. Sadly, I’ve not been recommended about windows version as I’m personally using mac. So, if anyone who has a recommendation, please do let me know so I could include it into this article and share it with everyone!

I love this App for its simplicity and the effectiveness of it. Once the timer reaches your stated amount of working period, e.g. 1hour, “Time Out” fades in and starts counting down the stated amount of break time, along with the update of the next time out. What is so great about this App, is that this fading in actually prevents you from doing anything on your computer, except for CMD + Tab, but you can’t click on anything at all. So, its kind of like forcing you to leave your seat since you can’t do anything for now.

Additionally, the person who created this App understands that there are times where we cannot allow any breaks in between, so giving the user the full amount of control is still a necessity. You may postpone the break for a shorter time, a longer time or simply, skip this break. Of course, you may adjust the Normal break and Micro break accordingly to your liking under the App’s preference menu. Furthermore, you may run a separate applet script to activate or trigger a certain event should you need to, e.g. launching iTunes or play a music.

What’s not to like about this App? I thank David Sinclair of Dejal for producing such a simple App that effectively helps us to stay healthy!

Time Out From Dejal

Download it here: http://www.dejal.com/timeout/

Pomodoro: Time Management

Alternatively, you may wish to try out Pomodoro at http://pomodoro.ugolandini.com/, another time management App for Mac. What it does is basically, allowing you to activate Pomodoro for a task, e.g. “Preparing an article.” with a given set of time, stated in the preference of the Pomodoro App. You may “start”, “stop”, “interrupt” or “resume” your Pomodoro. It makes use of “Growl”, another App for Mac, which unobtrusively notifies you of an event.

Furthermore, you may also manage the logs of different sessions or tasks you have previously done, delete them or simply view your session stats. Additionally, they integrated Twitter into this App, so you may announced that you have started, ended, interrupted or resumed your Pomodoro.

Pomodoro User Interface

Download it here: http://pomodoro.ugolandini.com/

Conclusion

I believe that everyone needs a short break. A break that not only helps us to relief the stress in our body for sitting too long, but also relax and clear our mind so we can continue our work with better efficiency. No matter the importance of what we are doing, health should always be our most prioritized concern. Afterall, we worked hard to live a better life isn’t it?

I hope you enjoy and benefit from this post too! And if you like it, do remember to share it with others. You may also wish to Follow Me on Twitter, to receive the latest news, tutorials, articles, etc about Web Designing & Development.

Coming Up Next… “Useful Mac Apps For Daily Tasks!

CSS Techniques For Beginners Part 1

Back to top ↑

Introduction

I intended to release it during the halloween period, but guess I didn’t make it on time. As the title says, this tutorial was meant for beginners and people who wish to learn some basic CSS. As you might have guessed, there are tons of tutorials and demos out there that goes deeper into CSS. The purpose of this tutorial is not to replaced any others, but simply serves as an additional information for people who are picking up and learning as beginners.

Setting Up A CSS Stylesheet

I believe most of us are equipped with the basic knowledge of setting up a website or a page. But at the same time, there are also many out there who are new yet keen to learn. And as this tutorial is catered to this group, I shall briefly walkthrough this part.

In order for a website or a page to be have beautiful layouts, visuals and effects, you need a stylesheet, also mostly referred to CSS (Cascading Style Sheet). To do this, there are 2 main methods: 1) Inline styling, and 2) Attaching an external stylesheet with the extension “.css”. For the first method:

    The Code: 

  • <head><style type="text/css">
  • <!--- Your CSS Styling here -->
  • </head></style>

And as you can see, the styling should be contained within the “<head>” element, and closed before the “</head>” closes. Another form of inline styling could also be used, as shown below:

    The Code: 

  • <p style="background: #222; color: #fff;">You texts here.</p>

This is rarely used as most people would perform it within the stylesheet. It is also considered a bad practice for a couple of reasons such as, older screen readers are unable to see these styles, making your page size larger, not separating design from contents and maintaining it could cause headaches.

But there are also situations where such methods could be better than others. For example, if you only need to change a particular portion of your content, you might consider using this method. Or when used together with javascripts, small alterations are made using such inline styles as they are easier. But if a particular set of styles will be repeatedly used, creating an extra class  for it is the most ideal instead.

For the second method:

    The Code: 

  • <style rel="stylesheet" href="stylesheet.css" media="screen" />

This method is the most commonly used, considered the best practices and standard across all platforms. Media refers to the targeted devices or platforms, with values such as projectors, print, screen. Unless otherwise stated, the default for the media attribute will be set to “all”.

Now, I believe you are ready to get started on your CSS stylesheet! So, let’s get the ball rolling.

CSS Reset

CSS Stylesheet

Why do you need to reset? Well, by default, certain elements came along with its own style in different browsers, such as margins, paddings, etc. In order to gain control of every elements and to reduce inconsistencies, most people would use a CSS reset, to set all elements style back to 0 or none. If you know that you need to style up most of the elements, a reset is suggested so that you may not stumble upon some deforms later.

Here’s the code for CSS reset(Eric Meyer’s CSS Reset):

    The Code: 

  • html, body, div, span, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,abbr, address, cite, code,del, dfn, em, img, ins, kbd, q, samp,small, strong, sub, sup, var,b, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td,article, aside, figure, footer, header,hgroup, menu, nav, section, menu,time, mark, audio, video {
  • margin: 0;
  • padding: 0;
  • border0;
  • outline0;
  • font-size100%;
  • vertical-alignbaseline;
  • backgroundtransparent;
  • }

In most cases, such resets suffice most projects, and used by majority. Alternatively, you may also use YUI’s Base CSS. No matter whose or which version you use, it does the same thing altogether. To reset and reduce inconsistency.

CSS3: Webkit, Moz, O, Khtml

Basically, I meant different browsers. “webkit” refers to Safari and Chrome, while “moz” refers to mozilla firefox, “Khtml” refers to Konqueror Browsers, and lastly, “O” refers to Opera. Why use short-forms then? When CSS3 was introduced, different browser vendors have adapted their prefix into it, as most of the new features are still under-going testing and developments. So, if a CSS property has the vendor prefix, e.g. “-webkit-border-radius”, it means they are still under testing for that particular browser, and such are still not under CSS’s specifications. Note: Using such extension will not pass the CSS validation.

Basic format of a vendor prefix:

    The Code: 

  • '-' + vendor prefix + '-' + CSS property: value;

Examples of different vendor prefix:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px;
  • -khtml-border-radius: 10px;
  • -o-border-radius: 10px;

CSS3 Commonly Used Features

Since the day CSS3 was released, many bloggers and designers have adopted the use of its new features. Although they are still under development and testing, nonetheless they still work in most major browsers.

Box shadow

As the name indicates, it casts a shadow onto any elements such as “<p>”, “<span>”, “<div>”, etc. To enable box shadow on your content element, just initiate the vendor prefix + box-shadow: x-offset y-offset blur radius #color, as shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px #333;
  • box-shadow: 1px 1px 2px #333;

The “x-offset” and “y-offset” simply means how many pixels should the shadow cast from the element. Color could be indicated either in hexadecimal form, the color’s name or in rgba( CSS3 new property). An example of the 3 methods are shown below:

    The Code: 

  • -webkit-box-shadow: 1px 1px 2px #333;
  • -moz-box-shadow: 1px 1px 2px lightblue;
  • box-shadow: 1px 1px 2px rgba(33,33,33, 0.5);

You first input the color in R-G-B form which is only numerical sets like the above, then declare the amount of transparency, between 0 to 1, you wish to have for that color. Of course, its optional to be declared. If it is not stated, it shall be default value of “1”.

To cast an inner shadow on an element, you may have to add an additional value in front, as shown below:

    The Code: 

  • -webkit-box-shadow: inset 1px 1px 2px #333;
  • -moz-box-shadow: inset 1px 1px 2px lightblue;
  • box-shadow: inset 1px 1px 2px rgba(33,33,33, 0.5);

Yes that’s it. Just one word “inset”, your box-shadow shall now be inner shadow instead. Of course, “x-offset” and “y-offset” can be of value “0” while having a blur radius value of more than 1, the shadow will still appear.

html5-css3 and future of our web

Border Radius

Seen these beautiful boxes across the web? Before CSS3 came out, people used various methods to mimic the way an actual rounded box or container looked like with huge chunk of CSS and HTML elements nesting, image replacement in png, etc. Now, its easier than ever to get one of these beautiful feature appear on your pages. Here’s how to do it:

    The Code: 

  • -webkit-border-radius: 10px;
  • -moz-border-radius: 10px
  • border-radius: 10px;

Easy? Yeah, of course! With just 3 lines of code, you can execute the rounded-corner effect to your elements. Why include the last one though? Well, it simply serves like a prevention measure. Should the CSS properties be included into CSS specifications, or that the vendor had removed their prefixes, the last line of code will be used instead, thus not losing the effect.

Multiple Background

This is also another fabulous feature added, which could significantly have an impact on designing for websites. instead of using multiple “<img>” elements within a container, or declaring multiple “<div>” elements with their background set within a container, this additional feature solves it all.

    The Code: 

  • background: #222 top left no-repeat; /* Fall back */
  • background: #333 top 11px no-repeat;
  • background: #111 bottom left no-repeat;
  • background: #444 left repeat-y;
  • /* Combining the above 4 background property into 1 below. */
  • background: #222 top left no-repeat, #333 top 11px no-repeat, #111 bottom left no-repeat, #444 left repeat-y;

As you can see, it is basically combining 4 sets of background property value into 1 single background property. Nothing difficult nor any changes to the way a background is declared as before. Simple and neat. But do note though, like the sample I’ve shown above, it is really good practice to have fall-back preventive measures. Think of “What if..?” situation, and you will understand why.

Text Shadow

Reduce the work load of the browser from rendering a lot of images. Save the trouble of doing it in photoshop and saving as png for the text shadow effect. You need none of those now, cause CSS have finally include this feature in CSS3. Just like box shadow, the values are the same way of declaring, with “x-offset” “y-offset” “blur-radius” “color”. Simple huh? Yup, that’s it. On top of that, it works in all major browser except IE 7 and below, I believe.

    The Code: 

  • text-shadow: 0px 1px 2px #333; /* Fall back */
  • text-shadow: 0px 1px 2px rgba(33,33,33, 0.5);

Web Fonts

create beautiful web with css3

Well, if you did follow my blog and some of the simple tutorials I made, I believe this is familiar. In this case, I shall not touch on it much, except to put a sample up here. If you really are interested in this, take a look at my tutorial: “The Beauty Of Typography.” By the way, yes it is really beautiful. One of the important element that a design won’t miss out. I’m pretty sure you wouldn’t want too, since everyone loves to beautify their own websites.

    The Code: 

  • @font-face { font-family: "Chunkfive"; src: url('chunkfive.otf'); }

Gradient Backgrounds, Colors

Yes, you may now have gradient colors across your website, pages, elements, wherever you want. Only problem is, different vendor has a different way of implementing it. There are tools out there that can assist you in generating a gradient color, but I believe it is in general good for anyone to know. This is the standard declaration of the gradient effect:

    The Code: 

  • /* Webkit Radial and Linear */
  • background: -webkit-gradient( radial, point1, radius1, point2, radius2, from(color), to(color));
  • background: -webkit-gradient( linear, point1, point2, from(color), to(color));
  • /* Mozilla Radial and Linear */
  • background: -moz-radial-gradient( point1, radius1, point2, radius2, from(color), to(color));
  • background: -moz-linear-gradient( point1, point2, color, color);

In the radial type, point1 and radius1 defines the effect of the inner circle, while point2 and radius2 defines the effect of the outer circle of the gradient. Simply put, point1 with radius1 will apply the “from(color)” to point2 with radius2 “to(color)”. Sounds confusing? Well, imagine you are dragging your mouse from one point to another. The 2 points you made with your mouse, are exactly like point1 and point2 in this situation. The points may be represented in pixels, position or percentage. Below is an example of a gradient in “webkit” and “moz”:

    The Code: 

  • #content #main .post {
  • background: #23adad; /* Fall back */
  • /* Webkit Gradient Background */
  • background: -webkit-gradientlinear,left bottom,left top,color-stop(0.06, rgb(119,158,18)),color-stop(0.53, rgb(155,190,45)));
  • /* Mozilla Gradient Background */
  • background: -moz-linear-gradient( center bottom,rgb(119,158,18) 6%,rgb(155,190,45) 53%);
  • }

As you can see, “webkit” and “moz” has a different way of implementing a gradient color. Not a lot of difference, but could be confusing for anyone on first few tries. Notice that there’s an additional “background” property declared on the first line? Well, this serves as a fall-back scenario.

In every piece of design, scripts and layout, we need to consider and ask ourselves this question “What if…?”. In this case, What if users browse your pages with an old browser that doesn’t recognize gradient property? Then, CSS shall take the value of the first line of the same property, as page rendering reads from the first line to the last. Therefore, whichever property’s value placed closest to the last line, shall replace the ones declared on top.

So, what’s with the multiple ID selector doing there? Well, I shall be covering on this in the next topic.

Grouping And Nesting Selectors

When it comes to grouping and nesting, it is about organizing a set of selectors that belong to a group or section like “headers”, “footers”, etc, specifically targeting a class or ID that exist within the declared parent selectors, or modifying a group of selectors in which you wish to apply same styles and positioning.

grouping and nesting selectors

As I mentioned before, page renders from the first line to the last. CSS does the same. Except that when it comes to the selectors, it is not from left to right. It is from right to left, which means descendent selectors to ancestor selectors. Whichever placed on the left is considered the outer most container.

Nesting Selectors

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .post p span { color: lightblue; }

It is generally a good practice to do this as it is easy to trace back to its parent element, without having to worry about over-ridding each other. Imagine this, you want lightblue for this first paragraph in “#content #main”, and red for the second paragraph in “#content #main .post”.

    The Code: 

  • #content #main p { color: lightblue; }
  • #content #main .post p { color: red; }

If you were to settle yourself with just the first set of style, you will see that whatever paragraph texts inside “#main”, will all rendered as lightblue. But if you include the second piece of styling, you will notice that whatever paragraph texts inside “.post” will turn red, but paragraphs oustide “.post” will still be blue.

Try doing this yourself, by copy pasting this set of code. You will see the differences:

    The Code: 

  • <div id=”content”>
  • <div id=”main”>
  • <p>test</p> <!– Paragraph inside ‘#main’ is lightblue –>
  • <div class=”post”><p>test</p></div> <!– Paragraph inside ‘.post’ is red –>
  • </div>
  • </div>

Grouping Selectors

    The Code: 

  • #content #main .post, #content #main .date { background: #222; }
  • #content #main .post a, #content #main .comment a { color: lightblue; }

Notice the comma between 2 sets of selectors? That is a grouping method. Why use grouping then? Here’s why:

    The Code: 

  • #content #main .post { background: #222; }
  • #content #main .date { background: #222; }

Aren’t they the same styling? By declaring it twice, CSS has to render extra lines. Imagine if you had a lot of styling to do for each elements, but are the same. Grouping is as simple as that. It helps you get organized without repeating yourself, reduce extra work for the browsers, smaller size of your file and maintaining of the stylesheet easier.

IE Conditional Stylesheet

Yeah, apparently Internet Explorer needs our unconditional love before it is willing to display whatever we want. A common practice is to include conditional commenting that only Internet Explorer would recognize.

For All IE Versions

    The Code: 

  • <!--[if IE]>
    <link rel="stylesheet" type="text/css" href="ie.css" />
    <![endif]-->

For IE Version 7 & Below

    The Code: 

  • <!--[if lt IE 8]>
    <link rel="stylesheet" type="text/css" href="ie-7.css" />
    <![endif]-->

For IE Version 6 & Below

    The Code: 

  • <!--[if lt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-6.css" />
    <![endif]-->

For IE Version 8 & Above

    The Code: 

  • <!--[if gt IE 7]>
    <link rel="stylesheet" type="text/css" href="ie-8.css" />
    <![endif]-->

As shown, these methods are called conditional commenting that should be located within “head” section of a HTML page. “lt” simply means “less than” and “gt” means “greater than”, but you don’t have to include all of them though. As more and more people use latest technology to present information online, users have to follow the lead and upgrade their browsers. And problem only arise when users used IE 7 and below, so targeting IE 7 and below should do just fine.

Resources

If you wish to step  into the depth of CSS, you may wish to take a look at these articles.

Smashing Magazinehttp://www.smashingmagazine.com/2010/04/07/css-specificity-and-inheritance/

Tutorial Zine – http://tutorialzine.com/2010/10/css3-animated-bubble-buttons/

Web Designer Wall – http://www.webdesignerwall.com/trends/css3-examples-and-best-practices/

Gradient is confusing at times. And it is times like that, a simple tool is the hero. Here’s one of the many out there I would use for simple gradient effects.

CSS3 Gradient Generator – http://gradients.glrzad.com/

Having trouble picking colors to use on CSS? These tools could help.

Adobe’s Flash Kuler – kuler – Online Color Manager

Color Scheme Designer 3 – Color Scheme Designer 3

I hope you enjoy this simple tutorial I’ve compiled, and certainly hope you learn at least something from this tutorial. I would of course, appreciate if you would share this with others who are also interested by using the social icons located below. Thank You! Cheers.

3Days: Some Useful Articles I read

Back to top ↑

Everyday, all of us read a lot of articles around, but some are miscellaneous while others are useful. I would like to share with you some of the articles I’ve read for the past few days. I felt that they are both meaningful and useful in my career as well as another bloggers out there too. Those who had interest in establishing a good blog, would find the articles below very helpful. Enjoy!

One Extra Pixel

oneExtraPixel

Article – How To Successfully Market Yourself As A Freelancer

Graphic Design Blender

graphicDesignBlender

Article – See Success By Becoming A Goal Driven Designer

Notes @ Envato

notesEnvato

Article – Introduction To The Envato Marketplaces: How To Start Passive Income

VisionwidGet

visionwidget

Article – 25 JQuery Animation Effects Tutorials

Trip Wire Magazine

TripWiredMagazine

Article – Why Most Bloggers Don’t Make Any Money

This list of articles are now located under Resources page, for future references, and people who missed it. Have a look once in a while! That’s the end of the day for me. *Lights out*