Stop Stressing, Start Living

November 26, 2013 Leave a comment

ImageStress can KILL you Softly !!!

My eyes were popping, my heart was pumping in my chest and my hands were shuddering!! No, no one wanted to kill me. Believe it or not, I was delivering a kind of project at work. Didn’t you EVER experience these feelings especially when the “deadline” ghost is chasing you everywhere. Stress was my theme for the whole week; I am not exaggerating but in a moment I felt I’m really dying!!. Guess what? Stress is deadly!! Stress can kill you softly. So it’s time to check the major health effects caused by stress!!

Diabetes:

Diabetes occurs when the body produces too little insulin to process all the sugars in your body. As these sugars build up, you may experience a number of health problems including thirst, headaches and weight loss. And over time, this condition can cause heart attack, kidney disease and eye damage. So calm down and don’t kill yourself.

High Blood Pressure: The silent Killer:

Blood pressure gets so high because of your sudden stress, as your brain gets confused about the state you are in. High blood pressure can result in heart enlarged, brain damaged and more. So learn how to manage your stress because there is nothing brutal as stress is.

Gaining more weight:

People under high levels of stress often experience fluctuations in weight – as anyone who’s ever taken comfort in candy bars knows all too well. However, if your weight gain gets out of control, you could be putting yourself at risk for developing cancer, heart problems, high blood pressure, diabetes, stroke, sleep apnea, liver disease and gallbladder disease.

Your immune system gets weak:

If you have noticed yourself getting sick when you are most stressed; it’s not a coincidence. YES, your body can’t handle all and things are getting out of control. So time to calm down and forget about your stress.

Depression is a Serious disease:

Depression can’t be taken lightly. It’s one of the serious diseases, so if you find yourself trapped in despair, then its time to for the professional help.

Cancer:

While there’s no proven link between stress and cancer, it’s widely accepted that excessive stress is a risk factor for developing a type of this deadly disease.

Yes, life isn’t rosy and sometimes things get out of our control. But remember it is just as deadly as any disease. So beware and share with your friends these major health effects.

Advertisements

Pure CSS Pagination

May 3, 2013 Leave a comment

In this tutorial, I’ll teach how to create basic and pure CSS based cross browser compliant pagination without any jQuery.

Step 1 CSS

.pagebar {
font-family: Arial, Helvetica, sans-serif;
font-size: 11px;
font-size-adjust: none;
font-stretch: normal;
font-style: normal;
font-variant: normal;
font-weight: normal;
line-height: normal;
color: #484848;
}
.pagebar a, .pageList .this-page {
background: #FFFFFF none repeat scroll 0%;
border: 1px solid #DDDDDD;
padding: 5px 6px;
text-decoration: none;
}
.pagebar a:visited {
background: #FFFFFF none repeat scroll 0%;
border: 1px solid #DDDDDD;
padding: 5px 6px;
text-decoration: none;
}
.pagebar .break {
background: #FFFFFF none repeat scroll 0%;
border: medium none;
padding: 5px 6px;
text-decoration: none;
}
.pagebar .this-page {
background: #FFFFFF none repeat scroll 0%;
border-color: #484848;
font-weight: bold;
padding: 5px 6px;
vertical-align: top;
color: #101aa7;
}
.pagebar a:hover {
background: #a8c5da none repeat scroll 0%;
border-color: #0e6e9c;
color: #FFFFFF;
text-decoration: none;
}
.pagebar a.freeze {
background: #FFFFFF none repeat scroll 0%;
border: 1px solid #DDDDDD;
padding: 5px 6px;
text-decoration: none;
color: #DDDDDD;
}
.pagebar .goto {
background: #FFFFFF none repeat scroll 0%;
border: 1px solid #DDDDDD;
padding: 2px 6px;
text-decoration: none;
}
.pagebar input[type=text] {
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none;
padding: 0 2px;
margin: 0;
border: 1px solid #cccccc;
background: #ffffff;
width: 25px;
height: 15px;
color: #484848;
font-size: 11px;
}
.pagebar input[type=text]:focus {
box-shadow: 0 0 5px rgba(81, 203, 238, 1);
padding: 0 2px;
margin: 0;
border: 1px solid rgba(81, 203, 238, 1);
background: #ffffff;
}
.pagebar input[type=”submit”] {
background: #0e6e9c;
color: #ffffff;
width: auto;
height: 20px;
padding: 0 3px;
border: 1px solid #0e6e9c;
font-size: 11px;
font-weight: bold;
cursor: pointer;
}
.pagebar input[type=”submit”]:hover {
background: #a8c5da;
color: #ffffff;
width: auto;
height: 20px;
padding: 0 3px;
border: 1px solid #0e6e9c;
font-size: 11px;
font-weight: bold;
cursor: pointer;
}

