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

Posts tagged ‘CSS’

Step By Step: Create a Slideshow With JQuery & CSS3

Sliding-Gallery With JQuery and CSS By Gray Junior

Introduction

Skills Required: Basic JQuery, HTML & CSS

Difficulty: Easy

Previously, I’ve released a copy of my JQuery + CSS Slideshow for everyone to download, here. A few days later, I figured besides sharing, I could probably teach a thing or two of it. As simple as it is, if you’re able to finish up something like that, you will have no problem doing your very own slideshow in future!

What You Will Be Doing

Jquery and CSS slideshow By Gray Junior

How confusing can it get? Well, if you have experience in JQuery, basic HTML and CSS, you’ve nothing to be afraid of then! Really, it requires just basic knowledge of the languages to make it work. Only problem is, figuring out the “How”. So, let’s get started shall we?

Download Script v1.1 ↓View Demo

HTML & CSS

To even begin buildiing the mechanism of the slideshow, we need to visualize its layout. So go ahead and start setting up the page.

Slideshow Layout in HTML

<div id=”container”>

<div id=”header”>

<h1>CSS + JQuery Sliding Gallery</h1>

</div><!- – end of #header – ->

<div id=”main”>

<div id=”actions”>

<a href=”#” id=”previous”>Previous</a>

<a href=”#” id=”next”>Next</a>

</div>

<ul id=”slideshow”>

<li>

<img src=”images/flow 1.jpg” alt=”Slide01″ />

<p>Slide #01. This is a sample text.</p>

</li>

<li>

<img src=”images/flow 2.jpg” alt=”Slide02″ />

<p>Slide #02. This is a sample text.</p>

</li>

<li>

<img src=”images/flow 3.jpg” alt=”Slide03″ />

<p>Slide #03. This is a sample text.</p>

</li>

</ul>

</div><!- – end of #main – ->

</div> <!- – end of #container – ->

The slides are contained in an Unordered List, with each image inside a LI element. We shall be using the container “#main” as the holder for each of the slides. In other words, the restrictor for the size. By placing the container “#slidehsow” evenly on each side using position absolute, we now form a border around the slides. Let’s set the width of each image to 100% so that it scales along with the container “#main” for flexibility. As you can see, We have 2 other links, the “Next” and “Previous” buttons, which are just set outside the Unordered List. This is so that it will be unobtrusively place itself within the container “#main” and not bother the unordered list areas. Now, let’s move on to the CSS portion, which you will get a clearer picture of the explanation above.

Slideshow Styling in CSS: CSS Reset

/*===============================================

CSS TOTAL RESET

===============================================*/

html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, font, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {

margin: 0;

padding: 0;

border: 0;

outline: 0;

font-weight: inherit;

font-style: inherit;

font-size: 100%;

font-family: inherit;

vertical-align: baseline;

}

:focus {

outline: 0;

}

This set of codes, as the comment stated, will reset some of the default styling inconsistency between different browsers to 0 or none. In other words, standardizing them. Moving on to the element styling.

Slideshow Styling in CSS: Global Elements

/*===============================================

GLOBAL ELEMENTS

===============================================*/

body, html {

padding: 20px;

font-family: Georgia, Helvetica, Verdana;

font-size: 12px;

background: #111;

color: #fff;

}

h1 {

font-size: 35px;

text-align: center;

text-shadow: 0 1px 1px #111;

}

img {

width: 100%;

height: 100%;

}

a {

color: #555;

text-decoration: none;

z-index: 10;

}

a:hover {

color: #222;

}

p {

position: absolute;

margin-top: -110px;

padding: 10px;

width: 100%;

height: 100%;

background: rgba(11,11,11, 0.7);

}

.button { //USED FOR THE ACTION LINKS

padding: 10px 20px;

background: #eee;

}

.next { //POSITIONING OF “NEXT” LINK

float: right;

margin-right: 20px;

}

.prev { //POSITIONING OF “PREVIOUS” LINK

float: left;

}

.box-shadow-up { //UPWARDS BOX SHADOW

-o-box-shadow: 0 -1px 5px #222;

-moz-box-shadow: 0 -1px 5px #222;

-webkit-box-shadow: 0 -1px 5px #222;

box-shadow: 0 -1px 5px #222;

}

.box-shadow { // NORMAL BOX SHADOW

-o-box-shadow: 0 2px 5px #000;

-moz-box-shadow: 0 2px 5px #000;

-webkit-box-shadow: 0 2px 5px #000;

box-shadow: 0 2px 5px #000;

}

