ads_header

Home HTML CSS JAVASCRIPT TIPS & TRICK How to Spruce Coding Structure VIEWS

How to Spruce Coding Structure

May 18, 2018
Read

How to Spruce Coding Structure

Hello friends, in this post I want to provide a reference on how to spruce up CSS HTML and JAVASCRIPT coding a mess. Sometimes we are very dizzy about the program we make, plus if our coding structure is not irregular, of course this becomes more dizzying again. Ha ha ha

Okay, to tidy up the coding is pretty easy because we just visit a site that I think is very helpful. This site is called Unminify.

And here I have an example of messy coding

<html>
<head>
 <title>Hover Image Filter</title>
<style>
* { margin: 0;padding: 0; box-sizing: border-box;}body { background-color: #262626; font-family: 
arial; color: #666;}.container { width: 600px; height: 400px; overflow: hidden; margin: 40px auto; 
position: relative; border-radius: 5px; box-shadow: 0 0 20px #000;
}.container img { height: 100%; transform: scale(1.2); filter: grayscale(100%); transition: .7s ease-in-out;
}

.container .text {  width: 100%;padding: 10px;font-weight: bold;text-align: center;position: absolute;
bottom: 0;transform: rotateX(90deg) perspective(100px);background-color: #fff;transform-origin: bottom;transition: .7s ease-in-out;
}

.container ul {  list-style: none;  text-align: center;position: absolute; top: 0;}

.container ul li {  background-color: #FFF; width: 30px; border-bottom: 1px solid #999; padding: 5px;
transform: rotatey(-90deg) perspective(100px);transform-origin: left;cursor: pointer; transition: .5s ease-in-out;}

.container ul li:first-of-type {  transition-delay: .5s;}.container ul li:nth-of-type(2) {
  transition-delay: 1s;}.container ul li:last-of-type {
  transition-delay: 1.5s;}

.skewd {  background-color: rgb(255, 255, 255);
  opacity: .4;  width: 100%;  height: 100%;  position: absolute;
  transform: skewX(45deg);  top: 0;  right: -170%;  z-index: 1;  transition: 1s ease-in-out;}
.container:hover img {  filter: grayscale(0);  transform: scale(1);}.container:hover .text {
  transform: rotateX(0deg);
}.container ul li:hover {
  color: #000;}.container:hover ul li {
  transform: rotatey(0deg);}.container:hover .skewd {
  right: 170%;
  transition-delay: 2s;}.white-mode { text-decoration: none; padding: 7px 10px; background-color: #122; border-radius: 3px;
  color: #FFF; transition: .35s ease-in-out; position: absolute; left: 15px; bottom: 15px;}.white-mode:hover {
  background-color: #FFF;
  color: #122;}</style></head><body><div class="container">  <img src="a.jpeg" />  <div class="text">AWESOME SETUP FOR DEVELOPER</div>
</div>
</body>
</html>

Copy your code and visit the Unminify site, look more like the picture below


Then paste your code into the column then click the UNMINIFY button then you can see your code comes up with a better structure like the picture below.

<html>

<head>
    <title>Hover Image Filter</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            background-color: #262626;
            font-family: arial;
            color: #666;
        }
        
        .container {
            width: 600px;
            height: 400px;
            overflow: hidden;
            margin: 40px auto;
            position: relative;
            border-radius: 5px;
            box-shadow: 0 0 20px #000;
        }
        
        .container img {
            height: 100%;
            transform: scale(1.2);
            filter: grayscale(100%);
            transition: .7s ease-in-out;
        }
        
        .container .text {
            width: 100%;
            padding: 10px;
            font-weight: bold;
            text-align: center;
            position: absolute;
            bottom: 0;
            transform: rotateX(90deg) perspective(100px);
            background-color: #fff;
            transform-origin: bottom;
            transition: .7s ease-in-out;
        }
        
        .container ul {
            list-style: none;
            text-align: center;
            position: absolute;
            top: 0;
        }
        
        .container ul li {
            background-color: #FFF;
            width: 30px;
            border-bottom: 1px solid #999;
            padding: 5px;
            transform: rotatey(-90deg) perspective(100px);
            transform-origin: left;
            cursor: pointer;
            transition: .5s ease-in-out;
        }
        
        .container ul li:first-of-type {
            transition-delay: .5s;
        }
        
        .container ul li:nth-of-type(2) {
            transition-delay: 1s;
        }
        
        .container ul li:last-of-type {
            transition-delay: 1.5s;
        }
        
        .skewd {
            background-color: rgb(255, 255, 255);
            opacity: .4;
            width: 100%;
            height: 100%;
            position: absolute;
            transform: skewX(45deg);
            top: 0;
            right: -170%;
            z-index: 1;
            transition: 1s ease-in-out;
        }
        
        .container:hover img {
            filter: grayscale(0);
            transform: scale(1);
        }
        
        .container:hover .text {
            transform: rotateX(0deg);
        }
        
        .container ul li:hover {
            color: #000;
        }
        
        .container:hover ul li {
            transform: rotatey(0deg);
        }
        
        .container:hover .skewd {
            right: 170%;
            transition-delay: 2s;
        }
        
        .white-mode {
            text-decoration: none;
            padding: 7px 10px;
            background-color: #122;
            border-radius: 3px;
            color: #FFF;
            transition: .35s ease-in-out;
            position: absolute;
            left: 15px;
            bottom: 15px;
        }
        
        .white-mode:hover {
            background-color: #FFF;
            color: #122;
        }
    </style>
</head>

<body>
    <div class="container"> <img src="a.jpeg" />
        <div class="text">AWESOME SETUP FOR DEVELOPER</div>
    </div>
</body>

</html>

Hopefully useful, Happy Coding Guys

MORE ARTICLE

How To Change Icon In Netbeans


Tags :
Powered by Blogger.