Step 2 HTML

<div class=”pagebar”>
<div style=”float:left; margin-top: 6px;”> Page 1 of 50 &nbsp;&nbsp; <a href=”” class=”freeze” title=”First”>|< First</a> <a href=”” class=”freeze” title=”Previous”>< Previous</a> <span class=”this-page”>1</span> <a href=”” title=”Page 2″>2</a> <a href=”” title=”Page 3″>3</a> <a href=”” title=”Page 4″>4</a> <span class=”break”>…</span><a href=”” title=”Page 50″>50</a> <a href=”” title=”Next”>Next ></a> <a href=”” title=”Last”>Last >|</a> </div>
<div class=”goto” style=”float:right;”> Goto page:
<input type=”text” />
<input name=”Submit” type=”submit” value=”go” />
</div>
<div style=”clear: both;”></div>
</div>

Preview

preview

 

8 CSS Properties Designers Can’t Live Without

May 2, 2013 Leave a comment

Imagine a world without CSS, where you have no real control over how anything looks or behaves in a browser. Imagine having to slice images using nested tables for your design. Some of us have been around long enough to remember when tables were a typical, perfectly acceptable way to design a site. Fortunately for us, we have grown accustomed to a web where we have control over almost every single aspect with pixel precision. There are some CSS properties that we just couldn’t live without today. They save us so much time and frustration and make things so easy. These CSS properties are so useful and we use them everyday to the point that if they were taken away, our jobs would be a nightmare.

Declaring A Style As “!Important”

Sometimes, we are moving along with our project, and despite careful planning, we need to inject CSS into a certain web element. We don’t want to have to rearrange things, rename divs, or undergo some other intensive fix, but we just need to override a small detail that is important to our design. Being able to declare a style as “!important,” (meaning that it overrides any other style for this element) may not be a best practice, but it sure is a lifesaver when facing time constraints or tight deadlines. I can’t tell you how many times this one has gotten me out of a jam while leaving the rest of the site intact. Below is an example of making the text color of a headline red and declaring it as “!important.” Later on in the stylesheet, if we accidentally style an h2 tag another color, it will stay red, because the !important attribute is applied to it.

h2{
color:#f00 !important;
}

Position: absolute

This is a fantastic CSS capability, and I have used this many times when designing different websites. This gives you the ability to position an element on the page exactly where you want it. You can specify bottom, top, left, or right. This property is excellent, because you can tell an element to always be stuck to the very left edge, or you can control your element and make it so that it is 2em from the top edge of the browser. This comes in handy when you want something to be in a specific space no matter what. Below shows what happens when you set the position to absolute and specify top to be zero and left to be zero.

css-top-left

Overflow: hidden

I really love this feature, because you can keep content from spilling over into other areas and preserve a neat and tidy layout. Essentially, this property tells the content that if it is going outside of the boundaries of your div, then the browser should hide that area’s visibility. Also, when an element is floated left, and another element ends up going behind it, we can set the CSS of the concealed div to overflow:hidden, and it will no longer go behind the other element.

Before overflow:hidden is applied to Div 2:

Screen shot 2013-04-10 at 9.47.07 AM

After overflow:hidden is applied to Div 2:

Screen shot 2013-04-10 at 9.47.53 AM

This makes div 2 play nice with div 1 and keeps it from disappearing behind div 1, solving all sorts of headaches.

Clearfix

This one is a staple of any CSS-​​wielding designer. I use this in all of my websites. In fact, I use it so much that I don’t even think about it. it is just a reflex employed to fix major headaches. Clearfix solves the problem of a parent container disappearing due to the float property. When you have an element that is floated, the container no longer attributes it’s height to that element. So, instead of being the same height as the element that is floated, it is smaller or disappears altogether visually.

