Archive for Web Development
Google Chrome: The Web Browser 2.0!
Google just announced Google Chrome. Google has posted on its official blog saying they screwed up by mailing this cartoon out early. A beta version of Chrome will be made available tomorrow in over 100 countries - but, alas, for Windows only to start, with Mac and Linux on the way.
Firefox Mobile Concept Video
A demo of an experimental UI for Mobile Firefox by Aza Raskin, Head of UX for Mozilla Labs. Excellent, it is… Zoom, Pan, Throw… Aza posted some prototype concepts for the Firefox Mobile UI/UX.
The user interface shown in the video is a working prototype and will change, but there are some worthwhile concepts—some borrowed from Apple, some borrowed from Firefox. The mobile browser is built for a touch screen and allows scrolling with a flick of the mouse like on the iPhone (although it is single-touch, not multi-touch). The need to type is minimized by displaying any number of pre-defined buttons at appropriate moments, such as “search Google”, “send email,” and “map this.”
Via: TechCrucnch / Mozilla
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>
