Ajax Loader
×

Creating Single Element iPhone using CSS3

In this codecast, you'll learn to create a cool single element iPhone 4S using just CSS3. Click on play now :D

Related:

×

Coding Preferences


HTML

CSS

Javascript

More

21 Comments

× New

Sign In to comment

Rishabh :

@charliemagee This demo uses prefixfree. So maybe get prefixfree or use vendor prefixes -webkit-linear-gradient(...).

charliemagee:

I've tried to duplicate this but the linear gradients aren't working. I'm in Chrome Version 23.0.1271.64 and Safari 5.1.6.

AlexHackbunker:

Thanks for discovering us the magic of box shadow! : ) You are awesome

lordamit:

Awesome! I registered right after viewing this codecast :D

emn13:

Final addendum: Works in FF15... Doesn't work in Firefox nightly (v18) due to the fact that the prefixed version was replaced by the unprefixed version in v16. (as of 2012-09-08, anyhow...)

emn13:

In any case, I'd strongly recommend putting a disclaimer about the non-final (and clearly still in flux) linear-gradient syntax, and put a date on this content so that in a few years people don't get confused as to why it's not working for them...

emn13:

The linear gradient spec you're using is out of date.

rather than linear-gradient(top,...
you should be saying linear-gradient(to bottom, ...
also, in the final spec, angles are measured from the top clockwise (like elsewhere in CSS), not from the right counter-clockwise.

So e.g. your initial linear gradient should read:

linear-gradient(255deg, rgba(255,255,255,0.4), rgba(255,255,255,0.15) 35%, transparent 35%),
linear-gradient(to bottom, transparent 85px, #222222 85px, #151515 410px, transparent 410px),
linear-gradient(to bottom, #000, #0a0a0a);

Also, I think something (maybe prefixfree?) is borking firefox, quite possibly also due to this linear-gradient issue - I can get your demo to work (looks great, btw!) in a standalone document, but it renders poorly on the cssdeck lab.

Kushagra Agarwal:

Thanks :)

But I still can't find the solution for perfect home button

Akshay Aurora:

box-shadow can take inset parameter also, which is optional.

×

Your Default Settings - Preferences

×
×
×

Validations

(Errors from your JS or Pre-Processors code)

    HTML
    CSS
    JavaScript
    CSSDeck G+