Display

The display property allows you to do so much with just a couple of short words. It is easy to remember, and it’s a versatile CSS command. You can specify inline, inline-​​block, block, none, and more. My personal favorite is “none,” because you can hide an entire section with one small line of CSS. This is extremely useful and incredibly powerful. Display allows you to arrange the orientation of multiple elements, and t’s the very foundation of CSS dropdown menus. With display, sub-​​menus couldn’t disappear and appear on hover. In the menu example below, the dropdown menus would be visible all of the time without the display property.

menu

Margin and Padding

css-margin-padding

We all use these properties on multiple elements in every website. Could you imagine not being able to specify margin or padding? You couldn’t optically adjust spacing, your text would ride the edge of ever div, every element would be smashed together, and every website resulting from this would look like a nightmare. Margin and padding are both wonderful, because they add the proper spacing and negative space to your site to make it easy to read and the space breaks up each chunk of content. Without specifying the margin property as “auto,” you also wouldn’t be able to center your websites as well.

Width Percentage

css-width

Being able to specify the width of a container or an element in percentages allows us to create sites that flex with the screen size. This is especially important now that responsive website design has become the standard. Without being able to specify width as a percentage, either via media queries or by using a CSS grid system, responsive web design as we know it wouldn’t be possible. Being able to set how much space an element takes on a page really gives you a strong sense of control.

Borders

css-borders

The border property is one that is used more frequently than you might think. You could use an image to create a border, but you wouldn’t be able to specify a border at all without the CSS border property. You can specify that there is a border top or on bottom, which is great for creating a divider between two vertically stacked elements. Using border-​​right or border-​​left is also a great way to visually divide two columns of text to make them easier to read.

Another aspect of borders in CSS is the ability to have different types of borders, border styles, and widths. This simple element is so versatile and can really spruce up a website. The border styles that you choose can affect the entire layout, look, and feel of a site. Combining the right border color with box shadows and inset box shadows can also add a great deal of dimension to a site without using images. Borders are an essential CSS property that we cannot live without.

Conclusion

Without these CSS properties, every web design project would be full of chaos and inconsistency. Being able to control how each element behaves on each webpage means that we can create consistent layouts that look great and are consistent across different browsers.

Credit: James George

The Relationship Between Motivation and Talent

May 29, 2012 Leave a comment

Hydrogen and oxygen are distinctly different elements, but sometimes they combine to form water. Something similar is true for motivation and talent.

Motivation is what we LIKE to do naturally. Talent is what we DO well naturally. They can exist independently, but when they combine, they create something special. They create motivated talents.

People often are naturally good at something (talented), but it just doesn’t turn them on. For example, Heather is good with numbers, but she doesn’t go out of her way to find tasks calling for that talent. Most people have such talents. But then there are those talents that we really enjoy using.  These are the motivated talents, and this is where the magic is.

We use motivated talents every chance we get. Most of the time we don’t even think about it. For example, Larry has a motivated talent for conversation, and he naturally engages both friends and strangers in dialog. He doesn’t consciously determine to do so; it just happens. It’s natural and unforced. He enjoys it, and he’s good at it.  That’s the hallmark of a motivated talent.

Motivated talents tend to be irrepressible. They find expression.
In fact, if you’ve ever tried to stifle a motivated talent (either yours or someone else’s) it probably felt like you were trying to hold two dozen ping pong balls under water at the same time.
Motivated talents pop out, even if no one else is asking for them.
And doesn’t that make sense? After all, it’s what we do well AND enjoy…

How To Use Appropriate Naming Conventions

November 24, 2011 Leave a comment

Domain Names

Domain names play a big part in your overall ranking within Google, although they are not vital. You will notice that any search you do within Google, the first 6 out of 10 sites usually contain the keywords within the actual URL of the site. A good example is:

http://www.celtic-weddingrings.com

