Diamond Shape by HTML & CSS

-

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">5</p>
			</div>

			<div class="item item8">
				<p class="text">8</p>
			</div>

			<div class="item item4">
				<p class="text">4</p>
			</div>

			<div class="item item7">
				<p class="text">7</p>
			</div>

			<div class="item item9">
				<p class="text">9</p>
			</div>
		</main>
		
	</body>

</html>

CSS

main {
    box-sizing           : border-box;
    border               : 2px dashed black;
    margin               : 150px auto;
    padding              : 5px;
    width                : 322px;
    font-size            : 3em;
    display              : grid;
    grid-template-columns: repeat(3, 100px);
    grid-template-rows   : repeat(3, 100px);
    gap                  : 5px;
    transform            : rotate(45deg);
}

.text {
    transform: rotate(-45deg);
}

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

    border-radius             : 3px;
    transition                : transform 1s;
    transition-timing-function: ease-in-out;
}

.item:hover {
    cursor         : pointer;
    transform      : translate(200px, -200px) scale(1.5);
}

.item1 {
    background: #ef9a9a;
}

.item2 {
    background: #e57373;
}

.item3 {
    background: #e57373;
}

.item4 {
    background: #ef5350;
}

.item5 {
    background: #ef5350;
}

.item6 {
    background: #ef5350;
}

.item7 {
    background: #f44336;
}

.item8 {
    background: #f44336;
}

.item9 {
    background: #e53935;
}


/* ====== Hover Effect Colors ====== */
.item1:hover {
    background: #e57373;
}

.item2:hover {
    background: #ef5350;
}

.item3:hover {
    background: #ef5350;
}

.item4:hover {
    background: #f44336;
}

.item5:hover {
    background: #f44336;
}

.item6:hover {
    background: #f44336;
}

.item7:hover {
    background: #e53935;
}

.item8:hover {
    background: #e53935;
}

.item9:hover {
    background: #d32f2f;
}

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

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