Skip to content
Sign upLog in
← Back to Community

CSS iPhone 📱

Profile icon
Bookie0

CSS iPhone 📱

Hello there! 👋

Hope you you're going well!

This is a black iPhone 12 made in HTML, CSS, and some JS!

Here's how it looks like:

howItLooksLike

I tried to make it look as close as possible to the original iPhone:

real

I also made the passcode screen, the homescreen, and even the camera app!



Features ✨

Lockscreen

lockscreen

  • Lockscreen wallpaper
  • Lock icon
  • Time and date
  • Torch and camera icon
  • Swipe up to unlock and home indicator animation

You can click the torch icon to 'turn it on' (doesn't actually work). You can also click the camera icon to go to the camera app, just like the real thing. Click the home indicator to unlock the iPhone.

Camera

camera

  • Image
  • Using camera and microphone indicator
  • Flash, hidden, live icons
  • Zoom
  • Modes
  • Pictures
  • Capture
  • Rotate

You can click the capture button (satisfying)!

Passcode

passcode

  • Lock icon
  • Dots
  • Numbers
  • Emergency and cancel buttons

You can actually type in a password and watch the dots fill in. Any password works.

Home page

homepage

  • Homepage wallpaper
  • Apps
  • 3 dots
  • Menu bar

When the home page loads up, the apps have a kind of 'bounce-in' animation, similar to the one for iPhone.


Hardware 🔨

notch

For the hardware of the phone (case, buttons, notch, etc.), I tried to make it look like the real thing.

For the side buttons, you can see the ringer, volume, and power buttons. You can click the volume and power buttons, althought only the power button actually does something (it turns off the phone). When the phone is off, you can touch the screen (tap to wake) or click the power button again to turn the phone back on.

The notch has the mic and the camera.

The casing even has the little marks or dashes that look like this for the real iPhone:

dash


Style 🎨

Wallpapers

The lockscreen wallpaper is the dark mode default wallpaper:

lockWallpaper

The homepage wallpaper is the orange light mode iOS 13 wallpaper because I think it looks cool:

homeWallpaper

Fonts
The font family I used mostly is the default Apple font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif.

I also used San Francisco Compact for the camera app.

Icons

Most of the icons come from Apple's developer package icons, a great bundle of more than 3,000 symbols which you can customize.

One icon from the phone is from Ionicons as I couldn't find it on the Apple package.

Bent effect

On iPhone's camera app, you can scroll sideways to scroll through the different camera modes (video, photo, slo-mo, etc.) and whilst I didn't make the scrolling, effect, I was able to make the bent effect.

This is how it really looks like:

bentReal

And this is what I mananged to achieve:

bent

I was able to do that by making the color of the letters at the far ends a different shade of gray, and I also used transform: rotateY(50deg); to kind of squish the letters more together and make them thinner. Hence, the bent effect was achieved.


Closing 🚪

Well, that's about all! Make sure to let me know any comments, suggestions, or questions if you have them! :D

Have an excellent day!!!

Bye! 👋





TL;DR

In case you didn't read anything above (I hope you did; it takes quite some time to write the whole README)...

Here's what you can basically do:
- Click the power button on the right to turn the phone on/off
- Click the home indicator on the bottom and type in a password to go to home
- Click the camera icon for camera
- Click the torch icon for torch
Voters
Profile icon
gasparsans
Profile icon
AhmadDanial2
Profile icon
StoRmyeY
Profile icon
lunchwebsite
Profile icon
kelseyramirez12
Profile icon
LoganHudson
Profile icon
SausageFinger
Profile icon
JuicyOrangePG3D
Profile icon
SKKYZ
Profile icon
ULever
Comments
hotnewtop
Profile icon
ruiwenge2

wowwwwwww!!! :D

Profile icon
Bookie0
Profile icon
sojs

@Bookie0
you are so incredibly good at CSS it is unimaginably awesome

great site.

also i stink at spelling so dont judge

Profile icon
Bookie0

@sojs
Lmao thank you! :)

Profile icon
sojs
Profile icon
FlaminHotValdez

ew iphone baf android gut

no updoot

Profile icon
Bookie0
Profile icon
TextCoder

@FlaminHotValdez
You, sir, are wrong

IPHON GUT ANDROID BAF UBDOOTTTTTTTTTTTTT

Profile icon
xfinnbar