You will notice that the words have been separated using hyphens, this is not necessary for Google to recognise each keyword, however it is useful to stand out for the user in the search results. When choosing your domain name, try to use the most important keywords, that is to say the words your users will use to search for the service you provide. It is common knowledge that the shorter the name the better, this is only because it is easier for the user to remember. Although I would suggest to refrain from using extra long domain names for the sole purpose of ladening it with keywords. This is an obvious tactic that Google will catch on to immediately.

File Names

When naming your html pages, be sure to give them relevant names using your preferred keywords. Separate each word by using an underline or hyphen. (Again, not necessary, but useful for the users benefit) For example, if I were to name two pages of the Jewellery site they would be as follows:

Celtic_wedding_rings.html

Irish_wedding_bands.html

You can name the pages using either html or htm but try and refrain from using dynamic page types such as asp and php. You can use dynamic types (many well ranked websites do), but I recommend static html/htm for best ranking possibilities. Also easier to create, but maybe harder to maintain. This is strictly a personal preference.

**Please note, that the reference site has now been upgraded to ASP, again, this is for the visitors benifit.

Website Folder Structure

Stick to the same sort of naming convention rules as you would for your filenames. Use hyphens or underlines to seperate the words. Make sure that each directory is as descriptive as possible about the content of the folder in question.

12 Fun CSS Text Shadows You Can Copy and Paste

June 7, 2011 Leave a comment

Typography is everyone’s favorite toy in web design. One particularly fun tool that CSS gives you to play with your type is text-shadow, which seems simple enough at first but can be used to create some remarkable effects with a little ingenuity and creativity.

Today we’re going to run through several text-shadow examples that you can copy and paste for your own work.
Like the article? Be sure to subscribe to our RSS feed and follow us on Twitter to stay up on recent content.

The Basic Shadow

The text-shadow property is super easy to work with and works well across allmodern browsers without even so much as a vendor prefix! However, as far as I can tell, IE support, even up through IE9, is zilch. However, using tools likeModernizr will help you pull off advanced CSS3 effects even in silly old IE.

Syntax

The syntax for creating a simple text-shadow is shown below. You have four variables to work with, the first two set your shadow’s position, the third sets the amount of blur and the fourth the color of the shadow.

text-shadow: horizontal-offset vertical-offset blur color;

 

Putting this into action, here’s an example with a shadow that has been moved down two pixels and right four pixels with a three pixel blur and a color of black at 30% opacity.

text-shadow: 2px 4px 3px rgba(0,0,0,0.3);

 

Here’s the result of this code, a nice simple shadow that is quite appealing all by itself.

screenshot

Why rgba?

As a quick note, you don’t have to use rgba for the color of your shadow but can utilize any of the CSS color methods. However, I find that rgba is the ideal color setting for a shadow because it adds yet another dimension to work with. Not only can you set the position, blur and color of the shadow, you can also set its opacity using the alpha value.

This is actually easier than working with other color methods because you might typically have to go hunting for a decent accent to the background color that is perhaps slightly darker or lighter. With rgba you can just use black or white and reduce the opacity to blend it with the background.

Quick and Dirty Letterpress

The great thing about text-shadows is that you can actually do a lot more with them than your average drop shadow. For instance, here’s a quick trick for creating the illusion of inset text.

The first thing you want to do is set your text color to a slightly darker shade than your background color. Next, apply a slight white text-shadow with a reduced opacity.

As you can see, I used a background color of #222 and then set the text to black at 60% opacity. Finally, my white shadow was positioned just slightly down and to the right with a 10% opacity.

body {
    background: #222;
}

#text h1 {
    color: rgba(0,0,0,0.6);
    text-shadow: 2px 2px 3px rgba(255,255,255,0.1);
}

 

screenshot

Hard Shadow

Remember that you don’t have to blur your shadow at all. Due to their retro nature, hard text shadows are actually very “in” right now so feel free to experiment with them in your designs.

text-shadow: 6px 6px 0px rgba(0,0,0,0.2);

 

screenshot

Double Shadow

The real fun begins when you realize that you aren’t restricted to a single shadow. Using a comma to separate the declarations, you can apply as many shadows as you want!

Here’s the basic outline of the syntax. Notice that there’s a comma after the first two shadows and a semicolon after the last shadow.

