ATKrsh

<div class="wrapper">
  <div class="phone-wrap laptop">
    <div class=phone-back></div>
    <div class="phone-body"></div>
    <div class="phone-speaker"></div>
    <div class="phone-charger"></div>
    <div class="phone-buttons-left">
      <div class="button-google"></div>
      <div class="volume-up"></div>
      <div class="volume-down"></div>

ATKrsh

Full Screen Video

A Pen by David Conner on CodePen.

License.

ATKrsh

HTML 5 Video

You can "use your own" player for Vimeo videos, and embed them as HTML5 - much easier than trying to self-host.

A Pen by Colin on CodePen.

License.

ATKrsh

<div class="container">
  <div class="laptop">
    <svg viewBox="0 0 480 268" version="1.1" width="100%" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
      <g class="laptop-bottom">
        <path transform="translate(0, 250)" d="M450,18 L31,18 C21,18 34e-13,14 0,12 L 480,12 C480,14 460,18 450,18 Z"></path>
        <rect x="0" y="250" width="480" height="12"></rect>
      </g>
      <path class="laptop-lid" d="M 70,240 l 341.6 0 l 52.17 0 l -434.7 0 l 52 0 z M 426,250 l -368.4 0 l -56.4 0 c 0 -8.46 8 -8.46 18.05 -8.46 l 443.6 0 c 19.7 0 18 8 18 8.5 l -56 0 z"></path>
      <rect class="screen-bg" x="70" y="24" width="342" height="216"></rect>
      <g class="grid">

ATKrsh

CSS Laptop

Illustration 100% HTML and CSS, based on the following dribbble: https://dribbble.com/shots/4628639-Growing-A-Design-Audience

The only JavaScript is to take the value from the range sliders and set the CSS variable for the respective rotation to that value and to set the text to the value of the degree in the controls

Thanks to the following CSS-Tricks article: https://css-tricks.com/styling-cross-browser-compatible-range-inputs-css/

A Pen by Amit Kumar Singh on CodePen.

ATKrsh

CSS only 3d Macbook Air

No-js :) Just for fun and practice

A Pen by Captain Anonymous on CodePen.

License.

ATKrsh

CSS 3D Hartwig chess set (fully playable)

3D chess game done in HTML/CSS/JS. Works only in webkit.

Github repo: https://github.com/juliangarnier/3D-Hartwig-chess-set

Using Photon : http://photon.attasi.com and Chess.js : https://github.com/jhlywa/chess.js

ATKrsh

CSS 3D mobile website previewer

A Pen by Vincent Durand on CodePen.

License.

ATKrsh

<!--
Developed by Jon Gunnison
http://jgunnison.com

Model created by Fongoose.
https://sketchfab.com/fongoose
-->

ATKrsh

15. Load .obj file

---

How to load an external obj file and add it into the scene.
This demo is using the plugin "OBJLoader". Don't forget to include it into your page ;)

A Pen by Louis Hoebregts on CodePen.

License.