

Learn How to make a Single Element iPhone in CSS3 - binarydreams
http://cssdeck.com/labs/creating-single-element-iphone-using-css3

======
redslazer
I have never learnt more things in css in such a short time. Seeing someone
else go through and seeing them write CSS with live results gave me more
insight that the constant rehash of "things you can do with CSS3" . Pausing it
playing around with it and the continue the tutorial was amazing.

The practical application seems pretty low but as a way of teaching CSS it was
great. If someone knows more tutorials like that please tell me about them.

~~~
binarydreams
There's a whole bunch of such 'codecasts' coming soon.

Not only on CSS3 stuff but on JS, Coffee, SASS, Zen Coding, Markdown, etc.
too!

~~~
redslazer
Is there somewhere I can subscribe so I hear about it when that happens? Or
could I give you my email address?

~~~
binarydreams
You can follow @cssdeck on twitter and also subscribe to RSS
<http://feeds.feedburner.com/cssdeck>

~~~
redslazer
That twitter handle doesn't seem to exist :(

Ill just sub to the feed :)

~~~
binarydreams
Did you remove '@' ?

<https://twitter.com/cssdeck>

~~~
redslazer
Oh wow im an idiot. I kept looking for cssdesk (note the "desk"). All good :)

------
emn13
Not CSS3... anymore :-)

Unless I'm seriously mistaken; the webcast is using the (fairly old) linear
gradient syntax which was _removed_ in FF16.

Or am I missing something?

Spec:

<http://dev.w3.org/csswg/css3-images/#linear-gradient-type>

In essence, you can't say linear-gradient(top, ....) but need to say linear-
gradient(to bottom, ...).

~~~
WebGate
scpécifications the change so quickly, and to adapt to the largest number of
users, I think it is preferable to use a wide range of syntaxes.. Isn't it ?

------
ceol
Awesome tutorial! A nitpick: Your use of "it's" is incorrect. When used to
convey possession, you omit the apostrophe.

Also, this is my first time seeing cssdeck, and I must tell you how fantastic
it is! The experience was great.

~~~
kushsolitary
Thanks :) Will keep it in mind next time. My English starts to suck when I
record something...

~~~
pbhjpbhj
It was really noticeable in the codecast because you went back and "corrected"
it.

------
DenisM
Is there a vector-graphics language that similar to CSS in capabilities and
expressive power, but with a more approachable syntax?

I think it's very cool when an image is created in essence programmatically,
this really speaks to me as a developer, and I certainly appreciate the
declarative nature of CSS, but I wish for something that is easier to read,
and so easier to maintain over time, including source control with
branches/merges etc. An added bonus to such language would be ability to
compile it down to CSS, or Objective-C/UIKit, or C#/Windows, or simply render
it to static bitmaps...

As someone who doesn't know CSS, I see it similar to the way I see PERL - you
can do cool things, but I wouldn't know where to start if I had to change
anything, except by trying all things at random.

~~~
duopixel
SVG sounds pretty much like what you're looking for.

Single element CSS hacks like this are impressive demonstrations of technical
knowledge, but it was never meant to be used like this.

~~~
lbotos
SVG also has "up and coming" full support in most browsers and you can use
compatibility wrappers such as <http://raphaeljs.com/>

------
gondo
about the 'impossible square' on the button, you can use content:'◻'; //
<http://www.fileformat.info/info/unicode/char/25fb/index.htm> and then just
position it into middle, you ll know the rest

~~~
kushsolitary
You are awesome, I just tried with '▢' character and made this:
<http://cssdeck.com/labs/wsuol0ff/0>

Perfection!

Edit: I updated the codecast, check it now..

Edit Edit: The square is ridiculously big in Firefox... :-\

------
lachyg
This is ridiculous. I'm trying to think of a practical / smart use of this.
Incredibly clever, and remarkable show of skill, I'm just questioning it.

~~~
mortenjorck
The fact that the end result looks like an iPhone is incidental to the
advanced CSS techniques on display in the "codecast."

~~~
TazeTSchnitzel
Yep. I am learning a lot about box-shadow, but I won't be making iPhones with
it!

------
joshcrowder
This is a great tutorial. CSSDesck is fantastic I love how simple the idea is,
no fluff just code.

------
skyhook_mockups
This really is excellent... shows an amazing level of creativity and skill.

Just bear in mind that these effects will incur a huge performance hit
compared to bitmaps.

------
Timothee
Very interesting.

Tiny nitpick: this is more an iPhone 4 than a 4S: the black notch on the top
frame is not present with the 4S. (they have one notch at the top of each
side) Though to be perfectly accurate, you'll also need two notches at the
bottom (one on each side) of the frame as well. ;-)

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

It took me a solid minute to find the "play" button. It was hidden on the
other send of the page in the bottom corner in faint color.

------
madmikey
Stupendous!!! you will be my inspiration to get started with CSS3..:) Thanks a
lot!!

------
sp332
It's not a tutorial, but you can see the code for a single-element MacBook Pro
here <http://news.ycombinator.com/item?id=4384954>

------
monsterix
Splendid! I am thinking if there is a way to get wood-grain effect similarly?

~~~
uptown
Pretty sure you could pull it off using a blended set of CSS linear gradients.
Some of the organic swirls you see in wood might be considerably more-
difficult to replicate, but you could simulate those to a degree by using
sequences of small straight shapes ordered to form a shape that's curved in
appearance.

------
harel
Very brave considering Apple is very trigger happy with the lawsuit gun
whenever they see anyone using rounded corners not to mention a full on iPhone
image... :)

------
chinchang
simply superb!

------
rorrr
Sort of cool, but absolutely useless.

~~~
TazeTSchnitzel
It's to teach you CSS3 techniques, with a whimsical demonstration.