text-shadow: shadow1, shadow2, shadow3;

 

Putting this into practice, here’s an example with a text treatment that you’ll see all over the web right now. The idea is basically to apply two shadows, the first of which is the same color as your background.

text-shadow: 4px 3px 0px #fff, 9px 8px 0px rgba(0,0,0,0.15);

 

The result is almost a vintage newspaper feel.

screenshot

Down and Distant

Once you start really layering up on the shadows, the results quickly become more and more impressive. It’s really easy to start to create some nice faux 3D effects that your web design savvy users won’t believe is live text.

Below I used a whopping four shadows, all pointed straight down with varying degrees of distance and blur.

    text-shadow: 0px 3px 0px #b2a98f,
                 0px 14px 10px rgba(0,0,0,0.15),
                 0px 24px 2px rgba(0,0,0,0.1),
                 0px 34px 30px rgba(0,0,0,0.1);

 

screenshot

Close and Heavy

Here’s another example of the same idea, this time with three shadows that have been kept much closer to the source. The effect makes your text seem a bit weightier.

text-shadow: 0px 4px 3px rgba(0,0,0,0.4),
             0px 8px 13px rgba(0,0,0,0.1),
             0px 18px 23px rgba(0,0,0,0.1);

 

screenshot

A Little Help

Looking around for what other designers have done I found two excellent techniques that I thought were perfect for this post. The first comes from Mark Dotto and the second from Gordon Hall.

Mark Dotto’s Seriously 3D Text

Here’s one example that I’ve always thought looked really impressive. It comes from MarkDotto.com and utilizes an impressive twelve separate shadows to pull off a very believable 3D effect.

text-shadow: 0 1px 0 #ccc, 
               0 2px 0 #c9c9c9,
               0 3px 0 #bbb,
               0 4px 0 #b9b9b9,
               0 5px 0 #aaa,
               0 6px 1px rgba(0,0,0,.1),
               0 0 5px rgba(0,0,0,.1),
               0 1px 3px rgba(0,0,0,.3),
               0 3px 5px rgba(0,0,0,.2),
               0 5px 10px rgba(0,0,0,.25),
               0 10px 10px rgba(0,0,0,.2),
               0 20px 20px rgba(0,0,0,.15);

 

screenshot

Gordon Hall’s True Inset Text

Notice in the example above I called my technique the “quick and dirty” letterpress effect. That’s because there’s a much more involved way to create some seriously inset text that’s much more believable.

Gordon uses some serious CSS voodoo to pull off not only an outer shadow but a genuine inner shadow as well. Check out his blog post for a full explanation of the technique.

background-color: #666666;
    -webkit-background-clip: text;
    -moz-background-clip: text;
    background-clip: text;
    color: transparent;
    text-shadow: rgba(255,255,255,0.5) 0px 3px 3px;

 

screenshot

More Fun Shadows

Now that you’ve got a good feel for the logic behind the code, here’s a few more examples that I whipped up sans the boring explanations. Feel free to steal them and use them in your work!

Glowing

text-shadow: 0px 0px 6px rgba(255,255,255,0.7);

 

screenshot

Superhero

text-shadow: -10px 10px 0px #00e6e6,
                 -20px 20px 0px #01cccc,
                 -30px 30px 0px #00bdbd;

 

screenshot

Multiple Light Sources

text-shadow: 0px 15px 5px rgba(0,0,0,0.1),
                 10px 20px 5px rgba(0,0,0,0.05),
                 -10px 20px 5px rgba(0,0,0,0.05);

 

screenshot

Soft Emboss

color: rgba(0,0,0,0.6);
text-shadow: 2px 8px 6px rgba(0,0,0,0.2),
                 0px -5px 35px rgba(255,255,255,0.3);

 

screenshot

Conclusion

Like most CSS effects, text-shadows are extremely simple to implement in a basic form but can take on a variety of different forms if you really put some work into them. Using commas as a separator, you can stack CSS shadows on top of each other to dramatically add to the interest and realism of the effect.

Leave a comment below and let us know what you think of the twelve shadows above. Which one is your favorite?

Third Party CSS Apps to Speed Up Your Workflow

June 7, 2011 1 comment

