Yes again, I'm late. I'm sorry folks, but here we go.

Once again we bring together JavaScript and CSS to produce amazing results. Notice the header at the top of this website (assuming that I haven't impulsively changed my theme again)? Nice basic reflection, right? It's commonly known as the Wet Floor effect. I can just hear the Photoshop folks now, "what's so impressive about that?". Well seeing that I lack a lot in the Photoshop field it took me about 30 minutes to get this to look even reasonably good. But I did not have to go through all that trouble.

Reflections.js provides a simple method for web developers to do this. I haven't had too much experience with this other than just basic demos but I am again amazed at the power of JavaScript and CSS. You include the JavaScript and for each image you want to add a reflection to you add:

. That's it. It almost seems too simple doesn't it?

Popularity: 10%

Share This

Yes, I know I'm a bit late with this, but I still had to give you the run down.
Originally created by Lokesh Dhakar

Lightbox JS is a simple, unobtrusive script used to overlay images on the current page. It's a snap to setup and works on all modern browsers.

Have you ever gone to a website and seen this nice lil' thing they do when you click on a thumbnail and it pops up a larger image in the same browser window? That's LightBox. I've seen it before and I haven't given it a lot of thought. I just naturally assumed that it would take too much time to implement, so I left it alone. Oh was I wrong.

Popularity: 12%

Share This

I've sort of been fighting it for a while now. I must say I've been stuck in the past and I apologize for that. I was stuck in the whole "It's gotta be less that 800 pixels" things. That's just a basic rule of accessibility, which I've carried from years ago. Back them a significant number of Internet surfers still had relatively small monitors and used the 800x600 resolution. Therefore, if you wanted your content accessible to the highest majority of visitors you had to ensure that your site can be viewed relatively well in at least 800 pixels. Although the number of visitors using this resolution was in the minority, it was still not small enough to ignore.

Now comes another problem. Rather a solution that causes a problem. Most people fixed this resolution issue by slapping on a fixed layout. Now fixed layouts have their pros and cons. The pros are, you know exactly how it will look every time. You know where every thing will be on the website. One major con, I experienced at a friend's house. He had just gotten a brand new 21" flat panel monitor and everything looked so crisp. After a couple hours of playing, Wolfenstein: Enemy Territory we were just browsing the Internet and I just asked him to check out my latest post at the time. When he did I was horrified. My beautiful fixed width 787 pixel layout, which looks just brilliant on my 17" at home, still looked brilliant here, but it was so bloody small. I mean the thing was tiny and scrolling took forever. Yeah, we would have had to scroll a lot on a smaller monitor but since we have this huge one, why should we. There was just so much wasted screen space it annoyed me. You could almost fit a whole other site right next to mine.

Popularity: 4%

Share This

Sometimes we forget that CSS is actually code. Usually it is just thrown together as an after thought because we simply one a few styles here and there. However, anyone who has dealt with CSS files over 100 lines long knows that just throwing together tags in a wild maylay is not the way to go.

CSS code should be laid out and structure just like any other code we write. Emil at Friendly Bit has a detail article on how to structure large CSS files. He mentions five (5) main methodologies:

1. Order your selectors like the HTML
2. Always use the “full path” to elements
3. Indent your code cleverly
4. Each declaration on its own line
5. … in alphabetic order

Popularity: 3%

Share This

With the advent of CSS we knew that the visual aspect of HTML would be vastly improved. At least that was supposed to be the plan. We've seen it a lot with images and text, but I must say this is the first time that I've seen CSS used with forms in such a way. Smashing Magazine has an excellent list of CSS Based Forms, which give forms a modern new look. Take a look see.

Popularity: 5%

Share This

I'm not sure how many of you actually gave thought to creating your own Image Gallery, I know I haven't. If I needed one I'd just use a prepackaged one. But that was because my application always needed an entire gallery. But if you just need to through up some pictures a CSS Image Gallery is the way to go.

Why CSS? CSS is light and clean and it's HTML standard. Some of these methods require a tad bit of JavaScript.

Please note, however, that you need to have all of your images ready to go. You need your thumbnails, your display images and your large images. These are not scripts, they are Do It Yourself galleries so they don't create thumbnails for you or anything like that.

Alex at YouNeed2See Technology has a nice list of these galleries. Go check it out.

Popularity: 5%

Share This

Not much more to say than, here's the link. Dan at WebDeveloperNow, has a nice lil' basic CSS run down for beginners. Skip this if you've had to hack together some stuff before.

Popularity: 3%

Share This

I read this title and I was a bit confused. How, was my first question. Well, they did it. They did it a number of ways. Basically, they use a full background color and use CSS and a little bit of JavaScript to "eat" away at the corners. Very interesting idea.

Alessandro Fulciniti writes:

This is the original article. The technique has been improved with better browser support and a lot of new features. The new article has been published on the 6th of April 2005. You can read it here. The final version is Niftycube.

Rounded Corners with CSS are a hot topic in web design: I think that there are hundreds of articles on them. This page is intended to present the solution I came up, that doesn't requires images, extra markup nor CSS. Let's start.

Give them a look see:

Nifty Corners.

Source: Blogging Web 2.0

Popularity: 4%

Share This