Half Diamond By HTML & CSS

-

 

Half Diamond Hover Effect

If you are searching for How to make Half Diamond by HTML & CSS? then it might be what you are looking for... 

Ingredients :

  • HTML 
  • CSS

Main Focus Point :

  • grid 
  • grid-template-areas  
  • place-items   
  • transform

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Half Diamond</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

    <div class="container">

        <!-- .box#box-$*6>p.text{$} -->

        <div class="box" id="box-1">
            <p class="text">1</p>
        </div>
        <div class="box" id="box-2">
            <p class="text">2</p>
        </div>
        <div class="box" id="box-3">
            <p class="text">3</p>
        </div>
        <div class="box" id="box-4">
            <p class="text">4</p>
        </div>
        <div class="box" id="box-5">
            <p class="text">5</p>
        </div>
        <div class="box" id="box-6">
            <p class="text">6</p>
        </div>
        
    </div>

</body>

</html>

CSS 

* {
    padding   : 0;
    margin    : 0;
    box-sizing: border-box;
}

.container {
    margin: 100px auto;
    width : 350px;

    display              : grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows   : repeat(3, 100px);
    grid-template-areas  :
        "one . ."
        "four two ."
        "six five three";
    gap: 5px;

    /* Rotated Main Container */
    transform: rotate(-45deg);
}

.box {
    background   : tomato;
    border-radius: 5px;
    font         : bold 35px 'Segoe UI';
    display      : grid;
    place-items  : center;
    cursor       : pointer;
    transition   : .3s ease-in-out;
}

.box:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.7);
}

.text {
    /* Rotated Inner Text */
    transform: rotate(45deg);
}

#box-2 {
    grid-area: two;
}

#box-3 {
    grid-area: three;
}

#box-4 {
    grid-area: four;
}

#box-5 {
    grid-area: five;
}

#box-6 {
    grid-area: six;
}

Comments

Post a Comment

Popular posts from this blog

Stack

-
Data-Structure | Linear Category Stack Code Example  // BluePrint || Static Thing class Stack { // LIFO = Last In Fast Out | (Linear) Data-Structure constructor() { // empty stack this.stack = []; } // add new data in stack, one by one add(data) { this.stack.push(data); } // remove data from stack remove() { // for checking, is stack empty or not... if (this.stack.length) { return this.stack.pop(); } } } // ######################################################## // ######################################################## // ######################################################## // Object Creating || Dynamic Thing // Create an object of Stack class const person = new Stack(); person.add('Sam'); person.add('Jon'); person.add('Ken'); person.add('Lee'); // total object calling [its not a good approach] c...
Read more

Diamond Shape by HTML & CSS

-
Image
Diamond Hover Effect You may wonder How to create a diamond shape in HTML, so here it may what you looking at... Ingredients:  HTML  CSS  Main Use Of: Grid Flex Transform HTML <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <link rel="stylesheet" href="style.css"> <title>Diamond Shape</title> </head> <body> <!-- .item.item$*9>p.text{$} --> <main> <div class="item item1"> <p class="text">1</p> </div> <div class="item item3"> <p class="text">3</p> </div> <div class="item item6"> <p class="text">6</p> </div> <div class="item item2"> <p class="text">2</p> </div> <div class="item item5"> <p class="text...
Read more

Dictionary

-
Data-Structure | Non-Linear Category Dictionary Code Example class Dictionary { // Time Complexity | Contestant Time // O(1) // empty object constructor() { this.dictionary = {} } // add data as { key : value } pair add(key, value) { this.dictionary[key] = value; } get(key) { return this.dictionary[key]; } } // ######################################################## // ######################################################## // ######################################################## const phoneBook = new Dictionary(); // add data into Dictionary phoneBook.add('Jon', '01717-112233'); phoneBook.add('Sam', '01712-334455'); phoneBook.add('Lee', '01717-556644'); console.log(phoneBook); // Dictionary { // dictionary: { Jon: '01717-112233', Sam: '01712-334455', Lee: '01717-556644' } // } console....
Read more