Giter Site home page Giter Site logo

haroenv / 3dview.css Goto Github PK

View Code? Open in Web Editor NEW

This project forked from lukyvj/3dview.css

0.0 3.0 0.0 7.62 MB

A clunky implementation of the aborted Firefox 3D view

Home Page: https://lukyvj.github.io/3DView.css/

Ruby 7.24% HTML 43.12% JavaScript 0.12% CSS 49.51%

3dview.css's Introduction

3DView

https://lukyvj.github.io/3DView.css/

This project is an attempt to reproduce with CSS, the (R.I.P) Firefox's 3D Dom view ( aka tilt 3D )

Using css transforms, outline and shadows, I tried to make it easier for everyone to understand how the elements on a webpage are organised.

Usage

Load one of the three 3DView source files on your website:

<link rel="stylesheet" src="path/to/3DView-left.css" />

And add the debug attribute to your <html> or <body> tag.

<html debug="true">

Sass

There is a Sass mixin that helps you making the maximum out of this technique :

[debug=true] {
  @include debugView(<deepness>, <property>)
}
Name Description
<deepness> Numeric - Indentation deepness ( * > * > * [...] )
<property> String - Property to offset ( left, margin-left, transform )

Demo:

Bookmarklets

Add a new bookmark with one of this value as URL 3DView-left:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; left: 0.5vw !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; left: 1vw !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; left: 1.5vw !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; left: 2vw !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; left: 2.5vw !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; left: 3vw !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; left: 3.5vw !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; left: 4vw !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; left: 4.5vw !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; left: 5vw !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();

3DView-margin:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; margin-left: 0.5vw !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; margin-left: 1vw !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; margin-left: 1.5vw !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; margin-left: 2vw !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; margin-left: 2.5vw !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; margin-left: 3vw !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; margin-left: 3.5vw !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; margin-left: 4vw !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; margin-left: 4.5vw !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; margin-left: 5vw !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();

3DView-transform:

javascript:(function (){ let style = document.createElement('style'); style.innerHTML = '[debug=true] { outline: 1px solid lime; outline-offset: -1px; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-perspective: 600px; perspective: 600px; -webkit-transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); transform: rotateY(16deg) scale(0.9) translateX(5%) translateY(1%) skewY(-6deg); } [debug=true] * { outline: 1px solid lime; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:before, [debug=true] *:after { outline: 1px solid #0ff; outline-offset: -1px; box-shadow: 0 0 100px rgba(0, 0, 0, 0.15), -1px -1px 0 rgba(0, 0, 0, 0.1), -2px -2px 0 rgba(0, 0, 0, 0.1), -3px -3px 0 rgba(0, 0, 0, 0.1), -4px -4px 0 rgba(0, 0, 0, 0.1), -5px -5px 0 rgba(0, 0, 0, 0.1), -6px -6px 0 rgba(0, 0, 0, 0.1); } [debug=true] *:after { outline-color: #f0f; } [debug=true] *:hover { outline-color: #f0f !important; outline-width: 2px !important; outline-style: dashed !important; } [debug=true] *:hover:before, [debug=true] *:hover:after { outline-color: #0ff !important; outline-width: 2px !important; } [debug=true] * { outline-color: rgba(45, 223, 171, 0.9) !important; transform: translateX(0.25vw) !important; } [debug=true] * > * { outline-color: rgba(90, 144, 110, 0.9) !important; transform: translateX(0.5vw) !important; } [debug=true] * > * > * { outline-color: rgba(145, 104, 79, 0.9) !important; transform: translateX(0.75vw) !important; } [debug=true] * > * > * > * { outline-color: rgba(179, 72, 55, 0.9) !important; transform: translateX(1vw) !important; } [debug=true] * > * > * > * > * { outline-color: rgba(205, 53, 40, 0.9) !important; transform: translateX(1.25vw) !important; } [debug=true] * > * > * > * > * > * { outline-color: rgba(224, 44, 34, 0.9) !important; transform: translateX(1.5vw) !important; } [debug=true] * > * > * > * > * > * > * { outline-color: rgba(233, 45, 39, 0.9) !important; transform: translateX(1.75vw) !important; } [debug=true] * > * > * > * > * > * > * > * { outline-color: rgba(240, 52, 45, 0.9) !important; transform: translateX(2vw) !important; } [debug=true] * > * > * > * > * > * > * > * > * { outline-color: rgba(243, 60, 56, 0.9) !important; transform: translateX(2.25vw) !important; } [debug=true] * > * > * > * > * > * > * > * > * > * { outline-color: rgba(245, 72, 70, 0.9) !important; transform: translateX(2.5vw) !important; }'; document.head.appendChild(style); document.body.setAttribute('debug','true'); })();

3dview.css's People

Contributors

lukyvj avatar

Watchers

avatar avatar avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.