3D chess game done in HTML/CSS/JS 3D Hartwig Chess Set → 3D Hartwig Chess Set Source (GitHub) → (via CreativeJS)
Tag Archives: css
Focal Point: Intelligent Cropping of Responsive Images
When working with images on small screen devices it is recommended to focus on the subject: don’t just show a scaled down version of the photo, it’s better to remove some of the background scenery and show the person on the photo (see the Obama example at the top of this post on responsive images). …
Continue reading “Focal Point: Intelligent Cropping of Responsive Images”
CSS Filterlab
While we have to wait for CSS Custom Filters to hit mainstream browsers, you can use CSS Filter Lab to play with built-in CSS filters already available in most WebKit browsers today, including Chrome, Safari, and even Mobile Safari on iOS6. With CSS Filters you can create stunning effects. filter: sepia(0.8) saturate(3) brightness(0.25) contrast(2); for …
CSS3 Lighting Effects
Responsive CSS3 Slider
With clever use of the general sibling selector: #slide1:checked ~ #slides .inner { margin-left:0; } #slide2:checked ~ #slides .inner { margin-left:-100%; } #slide3:checked ~ #slides .inner { margin-left:-200%; } #slide4:checked ~ #slides .inner { margin-left:-300%; } #slide5:checked ~ #slides .inner { margin-left:-400%; } Responsive CSS3 Slider →
Clearless — A collection of reusable LESS mixins
Cleverly animating accordions
3D Restaurant Menu
jQuery Stick ‘em
jQuery plugin to mimic the new and upcoming CSS position: sticky; position: sticky is a new way to position elements and is conceptually similar to position: fixed. The difference is that an element with position: sticky behaves like position: relative within its parent, until a given offset threshold is met in the viewport. jQuery Stick’em …