SHOW CODE
COPY URL

APPLE DEVICES INFO

This section shows actual dimensions of Apple devices.

If you want to create a set of device, you can change input values to get widths of devices calculated via your base width. Type some numbers and see the changes.

iMac

Dimensions
Based on 21,5 inch

Height: 45.0 cm (17.7 inches) Width: 52.8 cm (20.8 inches) Depth: 17.5 cm (6.9 inches)

px

Mac Book

Dimensions
Based on 13 inch

Height: 1,8 cm (0.71 inches) Width: 31,4 cm (12.35 inches) Depth: 21,9 cm (8.62 inches)

px

iPad 3

Dimensions
Based on 3rd gen

Height: 24.12 cm (9.50 inches) Width: 18.57 cm (7.31 inches) Depth: 0.94 cm (0.37 inch)

px

iPhone 4

Dimensions
Based on 4s version

Height: 11.5 cm (4.5 inches) Width: 5.9 cm (2.31 inches) Depth: 0.9 cm (0.37 inches)

px

iPhone 5

Dimensions
Based on 5s version

Height: 12.3 cm (4.87 inches) Width: 5.86 cm (2.31 inches) Depth: 0.76 cm (0.3 inch)

px

iPhone 6

Dimensions
Based on non-plus version

Height: 13.81 cm (5.44 inches) Width: 6.7 cm (2.64 inches) Depth: 0.69 cm (0.27 inch)

px

EXAMPLES OF USAGE

This section shows couple of examples, where to use Pure CSS Apple Devices. Beyond these, it belongs to your imagination.

CONTENT SLIDER

Simple slider made with Owl Carousel. Content must be append into .pca-inner class.

DEVICE MORPH ANIMATION

With a few lines of Javascript (only by adding and removing class), you can transform one device to another using CSS3 animation.