As you can see, its pretty straight-forward. Very much what you may have learned in the school and the usuals. The only new things are the CSS3, such as box shadow and RGBA. You may notice that I had seperated each and every elements with their own class, such as box-shadow, button, etc. The reasons for such effort is to better organize your styling. IDs are generally used for javascript or php to identify an element, so it is always a good practice to separate designing and styling from positioning and defaults. In other cases, it could also be a certain same set of styling will be re-used again and again. Instead of increasing the length and size of your stylesheet, a smarter way would be to use a class to attach the same set of styles to different elements.

Slideshow Styling in CSS: Slideshow Elements

/*===============================================

SLIDESHOW ELEMENTS

===============================================*/

#container #main {

position: relative;

padding: 10px;

margin: 30px auto 20px;

width: 800px;

height: 400px;

background: #eee;

}

#container #main #actions { /*POSITIONING OF LINKS */

position: absolute;

top: 50%; /*POSITION AT CENTER */

margin-top: -25px; /*OFFSET ITS HEIGHT */

width: 100%;

z-index: 10;

}

The “#action” ID are used for the “previous” and “next” links, that shall change the slides. In this case, I would like to position them in the center so that it would be more noticeable. In order to do that, I used a simple line of code to achieve centered positioning: “top: 50%”. If you have done that, you would notice that it isn’t exactly centered. That’s because our links have a size rather than a single line. So to offset that, we set its margin-top to -25px.

#container #main #slideshow {

position: absolute;

/* POSITION TO LEAVE 10PX BORDER */

top: 10px;

bottom: 10px;

left: 10px;

right: 10px;

background: #fefefe;

list-style: none;

overflow: hidden; /* HIDE CONTENTS */

}

#container #main #slideshow li {

/* TAKING THE SIZE OF THE SLIDESHOW */

width: 100%;

height: 100%;

overflow: hidden;

}

By setting the #slideshow’s Top, Right, Bottom, Left to 10px, not only does it create a 10px border-like, it also allows the slideshow to inherit the size of its outer container “#main”.

JQuery

Having the layout and looks setup, we are now ready to move on to developing the slideshow’s mechanism. First, Let’s declare some of the variables for easier calling later on.

Slideshow’s Mechanism

// DECLARING VARIABLES FOR EASIER CALLING

