super simple CSS3 side-menu

This is more of a phone app-like side menu this can be shown/hidden by pressing a button. It's very basic, and is all almost all is done via CSS, expect the button event (which is actually a hidden checkbox). no javascript, only CSS.
Read more…

Fancy Input – jQuery plugin

I've made an experimental jQuery plugin which basically makes it fun to type text. it works with input fields wrapped with a div, in a way that hides the actual input field (but still "communicates" with it), and put a span element containing the character pressed (in a normal use case), and every span element is being transitioned in a nice CSS3 way. The end result is a mimicked text input field which tries to simulate a real input field as much as possible, including copy, paste, undo and text selection changes. Read more…

Photobox – CSS3 jQuery image gallery

I wanted 3 things from any image gallery script: first, it to be beautiful and posses a great look & feel. second to be lightweight and not use many assets, and third, I want a script that was built with performance at mind.

I was working on something else entirely when I had to find a nice image gallery script. I wanted one of those that the user would basically click a thumbnail and the larger version of the image would be displayed on top of the page, in a modal window fashion.

Read more…

CSS3 loading animations

Its very popular now days to create nice loading animations using only CSS and in that way save some bandwidth, and as well these animations are vector-based, and not pixel-based, so they look great no matter how you scale them. BUT, they work only on the great browser Firefox. because of major bugs in Chrome, nobody in Google bother to fix:
Read more…

rolling stones: css-only rolling menu items

I have came up with this method recently while thinking of a nice effect to create for my blog’s main menu.
“It should be cool” I thought. Then I remembered my old days of flash, when I used to create menu items which vertically roll and change to different text style when hovered on. The point was to make it with only using only with CSS and minimal DOM as possible.

Read more…

validation, styling & semantics of forms

This post is about web forms and how they should be coded, validated, and styled (the proper way). The javascript validation code is based on jQuery, but in the future will be non-library dependent. The Validator is cross-browser and will give you the power to use future-proof input types such as 'tel', 'email', 'number', 'date', and 'url'. I can sum this as a 'template' for creating web forms.

Read more…

Sticky floating box

This is a jQuery plugin I wrote back in 2009 (improving it regularly since). It’s highly useful for side menus that you wish to float or to be “stuck” on screen as the user scrolls around your website. It’s funny because I still get fan mail for making this plugin, so I recently re-released it with extra features, so check it out.

Read more…

iPhone-like iOS5 toggle buttons

I love the buttons on the iPhone iOS-5, they are so cool, with their round trigger instead of the blocky older one introduced on the previous versions. I thought these toggle buttons would work nice as a checkbox, and with some CSS3 magic it can look pretty much identical to the iOS ones. although with a severe Chrome bug, I wouldn't think the implementation would work on Chrome for while
Read more…

Sudoku game in Javascript & HTML5

This Sudoku game was started as a personal project to bring me back on track with web development after spending months traveling and not using a computer all this time. I thought I forgot most, but it seems getting back to business took less time than I thought, and was also fun process.

I wanted to build a Sudoku game in pure JS, after playing lots of Sudoku on my iPhone. At the beginning the game was simple, I managed to create a board with random numbers which followed the rules of the game:

Read more…

CSS3 highlighted bullets

One day I was coding an un-ordered list, which was supposed to have a “classic” look & feel, with round default disc bullets, and then a thought accrued to me. why are bullets not interacting with the user? it would be cool if a bullet would look bigger when the user hover over a list item, but only on the text itself.

Read more…