Click here for the new  weblog.

Provide Retina Pictures via CSS

The new iPad has arrived and with it the need to provide Retina optimized images not only for Apps, but for websites as well:

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
background: transparent url(path_to/2x.png);
}

Powerful New CSS Techniques and Tools

Daily Snippet

No C or Objective-C for today. Just good old CSS. This way I don’t have to answer all questions individually on how to make such a custom scrollbar.

Please keep in mind that this is of course WebKit only:

@media screen and (-webkit-min-device-pixel-ratio:0) {

html {
overflow-y: hidden;
/* if needed: background-color: transparent; */
}

body {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 10px;
overflow-y: scroll;
}


for iPhone/iPad you should declare own rules, in most cases this will probably be something with overflow: auto; and position: relative;

::-webkit-scrollbar {
width: 6px;
height: 6px;
z-index: 999;
}

::-webkit-scrollbar-button:start:decrement,
::-webkit-scrollbar-button:end:increment {
display: block;
}

::-webkit-scrollbar-thumb:vertical {
height: 20px;
background-color: rgba(0,0,0,0.2);
/* here you should change the color */
-webkit-border-radius: 5px;
-webkit-box-shadow: 0 1px 1px rgba(255,255,255,0.9);
}

::-webkit-scrollbar-track:enabled {
background-color: transparent;
}

::-webkit-scrollbar-track-piece {
background-color: transparent;
border: none;
margin: 10px 0 0px 10px;
/* here you should change the margins to fit your needs */
}


CSS Tricks: Perfect Full Page Background Image

CSS For Bar Graphs

9 Timeless 3 Column Layout Techniques

HTML5 + Canvas + Javascript + CSS Example

Real-time video processing with html5 video + canvas + javascript + css

The 30 CSS Selectors you Must Memorize

How to make sexy buttons with CSS