Designer Blog, Web & Graphics Designer Blog

Hi Guys,
Once Again I am back with solution of a minor but difficult & uncommon issue. In our specified div or in table area, sometime we need to put some big URL or text which have no space. In that case text extending out the box/specified area and breaking the layout(Ex: Image-1). We can fix this issue with “Word-Wrap” property in CSS. Here is the Example below to fix this issue.

CSS :

.break-line {
word-wrap: break-word;
}

Use this class in your table or in your div and you can see that your box or specified area will not break the the text will fix into that area (Ex: Image-2). Before & After using this property it looks like :

Word-wrap is supported in IE 5.5+, Firefox 3.5+, and WebKit browsers such as Chrome and Safari.
Hope this article helps you. Waiting for your feedback. Thanks..

Hi Guys,

Once again I am here with a Interesting post. Every day we design web pages  and keep  places for social networking icons.  In Our HTML design if we use some CSS3 and Javascript, we can make a totally different good looking fade In/Out effect Social Networking Icons with Tooltip. Here is the codes below :

HTML :

<div id="wrapper">

<h3>Connect With Us On:</h3>

<ul class="social" id="css3">
<li class="delicious">
    <a href="http://www.delicious.com/"><strong>Delicious</strong></a>
</li>
<li class="digg">
    <a href="http://digg.com/"><strong>Digg</strong></a>
</li>
<li class="facebook">
    <a href="http://www.facebook.com/"><strong>Facebook</strong></a>
</li>
<li class="flickr">
    <a href="http://www.flickr.com/"><strong>Flickr</strong></a>
</li>
<li class="linkedin">
    <a href="http://www.linkedin.com/"><strong>LinkedIn</strong></a>
</li>
<li class="reddit">
    <a href="http://www.reddit.com/"><strong>Reddit</strong></a>
</li>
<li class="rss">
<a href="http://feeds2.feedburner.com/marcofolio"><strong>RSS</strong></a>
</li>
<li class="twitter">
    <a href="http://twitter.com/"><strong>Twitter</strong></a>
</li>
</ul>
<div style="clear:both"></div>

CSS :

body { background-image:url("../images/texture.gif");
font-family: "Segoe UI","HelveticaNeue-Light","Helvetica Neue Light",
    "Helvetica Neue",Arial,Tahoma,Verdana,sans-serif; font-size:13px; }
h3 { clear:both; padding:20px 0 0 60px; }
a { color:#AF7F00; text-decoration:underline; }
a:hover { text-decoration:none; }

/* COMMON CLASSES */
.break { clear:both; }

/* WRAPPER */
#wrapper { width:800px; margin:40px auto; padding:0 0 40px 0px; }

/* SOCIAL ICONS - GENERAL */
.social { list-style:none; margin:30px auto; width:464px; }
.social li { display:inline; float:left; background-repeat:no-repeat; }
.social li a { display:block; width:48px; height:48px; padding-right:10px;
position:relative; text-decoration:none; }
.social li a strong { font-weight:normal; position:absolute;
left:20px; top:-1px;
color:#fff; padding:3px; z-index:9999;
 text-shadow:1px 1px 0 rgba(0, 0, 0, 0.75);
 background-color:rgba(0, 0, 0, 0.7);
 -moz-border-radius:3px;
 -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 -webkit-border-radius:3px;
 -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
 border-radius:3px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5);
}

li.delicious { background-image:url("../images/delicious.png"); }
li.digg { background-image:url("../images/digg.png"); }
li.facebook { background-image:url("../images/facebook.png"); }
li.flickr { background-image:url("../images/flickr.png"); }
li.linkedin { background-image:url("../images/linkedin.png"); }
li.reddit { background-image:url("../images/reddit.png"); }
li.rss { background-image:url("../images/rss.png"); }
li.twitter { background-image:url("../images/twitter.png"); }

/* SOCIAL ICONS - CSS3 */
#css3:hover li { opacity:0.2; }

#css3 li { -webkit-transition-property: opacity;
-webkit-transition-duration: 500ms;
 -moz-transition-property: opacity;
 -moz-transition-duration: 500ms; }
#css3 li a strong { opacity:0;
 -webkit-transition-property: opacity, top;
 -webkit-transition-duration: 300ms;
 -moz-transition-property: opacity,
 top; -moz-transition-duration: 300ms; }