var slideshow = $(‘#slideshow’),

main = $(‘#main’),

actions = $(‘#actions’),

next = $(‘#next’),

previous = $(‘#previous’),

desc = slideshow.find(‘p’);

It’s pretty self-explanatory as well if you know basic JQuery. Next, we shall start declaring the function for the mechanism.

(function($) {

$.fn.slider = function(settings) {

//THE DEFAULT SETTINGS FOR THE SLIDESHOW

var defaults = {

speed: 800,

actions: true,

width: 800,

height: 400

};

//EXTEND THE SETTINGS SO USER MAY CUSTOMIZE

var settings = $.extend(defaults, settings);

What this does is basically, to declare a set of given settings with default values, and then extend it to allow users to customize it by setting their own values. The extend is an API of JQuery’s massive library, that allows the merging the contents of 2 or more objects together into the first object in its parameter.

//CHANGE THE SIZE OF THE SLIDESHOW

//TO THE SIZE USER DECLARED IN SETTINGS

main.css({

“height”: settings.height,

“width”: settings.width

});

Of course, when you allow the users to set their own values, you need to apply them to make changes. The first basic settings to apply would be its width and height. So to call on the values declared in the settings, we use “settings.width” or “settings.height”, where “settings” is the variable’s name you used.

function animation(action) {

//IF USER CLICKS ON NEXT LINK

if(action == “next”) {

//HIDE THE FIRST SLIDE

$(‘li:first’).animate({

height: 0,

opacity: 0

}, settings.speed, function() {

//SHOW IT WHEN ITS APPEND TO

//THE BOTTOM OF THE LIST

$(this).animate({

height: settings.height,

opacity: 1

}, ‘fast’);

//REMOVE SLIDE AND APPEND AT THE BOTTOM

$(this).remove().appendTo(slideshow).show();

});

This function handles all the animation you would see in the slideshow. The parameter passes the direction in which the slideshow should animate. If the user presses “next” then the slide that is currently showing will have its height and opacity reduced. On its second part, you notice that the height is now set back to “settings.height” and opacity 1. That’s because we would still want the slide appeared as the last of the list of slides, but hidden. As processed by the last line, this slide will be removed and then append back to “#slideshow” as the last one, and shown with “show();”. Sounds confusing? Well not really if you’re able to visualize it. I shall assist you in doing that with the snapshot examples below:

Before Clicking Next:

before-clicking-next

After Clicking Next:

after-clicking-next

} else {

//HIDE THE LAST SLIDE

$(‘li:last’).css({“height”:”0″,”opacity”:”0″});

//REMOVE THE LAST SLIDE AND

//PREPEND AS THE FIRST SLIDE

$(‘li:last’).remove().prependTo(slideshow);

//ANIMATE AND SHOW THE SLIDE

$(‘li:first’).animate({

height: settings.height,

opacity: 1

}, settings.speed);

}

}

If user clicks on “previous” link, this set of codes will be activated. What it does is basically a reversed flow of the “next” animation. It hides the slide on the last of the list, removed it and prepend it back to “#slideshow”. The key in this animation is prepend and append. The difference is prepend inserts it on the top/first in the list while append inserts it on the last/bottom of the list(Look it up on JQuery’s Documentation). Once prepended, it will then animate to the given set of height and opacity 1.

Following So Far?

Well, it wasn’t that difficult right? If you can visualize it, its pretty easy to do a simple slideshow. The major bits are done, and we are left with tweaks and the action links.

// ONCLICK EVENT FOR NEXT SLIDE LINKS

next.click(function() {

animation(‘next’);

return false;

});

// ONCLICK EVENT FOR NEXT SLIDE LINKS

previous.click(function() {

animation(‘previous’);

return false;

});

It’s pretty straight-forward here. We bind the click events to the action links and call the function with the parameter of the direction. Returning false will prevent the page from re-loading.

//HIDE AND SHOW THE LINKS IF ACTIONS IS TRUE

if(settings.actions) {

actions.css({“opacity”:”0″});

// MOUSE ENTER EVENT FOR ACTIONS TO APPEAR AND DISAPPEAR

main.mouseenter(function() {

actions.stop().animate({

opacity: 1

}, ‘fast’);

}).mouseleave(function() {

actions.stop().animate({

opacity: 0

}, ‘fast’);

});

}

}

})(jQuery);

Here, we check to see if user allows the “action” setting to be “true”. If so, we will hide the links on initial loading, and only appears when the mouse hovers over the “#main” container. Simple as that!

Conclusion

This is a simple tutorial to explain how a basic slideshow is done. With the newly introduced CSS3, many new creative slideshows are appearing, such as rotation, scaling, etc. Slideshow is very common nowadays and is used for many different purposes. Its generally pleasing to see with minimal effects, and helps to feature some of the content a website or blog has for their users.

Do you enjoy this tutorial I compiled for you? If you do, I would really appreciate if you share it with others through the social media below! Thank you!

Download Script v1.1 ↓

Related Post

JQuery & CSS3 Slideshow on 28 Dec 2010.

Advertisements

JQuery & CSS3 Slideshow

Sliding-Gallery With JQuery and CSS By Gray Junior
You probably have seen a slideshow appearing at many blogs or website, that actually served to help promoting featured products, discounts, etc. In this article, I will be sharing with you a simple slideshow that makes use of JQuery and CSS 3, with various customization for you. This current version features a simple “next” and “previous” link to preview the slides. As the name suggests, each slide is presented in a sliding motion upwards and downwards. For other purposes or usage that requires a small description, I have also included a small section for each slide where you may add in texts.

To initialize the slideshow script, just insert this codes into your page:

Initializing The Slideshow

$(document).ready(function() {

$(‘#main’).slider({ // SELECT YOUR CONTAINER/ELEMENT TO USE FOR THE SLIDESHOW

speed: 1500, // SPEED OF THE SLIDING ANIMATION

actions: false, // TO TOGGLE FOR INITIAL DISPLAY OF THE “NEXT” AND “PREVIOUS” LINKS

width: 900, // THE WIDTH OF THE SLIDESHOW

height: 500 // THE HEIGHT OF THE SLIDESHOW

});

});

You may customize your slideshow with the various options stated above, speed of the slides, display of the action links and the size of the slideshow you want. This script has been tested on the major browsers (firefox, safari, chrome) and I have also debugged most of the issues. Should you encounter any problems with it, do leave me a message or e-mail and I will be glad to assist you out. It is also available free of charge for both personal and commercial projects under the creative common license. (I’m unable to provide any demo of it as I do not have my own server yet, apology!)

Download Script v1.1 ↓Snapshot→

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…

Mega Collection Of Cheatsheets for Designers & Developers

CSS3 Cheat SheetCheatsheets and various quick reference guides are available for almost any type of software and language these days. Unfortunately they’re not always easy to find when you actually need them. This is why I decided to take some time to gather up as many as possible and share them with you here!

View Article…

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.

10 Amazing Flash Websites

Back to top ↑
I have released an article over on my sideBlog @ Mini Crini. I hope you guys would take a few moments to have a look at it. The article features  a few hand-picked flash-based websites that I have been looking around for the past few days, in which I felt they are incredibly good. Not only visually stunning, flashy animation, some of it are built to  transverse a strong meaningful, and purposeful message to the world. Enjoy the article!

10 Amazing Flash Websites @ Mini Crini10 Amazing Flash Websites @ Mini Crini

You may read the article at http://minicrini.wordpress.com/2010/10/29/10-amazing-flash-websites/

The Beauty of Typography

Back to top ↑

Introduction

Seen those beautiful letters across the web, on the posters, graphics and arts? I’m sure most of you would love to put those up on your own website. So, I hope at the end of this article I am capable enough to teach you some simple techniques that might help you achieve what you want.

What is Typography?

I shall just briefly touch on what typography is, since I believe most of us have already heard of it or have come across it.

“Typography is the art and technique of arranging type, type design, and modifying type glyphs. Type glyphs are created and modified using a variety of illustration techniques.” Quoted from Wiki

It simply means that our text is composed not only readable but also visually satisfying, or creates a mode of attention for readers. To know about it, you may wish to read wiki’s full article, or just google up “typography”.

http://en.wikipedia.org/wiki/Typography

Before I get started, I’m going to show you a few examples of some beautifully crafted websites that shows how beautiful typography can be. This might help you to get some knowledge of what typography really is, and hopefully inspire you with some great ideas in designing your own website.

@font-face for CSS3

After having a good look at how others manipulate these beautiful fonts, I’m sure you would love to have those as well. There are a few ways to achieve those effects, which I will share on the later part of the article. Now, let’s take a look at the CSS method. Its easy and simple to implement a new font in your CSS, for you to use on your contents.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: url(Walkway_Bold.ttf); }
  • @font-face { font-family: 'New Font Name' src: url('http://www.example.com/newfont/Walkway_Bold.ttf'); }

The code above shows two basic methods in using a custom font on your website. The first one uses a font that you have uploaded to the server, in the same directory, while the second one will retrieve the font from an external source. In both situation, the fonts are provided/downloaded by your server or other servers you have linked to. Let’s take a look at using the local fonts.

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf); }

This set of codes simply uses what is already pre-installed in the user’s computer, thus no downloading of fonts is performed. But what differentiates the second set of code from the first, is that if it happens that the user do not have that font installed locally, it shall then be downloaded externally.

Additionally, you may provide a format declaration for your new fonts if there is a need to. The use of the format values are usually for platform-specific font data. In this article, I will not go into that specific aspect. This is an example:

    The Code: 

  • @font-face { font-family: 'New Font Name' src: local(Arial) format('truetype'); }
  • @font-face { font-family: 'New Font Name' src: local(Arial), url(/fonts/Arial.ttf) format('truetype', 'opentype'); }

If you do require a list of the type of formats available, these are the few of which are used.

String Extension
“Truetype” .ttf
“Opentype” .ttf , .otf
“Truetype-aat” .ttf
“Embedded-opentype” .eot
“SVG” .svg , .svgz

The techniques above only embeds the font into your “font-family” list. In order for you to use it in your content, you will have to include it in that particular element’s “font-family” selection. An example would be:

    The Code: 

  • @font-face { font-family: 'Walkway' src: url(Walkway_Bold.ttf); }
  • h1 { font-family: ‘Walkway’, Arial; font-weight: bold; font-size: 20px; }

Notice that a second font is declared? Just like your normal selection of “font-family”, if the first font is not available, the second one shall be used. In this case, I selected a web safe font. Speaking of web safe, now that I have shared the technique of applying a custom font, it is always good to know what are the fonts that are considered safe.

Web Safe Fonts

The term “Web Safe Fonts” indicates that the list of fonts that are available throughout all platforms. These fonts are also common in our local font library, therefore there is in no way such fonts, when used on web, will be unavailable. Just to list out a few, these fonts are considered web safe.

Serif Fonts

  • Cambria
  • Constantia
  • Georgia
  • Palatino Linotype
  • Times New Roman

Sans Serif Fonts

  • Arial
  • Arial Black
  • Calibri
  • Century Gothic
  • Helvetica
  • Impact
  • MS Sans Serif
  • Tahoma
  • Verdana

Monospaced Fonts

  • Courier New
  • Courier

If you wish to take a look at a list of beautiful web safe fonts, visit:

http://www.webdesigndev.com/web-development/16-gorgeous-web-safe-fonts-to-use-with-css

Where Do I Get These Fonts?

Now that CSS3 and all major browsers support such techniques, more and more font library websites, tutorials, etc, surfaced on the WWW World. These are the few places I frequent to see some beautiful and popular fonts people like:

There are of course, many others out there. Seek a few out to widen your library as some beautiful fonts are not available throughout all sources.

But please do take note about copyrights and infringements. These people created beautiful fonts for us to use for free, only to hope that we do not abuse or misuse them. So do respect their work. Some may state “free for personal use only”, “Free for commercial use” or both, while others could possibly be copyrighted or under Creative Commons License: http://creativecommons.org/licenses/by-sa/3.0/

Are There Any Other Methods?

Of course there are many other methods available online. The web has everything that you may possibly need. As promised, I will be sharing other methods you could use to achieve the same effect. The first, of course is paid services. There are a few websites that provide Web Font Embedding, but they require either annual/monthly payment, or one-time fee. I shall touch on those later.

Let’s go on to free. Something which everyone loves the most. Thus far, I have seen many instances of Google font usage. They provide easy implementation, most important of all, free, as well as some custom fonts. Although not much selections in their library yet, it helps you to break free from those common and boring fonts. I’m going to guide you through this, as some might be afraid to meddle with the source codes of their website.

Google Font Library

Google Font Library @ http://code.google.com/webfonts

Navigate yourself through Google’s web font library. Then, from there choose a font you wish to use on your website.

Google Font Details

Google Font Details

Google Character Sets

Google Character Sets

There are 4 tabs in this page, mainly: Specimen, Character List, Description, Get The Code. In the Specimen tab, you will get to see the various styles and sizes of the font after you have selected the font. While at the Character List, well, you will see the font’s character style. It is pretty straight forward here.

Google Embed Font Code

Google Embed Font Code

Here is the key to get your new font to work on your website. The first line of code is the Stylesheet’s link from Google’s CDN server. What you have to do here, is to scroll all the way to the top of your source code, then paste that line of code within the “<head></head>” portion. Below is a screenshot of an example for you to take a look.

Place it within the header

Place it within the header

Just as the guide I have provided above, declare the new font in the element you wish to use. Now, have you got it? Well, there you go! You have a new and beautiful font on your own website! If you do happen to like the font, or wish to upload to your own server, google allows you to download the fonts.

Google Download Font

Google Download Font

Alternatively, you may wish to use the common way to beautify your website- the PNG format. Get the font from the libraries, open up photoshop, style your word, save it for web devices in PNG format. Then, set it as either “<img/>” or as background in CSS. Of course, the latter is considered less efficient as it is not as SEO friendly as text-based contents or image tags with title/alternate text attributions.

If I Wish To Use Paid Services..?

Well, if after reading my tutorials on embedding your own fonts, you find that you would prefer such services provided to you instead, there’s a list compiled online, for your ease.

For more details about which is better, do check out this article @ Smashing Magazine.

http://www.smashingmagazine.com/2010/10/20/review-of-popular-web-font-embedding-services/

Conclusion

As CSS3 and HTML5 continues to flourish in the WWW world now, more and more designers or website owners are cutting down the usage of image. It helps their website to be more user-friendly, saves loading time, a more professional look( people would go WOW! how did they pull that off without an image?!), and easy to implement.

Using animation from JQuery or recent CSS3, we created a more interactive website for people to browse. Typography has become a big part of a design, content as well as a form of art. Yet without a proper way to implement such typography, we have to resort to using images. With @font-face, and it being supported in all browsers now, we can easily pull off beautiful and stunning typography. Say good bye to boring and common contents! Hope this article will be useful for people who has interest in typography.