Posts Tagged ‘ CSS Positioning ’

Understandng The CSS Clip Property

Tuesday, February 17th, 2009 By Nikhil

Why do I want to understand this??? … Humm!!!!

Most of CSS writers would agree that CSS Clip property is probably one of most un-used CSS properties. It was so true for me too and was most happy to neglect it , until I started modifying the MOOTOOLS TWO Knob (Pin) Slider Component(with Range Indicator).

There was a good suggestion from one of the component users to modify the Slider Component using clipped backgroud images( against a variable width division) to indicate the slider range. Thus came my time to enter the fun but un-chartered (for me ofcourse) waters of the CSS Clip property.

Well! how difficult it can be? Not much at all …YES and NO. The syntax to use the CSS Clip property is pretty upright but the meaning/usuage is a bit croocked. With a memory like mine, everytime I sit to rework on my Slider Script… I have tokeep referring back to usage of this CLIP property , to remind myself the logic that I have created in my script …. HENCE! thought to pen it down, with a hope to remember it the future ( and also for the benefit of those who seem boggled by the CSS Clip Property)

What does CSS Clip do?

Clip is part of the visual effects module of CSS 2.1 . Simply put, its job is to place a visible window on top of an object that is being clipped , hence clipping images and creating thumbnails without having to create additional files( I have already put this feature to better use in the Slider Component :) )

Using the CSS Clip property, you can create a clipping using the rect shape. Like many other CSS Properties (like margin, padding etc),using rect requires four coordinates Top, Right, Bottom, Left (TRBL). The croocked nature of this property reflects when you take a closer look at how clip calculates the clipping region , using these four coordinates (sends brain into a toss for a while). Now to confuse you the bottom starts from the top, and the right starts from the left. :). You see what i said? …. Hence this post …

This little confusion can easily disappear , with this visual explanation of the CSS Clip/rect property as below!!!!

CSS Clip Requirements

The task we have started is to clip the following Thumbnail image into a squarer looking image (and also a wide-angle image)

original_image  clip_demo
Original Thumbnal/Image Clip Requirements for Sqaure Thumbmail


CSS Clip Results


View Demo  |  Download sourcefiles

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

Fixed(That remains static on window scroll) Page Blocks using CSS Only

Thursday, September 4th, 2008 By Nikhil

This post might be a good example for the phrase “Teaching grandma to suck eggs” … Cause this is just BASIC CSS Stuff. But for those , like the oblivious me, this might be a blessing in disguise. I always thought (I could loose my job for saying this), it was ONLY possible to keep some part of the HTML page content STATIC (meaning, its position remains AS IS on Window Scroll), using some smart scripts, Doing all those scientific calculations to find dynamic position, trapping Window.scroll events and setting timeouts etc.

Never thought it could as simple as this …. Here in the CSS/HTML below , I have four static blocks, one fixed to each extrimities of the page, TOP, RIGHT, BOTTOM and LEFT … needless to say … you can choose any one or more if need be …

.static{display: block; z-index: 10; color: #ffffff; overflow-x: hidden; overflow-y: hidden; position: ixed;
#contents{ margin: 100px 150px 0px 160px; border:1px solid #e6e6e6 }

#wrap-t { top: 0px; background:#33CC66;  width: 100%; height: 55px;}

#wrap-l { top: 80px; background:#FF9966; height:300px; width:150px; border:2px solid #e6e6e6;}

#wrap-b { bottom: 0px; background:#3333CC;  width: 100%; height: 55px;}

#wrap-r { top: 80px; background:#6666FF; height:300px; width:140px; border:2px solid #e6e6e6; right:0; }

<div id=”contents”> You main page contents </div>
<div id=”wrap-b” class=”static”>
  Static Content on Page  bottom
<div id=”wrap-t” class=”static”>
  Static Content on Page  Top

<div id=”wrap-l” class=”static”>
  Static Content on Page  left
<div id=”wrap-r” class=”static”>
  Static Content on Page  right

View a wroking sample here

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

We are using Faux Absolute Positioning : A Brilliant CCS Layout

Wednesday, July 2nd, 2008 By Nikhil

When I read  this article on A List Apart “ Faux Absolute Positioning
by Eric Sol
“, I was nothing less than IMPRESSED.  I was also depressed majorly , cause,  honestly I was wondering , why cant I come up with something fabulous as this.

Usually, when we create CSS layouts, we use “POSITION” or “FLOATS”  , or a very bad combination of both. Eric Sol and his team define a next to perfect technique of a new type of CSS layout technique , which they have christened as  “Faux Absolute Positioning” after the faux columns technique that simulates the presence of a column. 

You know that problem all of us CSS developers have with disintegrating layouts (The unexpected content changes that cause entire columns to wrap ,  when we use floated layouts ) … Well! Seems History!!!!
This layout technique  is still very young, and has to trashed out by all those CSS gurus out there, before it becomes an un written standard.   I’m happy to use it NOW! … and am already into  middle of converting my earlier problematic/floating un-necessarily layouts  into FAP layout already… and am glad to say the “we are already using Faux Absolute Positioning for this blog site as well ” … GO try it , NOW!

Kudos Eric!!

get ExpressingIT News by Email Subscribe to ExpressingIT by Email or  Follow Me on Twitter

 Subscribe to ExpressingIT RSS
get ExpressingIT News by Email Subscribe to ExpressingIT by Email
 Follow Me on Twitter