#css3 li:hover { opacity:1; }
#css3 li:hover a strong { opacity:1; top:-10px; }

Hi Guys,

Here is a post on the basics of the new properties: text-shadow, box-shadow, and border-radius in CSS3. These CSS3 properties are commonly used to enhance layout on your HTML page. Here we go:

Text Shadow

We can use Text shadow in different structures like: x-offset, y-offset, blur, and color.

HTML

<p>This is a Example of Text Shadow.</p>

CSS

p{ font-family:arial; font-size:30px; font-weight:normal; color:#ffffff; text-shadow: 2px 3px 2px #000000;}

Result :

CSS3 Text Shadow

Border Radius

In early days we use images to make rounded corner boxes. But now use of one simple line CSS3 code we can make a rounded corner boxes. In order for the browsers to render the border radius, add “-webkit-” in font of the property name for webkit browsers and “-moz-” for Firefox. Here is the example below:

HTML:

<div id=”rounded_box”> Rounded Corner Box</div>

CSS:

#rounded_box{ width:300px; height:120px; background-color:#4d727f; border-radius:20px; -webkit-border-radius:20px; -moz-border-radius:20px; padding:25px;}

Result:

You can specify each corner with a different value. Doing that you can make the four corners totally different from each other. Here is the few modifications  on the above CSS:

-webkit-border-radius:5px 15px 25px 40px;

-moz-border-radius:5px 15px 25px 40px;

Note: Here values are for 5px (Top left), 15px (Top Right), 25px (Bottom Right) & 40px (Bottom Left).

Result:

Box Shadow

The style for box shadow is same as the text-shadow property: x-offset, y-offset, blur, and color. With this CSS3 property we can create a shadow around the box.

HTML:

<div id=”boxshadow”> Box Shadow Example</div>

CSS:

#boxshadow{ width:300px; height:120px; background-color:#4d727f; padding:25px; -webkit-box-shadow: 5px 5px 7px #333; -moz-box-shadow: 5px 5px 7px;}

Result:

Changing the property you can create some more different effect on your design.  For example you can apply this shadow in your rounded corner box and create a rounded corner box with shadow around it.

I hope you like this article. Please write your feedback if you like this article.

Hi Friends,

Everyday in our design related work we need Login Box/ Page for our website. If we make a custom design for login page then it helps us to using them in various websites changing some colors, texts etc. Here I show you how to make a custom Login page through few lines of  HTML & CSS .

HTML

<form action=”index.php?login=1″ method=”post”>

<div class=”message”>Please Login</div>

<table width=”258″ border=”0″ align=”center” cellpadding=”05″ cellspacing=”0″ id=”logintable”>

<tr>

<td width=”80″>&nbsp;</td>

<td width=”192″>&nbsp;</td>

</tr>

<tr>

<td>Username</td>

<td><label for=”username”></label>

<input name=”username” type=”text” id=”username”></td>

</tr>

<tr>

<td>Password</td>

<td><label for=”password”></label>

<input name=”password” type=”password” id=”password”></td>

</tr>

<tr>

<td>&nbsp;</td>

<td>&nbsp;</td>

</tr>

<tr>

<td>&nbsp;</td>

<td><input type=”submit” name=”button” id=”button” value=”Submit”></td>

</tr>

</table>

</form>

CSS:

body { background-color: #F5F5F5; font-family: Arial, Helvetica, sans-serif; color:#666;}

input { background-color: #EEE; padding: 5px; border: 1px solid #CCC;}

#logintable { font-family: Arial, Helvetica, sans-serif; background-color: #fefefe; border: 1px solid #CCC; color: #333; box-shadow:0px 0px 8px #cccccc; -moz-box-shadow:0px 0px 8px #cccccc; -webkit-box-shadow:0px 0px 8px #cccccc; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; padding:10px;}

.message { text-align: center; padding: 20px; font-size: 24px; text-shadow: -1px -1px 1px #cccccc; filter: dropshadow(color=#ffffff, offx=1, offy=1);}

Now Save your file and check it into the browser.  Hope you like this article. Please write your feedback if you like this post.

Thanks

Hopefully if you found this page you already know what a Favorites Icon is. In modern web browsers, when you visit a web site (and add it to your Favorites/Bookmarks) it will load a specific small icon set by the webmaster.

Look at the top of your browser near the Back button and WWW address to see the Favorites Icon.

The Favorites Icon will show up next to the URL (the http:// web address) in your web browser near the top of the window (close to the Foward and Back buttons).

Here is the way to add the favorite icon into your website :

Step 1. Create your icon (.jpg/.png or .gif format). Size will must be 16x16px and upload it into the image folder where you keep other images of your website.

Step 2. Open your HTML page and add this code just after the <head> tag.
<link rel=”shortcut icon” href=”images/icon.png”  />

(Put your icon URL here by the URL of your logo which you uploaded in step 1)

Step 3. Save template change and republish your website/blog.

Now  your favorite icon shows  into the address bar of your website.  Enjoy…

As a person, you may have an ID card – a passport, a driving license or whatever – which identifies you as a unique individual. It’s the same with CSS. If you want to apply style to one element use ‘id’ (e.g. <div id=”myid”>). An ID can specified by “#”.

As a person, if you are in a class, you are one of many. It’s the same with CSS. If you want to apply the same style to more than one element, use ‘class’ ). In the stylesheet, you identify a ‘class’ with a “.” ie. “.myclass”

When visibility is set to hidden, the element being hidden still occupies its same place in the layout of the page. If the display is set to none, the element does not occupy any space on the page — as if it didn’t exist..

In other way we can say :

visibility: hidden hides the element, but it still takes up space in the layout.

display: none removes the element completely from the document. It does not take up any space, even though the HTML for it is still in the source code.

Dear Readers,

Everyday when we design an HTML page we face a very common problem during design. As we know Our design will be divided into 3 part (header, footer and middle part). When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done.

Here I describe you a very simple way to keep the footer into the bottom of the screen and its works greatly in all browser. Here is the codes :

HTML :

</div>

CSS :

<style media="screen" type="text/css">

html, body { margin:0; padding:0; height:100%;}

Now save your pages and test it to browser. You find that its work nicely.

Please give your comment if this article helps you.

CSS rules marked !important take precedence over later rules. Normally in CSS the rules work from top to bottom, so if you assigned a new style to an element further down the style sheet or in a secondary style sheet then the later rule would take precedence. !important ensures that this rule has precedence. The easiest way to explain this is with some examples.

Example #1: Normal behaviour

Let’s say we declared paragraph tags in the #example div to be colored blue, and then further down the style sheet (or in another style sheet also linked to in the page) that they be colored red:

#example p {
    color: blue;
}
...
#example p {
    color: red;
}

The later rule overrides the earlier rule, and paragraphs within #example will be red.

Example #2: Using !important

If we assigned !importand to the first rule, then the second rule would be ignored because the first rule now has precedence:

#example p {
    color: blue !important;
}
...
#example p {
    color: red;
}

