Simple Horizontal Navigation Bar

0 comments
-
Unknown

Simple Horizontal Bar is one of the commonly used Navigation system in designing website field. It is found normally on most of sites which I have browsed yet in my whole life. Although it looks nice, but it is very easy to prepare it. You just need to know some HTML and CSS basic knowledge. It depends upon UL HTML tag and some simply coded CSS Properties. First have a CSS horizontal bar.


In above picture its nor car that is bar but Home, Top Rated and Recommended is horizontal bar.

<div class="nav">
<ul>
<li>HOME</li>
<li>TOP RATED</li>
<li>RECOMMENDED</li>
</ul>
</div>

Now its time to have miracle means time to add classes or you can say css

.nav {height:40px;}
.nav ul {margin:0px; list-style-type:none; height:40px;}
.nav ul li {display:inline; float:left;}
.nav ul li a {padding:7px 14px;}

Rest of adding background and color properties, you can do yourself. Just try and have a look in your own browser.
[ Read More ]

Continue

Rearrange CSS as per User Resolution

0 comments
-
Unknown

Now in this fast computing world, every user or customer deals with different screen resolution monitors. Because of this thing it is difficult to make a website according to every user to provide him or her a good browsing experience on your website or any blog. It is also a big problem for various web designers also. If a user of resolution 1024x720 comes than we try to make website or arrange elements for him to give a good experience, on other hand if a user of higher resolution like 1920x1080 comes then it makes a big problem for user as well as designer. So CSS try to maintain this change by changing classes values. It doesn't requires any JavaScript, its pure CSS.


Now coming to the main point the element we are using here is @media screen. So first discuss about its conditions and properties
  • @media screen and (max-width: 720px)
  • @media screen and (min-width: 720px)
  • @media screen and (max-height: 720px)
  • @media screen and (min-height: 720px)
So it can be used both by using max and min conditions. But never try to use both at a time in your website, it will produce error and will not work properly at all. You can also use a combination of above conditions like

  • @media screen and (max-width: 720px; max-height:420px;)

Syntax of @media screen

.class 
 {
background:#444; color:white; width:1280px; 
 } 
@media screen and (max-width: 720px)
 { 
.class {background:#444; color:white; width:720px;}
 }

So in above code if width is less than 720px than class in @media screen will come into play while without @media screen class will be loaded if screen width is more than 720px.
[ Read More ]

Continue

Custom Internet Fonts @font-face via CSS3

0 comments
-
Unknown

CSS3 include this nice function supported by most browsers like IE 9, Google Chrome, Safari, Mozilla Firefox, Opera etc. The main purpose of this is to enhance the text based sites and blogs look more pretty and give look as per design of your blog. This is done by function @font-face . This function describer the remote url of your required font and your desired font name. But starting this you must have your desired font in some different formats like ttf, eot etc. You can easily colloect font by searching in google and if you can't find all formats you can use @font-face generator. You can go here to use @font-face genarator www.fontsquirrel.com/fontface/generator .

 This picture will explain why custom fonts are in demand than old web-based fonts.


So after you have font in all formats we can continue and let us try this simple css.

@font-face{
font-family: myFirstFont;
src: url('Sansation_Light.ttf'),
     url('Sansation_Light.eot'); /* IE9 */
}

In above code the name under @font-face {font-family: myFirstfont;} is that name which you can use in any css class and properties. One thing more to tell this is that it is better to use full address (http://example.com/any.ttf) instead if only writting font name (any.ttf). This will make your font available to use n every page of website. You can also use some more properties to make your font looks cool and fine.

  • font-stretch  -  normal , condensed, expanded etc.
  • font-style  -  normal, italic and oblique.
  • font-weight  -  normal, bold 100-900 .
So next time you can use your font very esily by just writting these these few html lines

<div style="font-family: myFirstFont; font-weight:bold; color:grey;">Desire word or line</div>

So here this small and helpful post ends, if you have any question or suggestion feel free to comment.
[ Read More ]

Continue