├── script.js ├── README.md ├── .glitch-assets ├── index.html └── style.css /script.js: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # 📸 Recreating a polaroid camera in css 2 | 3 | Tutorial: https://fossheim.io/writing/posts/css-polaroid-camera/ 4 | -------------------------------------------------------------------------------- /.glitch-assets: -------------------------------------------------------------------------------- 1 | {"name":"drag-in-files.svg","date":"2016-10-22T16:17:49.954Z","url":"https://cdn.hyperdev.com/drag-in-files.svg","type":"image/svg","size":7646,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/drag-in-files.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(102, 153, 205)","uuid":"adSBq97hhhpFNUna"} 2 | {"name":"click-me.svg","date":"2016-10-23T16:17:49.954Z","url":"https://cdn.hyperdev.com/click-me.svg","type":"image/svg","size":7116,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/click-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(243, 185, 186)","uuid":"adSBq97hhhpFNUnb"} 3 | {"name":"paste-me.svg","date":"2016-10-24T16:17:49.954Z","url":"https://cdn.hyperdev.com/paste-me.svg","type":"image/svg","size":7242,"imageWidth":276,"imageHeight":276,"thumbnail":"https://cdn.hyperdev.com/paste-me.svg","thumbnailWidth":276,"thumbnailHeight":276,"dominantColor":"rgb(42, 179, 185)","uuid":"adSBq97hhhpFNUnc"} 4 | {"uuid":"adSBq97hhhpFNUna","deleted":true} 5 | {"uuid":"adSBq97hhhpFNUnb","deleted":true} 6 | {"uuid":"adSBq97hhhpFNUnc","deleted":true} 7 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Polaroid 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 | 31 |
32 |
33 |
34 |
35 | 36 | 37 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | * { 2 | padding: 0; 3 | margin: 0; 4 | box-sizing: border-box; 5 | } 6 | 7 | body { 8 | background-color: lightblue; 9 | background-image: radial-gradient(#9CDCE0, #9CD4E0); 10 | } 11 | 12 | .camera { 13 | display: block; 14 | width: 570px; 15 | height: 470px; 16 | margin-left: auto; 17 | margin-right: auto; 18 | margin-top: 100px; 19 | margin-top: calc(50vh - 235px); 20 | position: relative; 21 | } 22 | 23 | .camera .bottom { 24 | display: block; 25 | width: 100%; 26 | height: 165px; 27 | position: absolute; 28 | bottom: 0; 29 | border-radius: 11px 11px 30px 30px; 30 | background-image: radial-gradient(#E1DFE2 60%, transparent 60%), 31 | radial-gradient(#E1DFE2 60%, transparent 60%), 32 | linear-gradient(90deg, #E1DFE2, #EAE8EB), 33 | linear-gradient(90deg, #EAE8EB, #E1DFE2), 34 | linear-gradient(90deg, #85817E, rgba(47,43,43,0) 5% 95%, #696461), 35 | linear-gradient(#4E4A49, #100C0D), 36 | linear-gradient(#312F32, #2A2A27, #363233); 37 | background-size: 50px 60px, 38 | 50px 60px, 39 | 185px 30px, 40 | 185px 30px, 41 | 100% 100%, 42 | 100% 20px, 43 | 100% 100%; 44 | background-repeat: no-repeat; 45 | background-position: 160px -26px, 46 | 360px -26px, 47 | top right, 48 | top left, 49 | top left, 50 | bottom left, 51 | bottom left; 52 | box-shadow: -1px 3px 2px 0px rgba(249,247,248, 0.65) inset; 53 | 54 | } 55 | 56 | .camera .bottom .printer { 57 | display: block; 58 | width: 470px; 59 | height: 40px; 60 | background-color: red; 61 | margin-left: auto; 62 | margin-right: auto; 63 | margin-top: 60px; 64 | border-radius: 3px; 65 | 66 | background-image: linear-gradient(90deg, #474548 90%, #343233 90%), 67 | linear-gradient(90deg, #0E090D 10%, #4A4849 10%), 68 | linear-gradient(#4C4A4D 4%, #161214 9% 20%, #484445 30% 55%, #1A1617 80% 93%, #B0AFAD 99%); 69 | background-size: 8px 100%, 8px 100%, 100% 100%; 70 | background-repeat: no-repeat; 71 | background-position: top left, top right; 72 | } 73 | 74 | .camera .bottom .labels .rainbow { 75 | display: block; 76 | width: 40px; 77 | height: 46px; 78 | position: absolute; 79 | top: 100px; 80 | left: 80px; 81 | background-image: linear-gradient( 82 | #1D160F 5%, /* Black*/ 83 | #0E9EE0 5% 14%, /* Blue */ 84 | #1F211A 14% 19%, /* Black */ 85 | #0EAE4F 19% 32%, /* Green */ 86 | #2B2106 32% 37%, /* Black */ 87 | #FFB404 37% 50%, /* Yellow */ 88 | #2A1303 50% 55%, /* Black */ 89 | #FE8204 55% 68%, /* Orange */ 90 | #292313 68% 80%, /* Black */ 91 | #E02D28 80% /* Red */ 92 | ); 93 | } 94 | 95 | .camera .bottom .labels .logo { 96 | font-family: "Helvetica Neue", "Helvetica", sans-serif; 97 | font-size: 24px; 98 | font-weight: 600; 99 | color: #CDCCC8; 100 | text-align: center; 101 | margin-top: 8px; 102 | } 103 | 104 | .camera .bottom .toggle-container { 105 | display: block; 106 | width: 135px; 107 | height: 35px; 108 | background-color: red; 109 | position: absolute; 110 | margin-left: auto; 111 | margin-right: auto; 112 | left: 0; 113 | right: 0; 114 | border-radius: 0 0 10px 10px; 115 | background-image: radial-gradient(#353334, #4C4849 40%, transparent 70%), 116 | radial-gradient(#29272A, #464445 40%, transparent 70%), 117 | linear-gradient(#8B8786 10%, #5E5A5B 20% 65%, #969291); 118 | background-size: 70px 70px, 70px 70px, 100% 100%; 119 | background-repeat: no-repeat; 120 | background-position: top -25px left -40px, top -15px right -35px, top right; 121 | } 122 | 123 | .camera .bottom .toggle-container .toggle { 124 | position: absolute; 125 | display: block; 126 | width: 100px; 127 | height: 20px; 128 | top: 6px; 129 | left: 0; 130 | right: 0; 131 | margin-left: auto; 132 | margin-right: auto; 133 | border-radius: 10px; 134 | background-image: linear-gradient( 135 | #747371 2%, 136 | #525055 2%, 137 | #565152, 138 | #535250 139 | ); 140 | border: 0.5px solid #141011; 141 | } 142 | 143 | .camera .bottom .toggle-container .toggle .handle { 144 | display: block; 145 | position: absolute; 146 | width: 20px; 147 | height: 20px; 148 | right: 0; 149 | top: -2px; 150 | background-color: red; 151 | background-image: radial-gradient(#525051, #4B4746); 152 | border-radius: 10px; 153 | border: 0.5px solid rgba(133, 129, 128, 0.15); 154 | box-shadow: -1px 5px 5px #181619; 155 | } 156 | 157 | .camera .top { 158 | display: block; 159 | position: relative; 160 | width: 540px; 161 | height: 320px; 162 | margin-left: auto; 163 | margin-right: auto; 164 | border-radius: 35px 35px 0 0; 165 | background-image: linear-gradient( 166 | 90deg, 167 | rgba(243,243,243,0.75), 168 | rgba(243,243,243,0) 15% 85%, 169 | rgba(243,243,243,0.75) 170 | ), 171 | linear-gradient(#FEFEFE, #F9F7F8), 172 | linear-gradient(#DDD9DA, #E2DEDF, #EAE8EB, #F3F1F4); 173 | background-size: 100%, 100% 3px, 100%; 174 | background-repeat: no-repeat; 175 | box-shadow: -1px 1px 2px 3px rgba(249,247,248, 0.85) inset; 176 | } 177 | 178 | .camera .top .lens { 179 | position: absolute; 180 | display: block; 181 | width: 210px; 182 | height: 210px; 183 | border-radius: 105px; 184 | background-color: black; 185 | top: 15px; 186 | left: 0; 187 | right: 0; 188 | margin-left: auto; 189 | margin-right: auto; 190 | 191 | background-image: radial-gradient(transparent, #000000), 192 | radial-gradient(rgba(51,53,54,0.4), transparent), 193 | radial-gradient( 194 | #2A282B 0% 27%, /* dark body 4 */ 195 | #070508 27.5% 28%, /* dark shadow 4 */ 196 | #4E4C4F 28.5% 28.6%, /* highlight 3 */ 197 | #2A282B 28.7% 29.3%, /* dark body 3 */ 198 | #070508 29.5% 29.8%, /* dark shadow 3 */ 199 | #4E4C4F 30% 30.5%, /* highlight 2 */ 200 | #2A282B 30.5% 32.5%, /* dark body 2 */ 201 | #070508 33% 33.5%, /* dark shadow 2 */ 202 | #4E4C4F 34% 34.5%, /* highlight 1 */ 203 | #2A282B 34.5% 36.5%, /* dark body 1 */ 204 | #070508 37% 37.5%, /* dark shadow 1 */ 205 | #3D3B40 38% 38.5%, /* shadow 8 */ 206 | #908E91 39% 39.5%, /* highlight 8 */ 207 | #3D3B40 40% 40.5%, /* shadow 7 */ 208 | #908E91 41% 41.5%, /* highlight 7 */ 209 | #3D3B40 42% 42.5%, /* shadow 6 */ 210 | #908E91 43% 43.5%, /* highlight 6 */ 211 | #3D3B40 44% 44.5%, /* shadow 5 */ 212 | #908E91 45% 45.5%, /* highlight 5 */ 213 | #3D3B40 46% 46.5%, /* shadow 4 */ 214 | #908E91 47% 47.5%, /* highlight 4 */ 215 | #3D3B40 48% 48.5%, /* shadow 3 */ 216 | #908E91 49% 49.5%, /* highlight 3 */ 217 | #3D3B40 50% 50.5%, /* shadow 2 */ 218 | #908E91 51% 51.5%, /* highlight 2 */ 219 | #3D3B40 52% 52.5%, /* shadow 1 */ 220 | #908E91 53% 54%, /* highlight 1 */ 221 | #241E1E 54.5% 57%, /* outer */ 222 | #131114 57% 59%, /* shadow */ 223 | #3C3A3D 59% 60%, /* highlight */ 224 | #241E1E 60% /* outer */ 225 | ); 226 | 227 | background-size: 350px 350px, 350px 350px, 100%; 228 | background-position: bottom -100px left, top -120px right 10px, center center; 229 | background-repeat: no-repeat; 230 | box-shadow: 15px 55px 60px 5px #767072; 231 | } 232 | 233 | .camera .top .lens .glass { 234 | display: block; 235 | width: 70px; 236 | height: 70px; 237 | border-radius: 40px; 238 | position: absolute; 239 | margin-left: auto; 240 | margin-right: auto; 241 | left: 0; 242 | right: 0; 243 | top: 70px; 244 | background-image: radial-gradient( 245 | rgba(119, 109, 80, 0.85), 246 | transparent 40% 247 | ), 248 | radial-gradient( 249 | rgba(51,180,105,0.25) 13%, 250 | rgba(119,159,59,0.2) 53% 70%, 251 | rgba(119,159,59,0) 68% 252 | ), 253 | radial-gradient( 254 | rgba(51,180,105,0.25) 23%, 255 | rgba(51,180,105,0.2) 53% 70%, 256 | rgba(51,180,105,0) 68% 257 | ), 258 | radial-gradient( 259 | #2C1F28, 260 | #241921 55%, 261 | #080609 70% 262 | ); 263 | background-size: 100%, 190% 100%, 190% 100%, 100%; 264 | background-repeat: no-repeat; 265 | background-position: center -10px, -30px -48px, -30px 55px, center; 266 | } 267 | 268 | .camera .top .shutter { 269 | display: block; 270 | width: 57px; 271 | height: 57px; 272 | position: absolute; 273 | border-radius: 30px; 274 | bottom: 30px; 275 | left: 25px; 276 | background-image: radial-gradient(#DA1107 51%, #ED4B1D 53.5%); 277 | background-size: 200% 200%; 278 | background-repeat: no-repeat; 279 | background-position: bottom -10px center; 280 | border: 1px solid #520000; 281 | box-shadow: 1px 1px 1px rgba(255,255,255,0.2) inset, 0 0 2px 6px #DFDAD7, 1px 6px 10px #66514D, -1px -7.5px 1px white; 282 | } 283 | 284 | .camera .top .flash { 285 | position: absolute; 286 | width: 90px; 287 | height: 160px; 288 | border-radius: 15px; 289 | left: 25px; 290 | top: 25px; 291 | box-shadow: -1px -1px 1px #BDB8B5, 292 | -1.5px -2.1px 0.5px #24201D, 293 | -4px 4px 3px 3px #F4F0EF, 294 | -5px 8px 8px #ABA6AA, 295 | 0.25px 1px 1px 5px #3E3A38 inset, 296 | 0 -6px 1px 1px #F6F6F8 inset; 297 | background-image: linear-gradient(#EDECEA,#F6F6F8), 298 | linear-gradient( 299 | 90deg, 300 | rgba(247,246,244,0) 3% /*transparent*/, 301 | rgba(247,246,244,0.5) 3% 6% /*white*/, 302 | rgba(247,246,244,0) 6% 11% /*transparent*/, 303 | rgba(247,246,244,0.5) 12% 15% /*white*/, 304 | rgba(247,246,244,0) 15% 21% /*transparent*/, 305 | rgba(247,246,244,0.5) 21% 23% /*white*/, 306 | rgba(247,246,244,0) 23% 24% /*transparent*/, 307 | rgba(247,246,244,0.5) 24% 25% /*white*/, 308 | rgba(247,246,244,0) 25% 27% /*transparent*/, 309 | rgba(247,246,244,0.5) 27% 28% /*white*/, 310 | rgba(247,246,244,0) 28% 31% /*transparent*/, 311 | rgba(247,246,244,0.5) 31% 33% /*white*/, 312 | rgba(247,246,244,0) 33% 35% /*transparent*/, 313 | rgba(247,246,244,0.5) 35% 37% /*white*/, 314 | rgba(247,246,244,0) 37% 39% /*transparent*/, 315 | rgba(247,246,244,0.5) 39% 41% /*white*/, 316 | rgba(247,246,244,0) 41% 43% /*transparent*/, 317 | rgba(247,246,244,0.5) 43% 45% /*white*/, 318 | rgba(247,246,244,0) 45% 48% /*transparent*/, 319 | rgba(247,246,244,0.5) 48% 50% /*white*/, 320 | rgba(247,246,244,0) 50% 55% /*transparent*/, 321 | rgba(247,246,244,0.5) 55% 57% /*white*/, 322 | rgba(247,246,244,0) 57% 59% /*transparent*/, 323 | rgba(247,246,244,0.5) 59% 60% /*white*/, 324 | rgba(247,246,244,0) 60% 61% /*transparent*/, 325 | rgba(247,246,244,0.5) 61% 62% /*white*/, 326 | rgba(247,246,244,0) 62% 64% /*transparent*/, 327 | rgba(247,246,244,0.5) 64% 66% /*white*/, 328 | rgba(247,246,244,0) 66% 69% /*transparent*/, 329 | rgba(247,246,244,0.5) 69% 71% /*white*/, 330 | rgba(247,246,244,0) 71% 75% /*transparent*/, 331 | rgba(247,246,244,0.5) 75% 77% /*white*/, 332 | rgba(247,246,244,0) 77% 79% /*transparent*/, 333 | rgba(247,246,244,0.5) 79% 80% /*white*/, 334 | rgba(247,246,244,0) 80% 81% /*transparent*/, 335 | rgba(247,246,244,0.5) 81% 82% /*white*/, 336 | rgba(247,246,244,0) 82% 84% /*transparent*/, 337 | rgba(247,246,244,0.5) 84% 86% /*white*/, 338 | rgba(247,246,244,0) 86% 89% /*transparent*/, 339 | rgba(247,246,244,0.5) 89% 91% /*white*/, 340 | rgba(247,246,244,0) 81% 95% /*transparent*/ 341 | ), 342 | linear-gradient( 343 | 90deg, 344 | rgba(186,184,185,0.1), 345 | rgba(247,246,244,0.65), 346 | rgba(186,184,185,0.1) 347 | ), 348 | linear-gradient( 349 | 90deg, 350 | rgba(186,184,185,0.1), 351 | rgba(247,246,244,0.65), 352 | rgba(186,184,185,0.1) 353 | ), 354 | linear-gradient( 355 | #E3DEDA 15%, 356 | #AFAAA6 25% 35%, 357 | transparent 45% 358 | ), 359 | linear-gradient( 360 | #F0EFED 10%, 361 | #B0ABA7 20%, 362 | #403C3B 40%, 363 | #2F2B2A 43%, 364 | #292524 45% 55%, 365 | #696562 65% 75%, 366 | #C2BFBA 82% 86%, 367 | #DEDAD7 90% 93%, 368 | #C9C6C1 94% 96%, 369 | #FFFEFA 98%), 370 | linear-gradient(#34332F, #3E3A38); 371 | background-size: 42px 20px, 42px 100%, 3px 100%, 3px 100%, 100% 3px, 100%, 100%; 372 | background-repeat: no-repeat, no-repeat, no-repeat, no-repeat, repeat, repeat, no-repeat; 373 | background-position: 24px top, 25px top, 22px top, 64px top, center, center, center; 374 | } 375 | 376 | .camera .top .viewfinder { 377 | position: absolute; 378 | background-color: #1B1A18; 379 | width: 110px; 380 | height: 110px; 381 | border-radius: 20px; 382 | right: 20px; 383 | top: 20px; 384 | box-shadow: 0.5px 0.5px 1px 1.5px #F1EDEE, 385 | 1.5px 1px 1px 1px #3B3535 inset, 386 | 2px 2px 1px 1px #9F9E9C inset, 387 | -0.5px -2px 1.5px #9B9A98 inset, 388 | 1px 1.5px 0.5px 1px #FBF7F8; 389 | } 390 | 391 | .camera .top .viewfinder .glass { 392 | position: absolute; 393 | background-color: white; 394 | width: 75px; 395 | height: 75px; 396 | left: 18px; 397 | top: 18px; 398 | border-radius: 20px; 399 | background-image: radial-gradient(rgba(236, 234, 237, 0.3) 50%, transparent 60%), 400 | radial-gradient(rgba(193, 189, 186, 0.3) 50%, transparent 60%), 401 | radial-gradient(#5B5758 45%, #302C2D, #131112); 402 | background-size: 106% 32%, 106% 25%, 100%; 403 | background-repeat: no-repeat; 404 | background-position: -3px -7px, bottom -8px left -3px, center; 405 | box-shadow: 0px 0px 1px 0px #010000 inset, 406 | 0 0 1px 1px #393836 inset, 407 | 0 0 2px 2px #010000 inset, 408 | 0 0 2px 4px #393836 inset, 409 | 0 0 1.5px 4.5px #010000 inset, 410 | -0.5px -1px 1px #5F5E5C, 411 | 0.25px 2px 2px #464543; 412 | } 413 | 414 | 415 | .camera .top .viewfinder .glass .back { 416 | position: absolute; 417 | background-image: linear-gradient(#ECEAED, #E2E0E1); 418 | width: 40px; 419 | height: 40px; 420 | left: 18px; 421 | top: 19px; 422 | border-radius: 10px; 423 | box-shadow: 0.5px 2px 2px 0 #5E5B56, 424 | 0px 1px 3px 0px #CAC4C5, 425 | -4px 0px 5px 0px rgba(9,7,5,0.75), 426 | 1px 1px 1px 1px #F1ECF0 inset, 427 | 1.5px 1.5px 1px 1px #D1D0CE inset; 428 | border: 0.5px solid rgba(9,7,5,0.75); 429 | } 430 | 431 | .camera .top .timer { 432 | position: absolute; 433 | width: 23px; 434 | height: 23px; 435 | border-radius: 20px; 436 | left: 135px; 437 | top: 35px; 438 | background-image: radial-gradient(#E8E4E5, #DEDAD9); 439 | box-shadow: 0px 0.5px 1px 0.5px #605C5B, 440 | 1px 1px 1px #FFFBFC inset; 441 | } 442 | 443 | .camera .top .sensor { 444 | position: absolute; 445 | width: 23px; 446 | height: 23px; 447 | border-radius: 20px; 448 | left: 135px; 449 | top: 70px; 450 | background-image: radial-gradient(#080607, transparent 50%), 451 | radial-gradient(#0B090A, #211F20, #131112, #383637, #100E0F, #383637, #100E0F); 452 | backround-size: 60%, 100%; 453 | background-position: -6px -3px, center; 454 | background-repeat: no-repeat; 455 | box-shadow: 0px 0.5px 1px 0.75px #FFFBFC, 0 -1px 1px #635F5E; 456 | } 457 | 458 | .camera .top .power { 459 | position: absolute; 460 | width: 28px; 461 | height: 28px; 462 | border-radius: 20px; 463 | right: 150px; 464 | top: 195px; 465 | background-image: radial-gradient( 466 | #000000 30%, 467 | #252525, 468 | #171717, 469 | #020001, 470 | #242223, 471 | #383637 472 | ); 473 | box-shadow: 0px 0.5px 1px 0.75px #C6C1C0, 474 | 0px -0.5px 0.5px 0.25px #1A1819, 475 | -5px -8px 8px 1px rgba(86,82,82,0.4); 476 | } 477 | 478 | .camera .top .toggle-container { 479 | position: absolute; 480 | width: 50px; 481 | height: 22px; 482 | border-radius: 20px; 483 | right: 50px; 484 | top: 145px; 485 | background-image: linear-gradient(#CC7B00 10%, #B26701); 486 | box-shadow: 0.2px 0.2px 0.5px 0.5px #935723 inset, 0.5px 1px 0.75px 0.25px #FCE9D8; 487 | } 488 | 489 | .camera .top .toggle-container .toggle{ 490 | position: absolute; 491 | width: 20px; 492 | height: 20px; 493 | border-radius: 20px; 494 | right: 0; 495 | left: 0; 496 | margin-left: auto; 497 | margin-right: auto; 498 | top: 1px; 499 | background-image: radial-gradient(#FBC00A, #FFDB09); 500 | box-shadow: 0.5px 1px 0.75px 0.25px #FFED71 inset, 0px -0.5px 0.5px 0.5px #E6A11F inset, -1px 0.5px 4px 1px #964900; 501 | } --------------------------------------------------------------------------------