very nice

Profile icon
Bookie0

Thanks! :)

@xfinnbar

Profile icon
lilykhan

Wow! amazing Bookie :O that's impressive!!

Profile icon
Bookie0

@lilykhan
Thank you Lily! xD

Profile icon
lilykhan

can u share this on twitter?

@Bookie0

Profile icon
Bookie0

@lilykhan
Sorry I don't have twitter :(
If you want, you can share it! :)

Profile icon
lilykhan

Yay!! I did, here's the link if u want to see the post - https://twitter.com/LilyKhan786/status/1437812547357331456

Profile icon
Bookie0

@lilykhan
(^‿^) Thanks!! xD

Profile icon
Nathanielx3rd

image

Apple after seeing this

Profile icon
Bookie0
Profile icon
Nathanielx3rd

@Bookie0
I salute you Bookie! You are way better at css than I ever imagined! Keep up the good work!

Profile icon
Bookie0
Profile icon
Lobrima-Kingheart

OML This is so cool and a very genius piece of work.

Profile icon
Bookie0

Thank you lol! :D

@Lobrima-Kingheart

Profile icon
angywall

It looks beautiful, as always! How long have you been using an iPhone? I, for example, switched to an iPhone three years ago. In the beginning, it was unusual after Android. After Android, which is flexible in terms of settings, you have to get used to the peculiarities of iOS. Icons follow each other without tearing, the design of icons can not be changed, no loungers, shells, and fun with fonts. On iPhones, everything is strict: you can change the wallpaper on the desktop or lock screen, arrange the icons in order, or sort them into folders. In addition, I had to figure out how to unlock the Verizon iPhone.

Profile icon
sonub

very coooollll

Profile icon
Bookie0

Thanks! :D

@sonub

Profile icon
Baconman321

sadness I barely know CSS :(

Great tho!

Profile icon
Bookie0

@Baconman321
Thanks lol! ;)

Profile icon
Th3Coder

ABSOLUTELY AMAZING!!!

Profile icon
Bookie0

@Th3Coder
Thanks!! :)

Profile icon
Th3Coder

@Bookie0
you're welcome! :)

Profile icon
BIue

IM STILL ALIVEEEE

Profile icon
Bookie0

okay..


@BIue

Profile icon
tussiez

Awesome! Very slow because of heavy CSS :)

Profile icon
Bookie0

@tussiez
Thanks lol! Yeah there's also loads of pictures lol

Profile icon
[deleted]

someone must hire this person!

Profile icon
Bookie0

lmao thanks!

@Martin025

Profile icon
FloCal35

iPhone 13 in a few days

Profile icon
Bookie0

@FloCal35
Yesss

Profile icon
maxina

AS AN ANDROID USER I AM OFFENDED
JK JK JK
You are really good at css just know thatt

Profile icon
Bookie0

@lol
thanks :)

Profile icon
Whippingdot

Pretty nice...

Profile icon
Bookie0

@Whippingdot
Thanks!

Profile icon
RayhanADev

So kewl :O. Bookie you've become like--the best Frontend dev on Replit in less than a year awesome XD.

Profile icon
Bookie0

Lmao thanks, I’ve still got plenty to learn :D

@RayhanADev

Profile icon
ch1ck3n

@RayhanADev
:( what about me

Profile icon
AmoghTheCool

@RayhanADev
and me :(
nah jk i suck at frontend

Profile icon
sojs

like what?

@Bookie0

Profile icon
RayhanADev

@ch1ck3n
@AmoghTheCool
you two are also great! I've just been watching Bookie's work for the past year-ish and have seen his improvement xD.

Profile icon
Bookie0

Idk I want to learn more about like images and icons and logos and stuff so I can make them myself
I also think I should really start to learn JS or smth cuz I really only know the basics lol

@sojs

Profile icon
AmoghTheCool

@RayhanADev
I was just joking, frontend is not my forte :)

Profile icon
Nathanielx3rd

@RayhanADev
havent you seen my site! SMH I can't believe! What about me?

Profile icon
ruiwenge2

yes you should

@Bookie0

Profile icon
QuickV

So kewl :O. Bookie you've become like--the best Frontend dev on Replit in less than a year awesome XD.

Agreed, he should be hired by some company or smthn xd

@RayhanADev

Profile icon
Bookie0
Profile icon
QuickV