Horizontal | Handy CSS

Mouse Cursor Styles in CSS

CSS allows us to change the cursor style on certain events, we can use more than one dozen styles to switch to on hovering.

Pure CSS Horizontal Menu

Pure Horizontal CSS menu with hovering and active menu effect.

Animation Using CSS3

Animating any element using CSS3 by defining the keyframes, in this tutorial we will learn to change color, size and place on vertical and horizontal scale of a simple box.

Resizing the Element using CSS3

A very handy trick to resizing any element by dragging its corner in CSS using combination of some simple CSS3 properties.

CSS Special Effects on Text

Some rare CSS special effects on text that are not common but are very helpful.

Working with Fluid Width Layouts

Fluid width layouts are compatible with all new generation’s browsers and can be structured for any screen resolution. It is important CSS concept to structure columns in meaning full manner.

By applying certain text effects we can make our website text contents more appealing and readable as well. Web Designers always try to achieve best text font, color, and size combination. But now we can do more stuff with newly introduced CSS3 text effects properties.

Creating Basic CSS Drop Down Menu

Menus are one of the the basic requirements of any website. For top menus in header portions it is good to have horizontal one with drop downs. Today we are going to show you how you can easily create a basic horizontal drop down menu using HTML, CSS, and JavaScript.

CSS Rollover Horizontal List Menu

Menus are one of the basic necessities that every website needs. There are so many beautifully styled menu examples available online. Today we are going to present a simple CSS rollover horizontal list menu.

How to repeat a background image Horizontally With CSS

Background images mostly used in websites to make them look beautiful and more readable. With the help of CSS we can also repeat a small image over and over again to fit all the area. In this post we are showing how to repeat a background image horizontally.

Creating CSS Horizontal Dropdown Menu

Well-designed top navigation bars have a good impact on overall web page design. Popular sites like digg, flickr, twitter, etc have beautiful menu styles, in this post we are showing you a way to create flickr like horizontal menu.

How to Style HR Tag Using CSS

With every coming version of CSS and HTML, numerous new properties and tags are being introduced, in result some old ones loses their importance. I think HR is one of them that are not commonly used nowadays. Today we show how to style a HR tag with CSS to make it look stylish.

3 Ways to Create Horizontal Navigation Bars in CSS

Horizontal navigation bar is the basic requirement of almost all web designs, as they allow user facility to go through main section of a site up in-front. Different designers and developers use different techniques to make horizontal navigation bars beautiful with simple and cleaner code. Here we presents 3 of them.

float-offset

If you want to push the floated elements to the reverse direction, CSS version 3 gives your opportunity with float-offset property that enables to do so but only use this property with floated elements.

drop-initial-size

With the help of drop-initial-size attribute we are able to control the partial sinking of initial letter. To remove the secondary point connection point constraint set the value to other than auto.

box-orient

Using box-orient attribute we can determine the layout of elements that are nested in box object by setting values to horizontal, vertical, inline-axis, or block-axis.

border-top-left-radius

border-top-left-radius is use to make rounded corner on top left side of element. It takes two values with space between, you can provide values in px, em ,pt ,etc.

text-shadow

text-shadow property of CSS lets to set one of more different shadow effects in texts for current elements. Use space between text-shadow values and use comma to set multiple shadow values.

text-align

text-align attribute of CSS is use to align the text to right, left, center, or justify. It is inherited property, if defined in container element, will also effect nested elements.

clear

clear CSS Property is use to prevent the current element to from remain in same horizontal band of floating elements. By default the value will be none

background-repeat

background-repeat CSS property allows to set how background image of certain element repeat either horizontally or vertically.

background-image

background-image CSS property is use to set the background images of elements, you can also set background image to repeat vertically, horizontally or no reapet.

Pure CSS Rounded Corners

There are lot of techniques to round corners of table or div via using only CSS and images. But all of them uses some corners of images to shape like rounded rectangle. Here i am explaining pure CSS tip to round edges of div. You don’t need any image or Javascript, it is simply CSS code.