Invisible
Principles of Design
Four principles of Design: Balance, Emphasis, Rythm & Unity. Below are some tips on the same.
Confirmed, AirTel to bring iPhone 3G in India
Well, I love technology in general and yes, I’m going to one of first who buys iPhone 3G when it comes to India. Being an AirTel customer, it is pretty good that I don’t need to change my existing number to move to iPhone 3G, earlier with news that Vodafone will be launching it, I assumed that I might have to move to Vodafone!… And again that updating contacts, new number stuff!
iPhone 3G will come around October this year in India. Earlier there was a news in media that Vodafone will be launching iPhone in India. But it is confirmed now via the PR on Apple web site that AirTel will be launching iPhone 3G in India later this year. I guess Vodafone will be also launching iPhone 3G for their customers too later this year, but it is not confirmed yet.
Soon customers will be able to purchase iPhone 3G at Airtel Relationship Centers. Details of pricing and availability will be announced at a later date. Airtel customers who wish to receive more information on iPhone 3G can send an SMS with keyword "iPhone" to 54321
Horizontal JavaScript SlideMenu
Found something more sweeter than the simple CSS-only Horizontal Bookshelf I posted last week. Mike wrote a versatile 1kb horizontal accordion script can be used for menus.
The front-end mark-up
1: <ul id="sm" class="sm">
2: <li><img src="images/1.gif" alt="" /></li>
3: <li><img src="images/2.gif" alt="" /></li>
4: <li><img src="images/3.gif" alt="" /></li>
5: <li><img src="images/4.gif" alt="" /></li>
6: </ul>
To build the accordion call the function below onload…
1: slideMenu.build('sm',200,10,10,1)
CSS Image Gallery / Bookshelf
I found a CSS Gallery somewhere on the web few days (I can’t find the link to that site, If found I will update the link here). It was pretty simple & starlight forward CSS to build an image gallery. Recently, I needed to put all supporting articles on BabyMagic in an easy navigation, Modified it a bit and out it under a rounded DIV’s. I wanted to create a bookshelf kind of UI so that anyone can easily navigate through the documents. A live demo is up, click the image at the end of this post see the demo. The good thing about this CSS Gallery is there’s no JS/AJAX, all pure CSS sweetness & it looks great! All the used images can be downloaded at Demo.
Here are the CSS & XHTML I used for it…
CSS for the Gallery
1: #gallery {
2: padding:0;
3: margin:0 auto;
4: list-style-type:none;
5: overflow:hidden;
6: width:700px;
7: height:100px;
8: border:0px solid #888;
9: background:#fff url(../images/win_backh.gif);
10: }
11: #gallery li {
12: float:left;
13: }
14: #gallery li a {
15: display:block;
16: height:100px;
17: width:24px;
18: overflow:hidden;
19: float:left;
20: text-decoration:none;
21: border-right:1px solid #fff;
22: cursor:default;
23: }
24: #gallery li a img {border:0;
25: }
26: #gallery li a:hover {
27: background:#eee;
28: width:100px;
29: }
CSS for the Rounded DIVs
1: .search_gallery {
2: text-align:left;
3: width:730px;
4: margin-left:35px;
5: position:relative;
6: }
7: .search_gallery .head {
8: background-image:url(../images/babytop.gif);
9: background-repeat:no-repeat;
10: width:100%;
11: height:35px;
12: }
13: .search_gallery .body {
14: background-image:url(../images/babyrepeat.gif);
15: background-repeat:repeat-y;
16: width:100%;
17: height:100%;
18: text-align:left;
19: padding-left:0px;
20: padding-right:0px;
21: }
22: .search_gallery .foot2 {
23: background-image:url(../images/foot1.gif);
24: background-repeat:no-repeat;
25: height:16px;
26: }
XHTML for the Gallery
1: <div class="search_gallery">
2: <div class="head"></div>
3: <div class="body">
4:
5: <ul id="gallery">
6:
7: <li><a href="suppdocs/newborn.html"><img src="imagewin00.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>
8:
9: <li><a href="suppdocs/breastfeeding.html"><img src="imagewin1.gif" alt="Sample Alt Text" title="Sample Title"/></a></li>
10:
11: <li><a href="suppdocs/breastfeeding_tech.html"><img src="imagewin2.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
12:
13: <li><a href="suppdocs/changesinbody.html"><img src="imagewin6.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
14:
15: <li><a href="suppdocs/comonprobs2.html"><img src="imagewin5.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
16:
17: <li><a href="suppdocs/comonprobs.html"><img src="imagewin4.gif" alt="Sample Alt Text" title="Sample Title" /></a></li>
18: </ul>
19:
20: <div class="foot2"> </div>
21: </div></div>