The first rule now has precedence so the later rule is ignored and the paragraph will be blue.

Example #3: !important declared again

If the !imporant declaration is used again in the later definition, then the normal cascading rules will apply, and the style assigned will be the latest !important one:

#example p {
    color: blue !important;
}
...
#example p {
    color: red !important;
}

In the above example the paragraph will be red.

Example #4: Inline styles

Ideally you shouldn’t use inline styles, but here’s a couple of examples when using them with !important.

!important in the CSS style sheet will override any inline styles as well:

CSS: #example p {
    color: blue !important;
}

HTML: <div id="example">
  <p style="color:green;">This paragraph has an inline style</p>
</div>

In the above example, the paragraph will be in blue text and not green as in the inline style because of the !important declaration in the CSS.

Example #5: Inline styles with !important

However, if you add !important to the inline style then that will of course have precedence:

CSS: #example p {
    color: blue !important;
}

HTML: <div id="example">
  <p style="color:green !important;">This paragraph has an inline style</p>
</div>

So in the above example the paragraph will be green.

Hope this post helps you to understand the Uses of  ”!important” attribute in CSS. Kindly write your feedback if this article helps you.

Hi All,

Sometime we need callouts in our HTML designs. Most of us use images into the callouts. But after introduce CSS3 we can make the callouts through some CSS codes without any image.

It helps us to get rid of images which make our website slow and our page loads faster than before.  Here I give some types of callouts design through CSS. You can use any of them into your websites.

I give almost 7-8 different type of callouts here. So the source code is littlebit long so I attached the source files here. You can download the source files and use them. Download the  complete source file here

I hope this post helps you lot. If this post is useful for you then please write your valuable comments.