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

Get Your Geo Location

-
Image
  HTML + CSS + JavaScript <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Geo Location</title> <style> body { font-family: 'Courier New', Courier, monospace; } button { font-size: 18px; padding: 10px 5px; cursor: pointer; } </style> </head> <body> <div> <h3>Click the button to get your coordinates.</h3> <button onclick="getLocation()">Know Your Geo Location...</button> <h1>Latitude : <span id="lan"></span></h1> <h1>Longitude : <span id="lon"></span><
Read more

React | State Toggling

-
Image
  if you are wondering How to toggle Boolean   state in react component, then maybe this little code snippet for you... Ingredients :  HTML CSS React *** Dependency :  Bootstrap (Only for button) command: npm start   import React, { useState } from 'react'; import 'bootstrap/dist/css/bootstrap.min.css'; const App = () => { const [isLoggedIn, setIsLoggedIn] = useState(true); //let isLoggedIn = true; <<<|<<< this approach not work... // Element Variable const buttonText = isLoggedIn ? 'Log Out' : 'Log In'; const classNameChange = isLoggedIn ? 'danger' : 'success' const toggleFunction = () => { //isLoggedIn = !isLoggedIn; <<<|<<< this approach not work... setIsLoggedIn(!isLoggedIn); } const style = { textAlign: 'center', marginTop: '20px', lineHeight: 5 }; return ( <div style={style}>
Read more