LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code



    Chessboard 3D
    
    
    
    


  

Chessboard 3D

Choose Grid Size

Max grid is 64 squares with 8 rows 8 columns

Pick A Color

Add color one clk, remove color db clk

CSS
/* To do. Make a flip card to the chessboard and responsive site */

@import url('https://fonts.googleapis.com/css?family=Cairo');

*{
  margin: 0;
  padding: 0;
}

body {
  text-align: center;
  font-family: 'Cairo', sans-serif;
  overflow: hidden;
}

.background {
  position: absolute;
  background: url("https://www.hdwallpapers.in/walls/windows_xp_bliss-wide.jpg");
  background-size:cover;
  background-position:  0 -500px; 
  width:100%;
  height:1080px;
}

.container {
   display:flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center; 
   width: 100%;
   height: 100%;
   position: absolute;
   left: 50%;
   margin-left: -50%;
}

.chess {
   display: flex;
   align-items: center;
   justify-content: center;
}

.flipTable {
   width: 250px;
   height: 195px;
  background: url("http://pngimg.com/uploads/chess/chess_PNG8414.png");
   background-repeat: no-repeat;
   background-size: 250px;
   display: flex;
   align-items: center;
   justify-content: center;
   animation:spin 5000ms linear infinite;
   
}
   @keyframes spin { 
   100% { 
   transform: rotateY(360deg); transform:rotateY(360deg); 
   } 
}

h1 {
   position: absolute;
   z-index:1;
   font-size: 30px;
   color: #fff;
   text-shadow: -2px 0 black, 0 2px black, 2px 0 black, 0 -2px black;
}

.colorContainer {
   background: linear-gradient(to right, red, yellow, green, cyan, blue, violet);
   height: 40px;
   cursor: pointer;
}

h2 {
  text-transform:uppercase;
  font-size:20px;
}

.input {
  margin: 0 50px;
}

.info1 {
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
  text-transform:uppercase;
  background-color:#00bfac;
  color: #000;
  height: 40px;
  font-size: 20px;
}

.info2 {
  background-color: #007f73;
  color: #000;
  height: 40px;
  font-size: 20px;

}

.info3 {
  background-color: #00e5cf;
  height: 40px;
  font-size: 20px;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

#sizePicker{
  text-shadow: none;
}

.button{
  width: 200px;
  height: 40px;
  margin: 0 auto;
  color: #fff;
  background-color: #004039;
  border: none;
  color: #000;
  padding: 5px 15px;
  font-size: 16px;
  text-transform: uppercase;
  cursor: pointer;
  transition: 250ms;
}

.button:hover {
  transition: 500ms;
  background-color: #fff;
}

table, tr, td {
  border: 2px solid black;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
}

tr, td {
  height: 40px;
  width: 40px;
}

input[type=number] {
  width: 200px;
  height: 40px;
  text-align: center;
  font-size: 20px;
  border: none;
  background-color: #00FFE6;
  transition: 500ms;
}

input[type=number]:hover {
  background-color: #fff;
  transition: 250ms;
}

::-webkit-input-placeholder {
  color: #000;
}

.input {
   border-radius: 50px;
   box-shadow: 8px 8px 15px #000;
}

input[type=color] {
  display:none;
}

#pixel_canvas {
  margin-left: 50px;
  box-shadow: 8px 8px 15px #000;
  transform: rotateX(120deg)
             rotateY(10deg)
             rotateZ(220deg);
}

/* Responsive part */

@media screen and (max-width:1102px) {
  #pixel_canvas {
  margin-left: 0px;
  } 
  
  .container{
    flex-wrap:wrap;
  }
}

@media screen and (max-width:525px) {
  input[type=number],input[type=submit], input[type=reset] {
    width: 100%;
  }
  .info2 span { 
   display: none;
  }
  
  .info2:after {
    content: "Max grid is 64 squares";
  }
}

@media screen and (max-width:431px) {
    .info3 {
    height: 80px;
  }
  
tr, td {
  height: 30px;
  width: 30px;
}  
}
/* END */
JS
// H2 tag that picks up the color from the input type color.

$("h2").on("click", function(){
   $('input[type="color"]').focus();
   $('input[type="color"]').click();
});


// Assign to a variable the ID for a better performance

var id = $("#pixel_canvas");

// After hitting submit, call the creatGrid function.

var x = function (){
 id.children().remove();

  // Select size input
  
  const rows = $("#input_height").val();
  const columns = $("#input_width").val();

  //Create the grid system with a nested for loop.
  
  var xAxis, yAxis;
  for (xAxis = 0; xAxis < rows; xAxis++){
      id.append("");
        for (yAxis = 0; yAxis < columns; yAxis++) {
         id.children().last().append("");
        };
    };
}

// Stops the browser to refresh after we hit the submit button

$("#sizePicker").on("submit", function(gridSystem){
  x();
  gridSystem.preventDefault();
});

  // Next...
  // Select color input

  id.on("click", "td", function(){
    let colors = $(".colorPicker").val();
      $(this).css("background-color", colors);
  });

  // Remove on db click

id.on("dblclick", "td", function(){
  $(this).css("background-color", "");
});

  // Reset color button.

function resetColour(objName){
  $('td').each(function(){
    $(this).css("backgroundColor", "");
    });
}
// END
Wed, 12/27/2017 - 07:02

Related Codes

Pen ID
Pen ID
Pen ID
Square Adv