Category: css

fluid fluid fluid layout

A text with 2 lines on each sides, that occupies the rest of the space (to the sides).

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.

Realistic toggle switch buttons in pure CSS

I have tried to mimic the look of real (retro?) switch toggle buttons as much as I could, while keeping the DOM as basic as possible, and the CSS as small as I could.

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... 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... 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,… 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… 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',... 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… 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... 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… 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… Read more »