While Dreamweaver CS5.5 is a great program, it’s also quite expensive, so in this article we’re going to look at some third party applications that will allow you to create some cool effects without breaking the bank. Many of these tools are online, which makes life a bit easier.

Ultimate CSS Gradient Generator

CSS1

If you’ve been wanting to create gradients for your layouts, Ultimate CSS Gradient Generatorgives you some really great options. Here’s a rough rundown of the interface. At the top left are a number of presets. These form the basis of some really cool gradients that you can use “out of the box” or custom design your own. Directly below the Presets section is a bar that you can manipulate with the stop markers.

CSS2

Here’s how it works. Simply select a marker and double-click on it to open the color selector to choose your colors. To adjust the position of the stops, you can manually move them along the bar or set the location in percentages. To add a new stop, click between the stop markers. To delete a stop marker, drag it down or select it and click on the delete button in the Stops section.

On the top-right of the interface is a preview of the gradient. Here are some things to note:

* You can set the orientation to vertical or horizontal
* You can set the size
* You can enable the IE checkbox for Internet Explorer

CSS3

Directly below that area is the CSS and at the bottom of this section there are a few subtle, yet important tools. First is the color format. You have the option of using hex, rgb, rgba, hsl, hsla. This last designation, the “a,” is really important. This refers to the image “alpha” or transparency. So if you’re looking at the image code it would read something like this: rgba(41,137,216,1)

The last number, the “1” controls the transparency. “1” is fully opaque. Anything less than that will create varying leves of transparency.

CSS4

The other important feature is: Import from image. When you click on the button it brings up the following dialog box, allowing you to import a gradient image or to use a URL.

And that’s it. You can have a lot of fun with this tool.

CSS Typeset

CSS5

CSS Typeset is a simple tool which allows you to experiment with different types of type, positioning, sizing and more. Once you have what you like, you can copy the CSS code into your layout.

Here’s how it works:

1. Copy some text that you want to test in the Enter Text box on the left.
2. Choose the font that you’d like to use. Your choices are: Courier, Georgia, Palatino, Times New Roman, Arial, Helvetica, Impact, Lucida Sans, Trebuchet MS and Verdana. Note that there’s no need to select the text before choosing the font. Simply changing the font will change the text automatically. For this demo, I’ve chosen to use

* Arial
* Font size 14px
* Font color, Hex 0000FF or RBG: 0,0,255
* Left Justified
* All bolding, italics, etc. off

Next, we’ll look at the controls that govern the spacing between characters, between words and between line.

CSS6

Here’s the text with a figure of five applied. As you can see the spacing between the letters is considerable.

CSS7

In this example, I’ve set the spacing between characters to “1” and the spacing between words to “3.” Note the effect of the spacing.

CSS8

In this sample, I’ve left the spacing between characters at “1”, I’ve set the spacing between words to “0” and Ive set the spacing between lines to “1.5.” Note the effect.

CSS9

And here is our CSS code for that work. As you can see, using this tool can really help you with designing text for your layouts.

CSS Generator

CSS10

 

One of the great things about Dreamweaver is its ability to create customized layouts for building websites, which can save you a lot of time, but what happens if you’re not using Dreamweaver? If you try to create these layouts they can be really time-consuming. Far better to use a template generator if one is available. And that’ where CSS Generator comes into play. Literally within a few minutes you can create a CSS layout that’s ready to use. Not only, but you can also use the HTML5 DOCTYPE.

In this section I’ll input a number of values, just to give you an idea of what the final result will be. Here are my settings:

* DOCTYPE: HTML5
* CSS Reset: * {margin: 0; padding: 0;}
* Layout Width: Fixed
* Width: 960 pixels
* Header: Specify Height enabled 250 pixels
* Sidebars: Two sidebars, one left, one right, 250 pixels spacing for left, 150 pixels for the right
* Footer: Specify height enabled, height 75 pixels.

CSS11

When all of these setting are entered, the blue “Get the Link” button becomes active. Click on it and it brings up the page above, which shows you what your layout will look like. At the top left is a link that states: “Download .zip archive. When you click on it, it downloads two files, a .CSS file and an index file. You now have everything you need to get started with your layouts.

Have fun!