J.me

Pure CSS3 responsive navigation with :target

This is an experiment I tried when working on WPMUDEV mobile navigation a while back, basically to make the navigation work with CSS alone. Using :target pseudo-class, this is possible, but of course it won’t work very well on every navigation.

For the sake of this demonstration, I have made a responsive navigation that will scale between smartphone, tablet and desktop.

Background image on table row

Applying a background image on table row is a classic issue that never get right, at least not in a first few pages on Google search when I looked on a solution. In fact, the only cross browser solution is to apply the background to the table cells instead. But what happen if you want a repeated background across the table row?

The problem

Let’s say you wanted to apply a background to a row that has disabled class.

The CSS:

table tr.disabled {
	background: url('disabled.png') repeat-x;
	color: #aaa;
}

Result:

Ouch! The background is in fact applied to the table cell, not the table row as we intended. It looks ugly as the image start in every cell!

Simple jQuery and CSS3 Slideshow Tabs

A slideshow and tabs is pretty common nowadays in any modern website. There is a ton of way to do this and many free and paid tools available for this feature. This make it very easy to create and it will always amaze people who see it. Basically, we will need at least Javascript to do this, CSS to style the slideshow and tabs as we wanted, and then finally the special HTML markup which make it possible. There is also a slideshow which make use of Flash.

The solution I tried to made right now is a very simple and basic one. It make use of simple jQuery to catch the click event and switching tabs, as well as the slideshow, the CSS to style it as much as we wanted and a simple HTML markup in one unordered list.

CSS Captcha 0.2 beta

Here I update the CSS Captcha, it is now on 0.2 beta! Thank you for the response of the previous version. While this can work nicely on major new browser, the compatibility with older browser is still minimum. Some mobile browser also haven’t implement some of CSS3 functionality, such as Opera Mini and Opera Mobile. So this is still experimental and shouldn’t be used yet on production website.

Please read the older version information here.

This update is merely a security update. The inline style is randomized now, which make it more difficult for bot to read. The order of the character is also randomized. Sure, it still doesn’t prevent the bot to read or make it impossible to read at all, but it should give more difficulty on creating such bot. 🙂

Still, no support for IE browser at all. 🙁

Change log 0.2b:
– Automatically randomize inline style
– Automatically randomize character order

Demonstration
Download

Enjoy! Any comment is appreciated.

August promotion, get 25% discount on PSD to XHTML service

Only on August 2010, you will get 25% discount on my service, which includes:

  • PSD to XHTML and CSS conversion (start at $45)
  • PSD to WordPress conversion (start at $130)
  • PSD to Magento conversion (start at $270)

This promotion only apply to new customer and only for the first transaction. 🙂

To get a free quote, please contact me with your project detail.

July Promotion on PSD to XHTML service

Recently I try my luck on offering service for PSD to XHTML and CSS conversion on Kaskus, the biggest local forum in Indonesia. I have done many PSD to XHTML and CSS conversion before, often, I also do conversion to WordPress and Magento. While I want to list my previous work here, unfortunately, due to the contract, I’m not permitted to list them. So basically, you can see how well my blog markup is for an example of my work. 🙂

Details for my service can be found here. For international user, you can just contact me for a quote.

For this service, I will offer a promotion every month. For July, you will get a limited offer for a free PSD to XHTML and CSS conversion, only for 1 person. The following condition is apply for this promotion:

  • You must agree and give me permission to list the work on my portfolio page and Kaskus (with a clear position of me as the PSD to XHTML and CSS converter, the design is still yours of course, no worries :))
  • Turn around is in a week (I’ll work on it when I have time, but I’ll make sure it completed in a week)
  • Only for 1 page (additional page will be charged with normal price)
  • I will choose the design that sent to me
  • Only for client that haven’t working with me before (sorry for returning client :))

Deadline is August 1. Your design will be converted to XHTML and CSS in a week after the deadline.

Blog redesign

Welcome to my new redesigned blog! It’s been a year and a half since the last time I changed the design. I have always wanted to change it, but I just always don’t have enough time. 🙂 I know I’m not that good enough in designing, but at least, this is the best design I ever made until now!

The idea behind this design is, to make a simple, usable layout and still looks beautiful. There is a lot of tutorial on the web that helped me when making this. I try to make the website small in size, so you’ll able to load it fast enough. There is also a cool trick on the background, which still make the markup small without much wrapping div over div to accomplish the effect. I also realize the importance on social networking nowadays, so I add links to some of my account. 🙂

CSS Captcha 0.1 beta

With coming of the CSS 3, it is now possible to draw using merely HTML and CSS. After seeing some awesome work that can be done with CSS 3, one of my friend suddenly get an idea to create a captcha. Thinking that bot today might haven’t able to pass this kind of captcha, I created this, CSS Captcha. The captcha that didn’t use any image. It just simply using HTML and CSS to draw characters in your screen. I might be not the first one to create this though. 🙂

Click here for demonstration

Moving Stick Figure with CSS 3 and jQuery

With CSS 3, creating a stick figure is easy and fun. But it is even better if it can move. So here it is

Click here for the demo.

This currently worked on Google Chrome and Safari. However, in my test, Safari lagged a lot in the animation. So Google Chrome performed the best!

Enjoy… 😀

Update: This is also submitted on Smashing Magazine CSS 3 Contest, you can preview and download from there too. 🙂

Pure CSS Dropdown with a Little CSS 3 Juice

Menu dropdown is one of the feature that almost every today webs have and it is one of the most popular feature used in the web. In past, such feature need Javascript event. Such as using onMouseOver or onMouseOut event. However, since CSS introduced, the new psuedo classes now have this ability. Also, this solution is work for all major browser, except, of course for the CSS3 juice added, which is currently only worked on web-kit browser such as Chrome and Safari. 🙂