Bejeweled pieces

Developer
Pollardld
Size
4,449 Kb
Views
12,144
  1. Bejeweled pieces Previews
  2. Bejeweled pieces HTML Codes
  3. Bejeweled pieces CSS Codes

How do I make an bejeweled pieces?

Set of Bejeweled game pieces. What is a bejeweled pieces? How do you make a bejeweled pieces? This script and codes were developed by Pollardld on 08 November 2022, Tuesday.

Bejeweled pieces Previews
IQ Test

Bejeweled pieces - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>bejeweled pieces</title> <link href='https://fonts.googleapis.com/css?family=Vollkorn' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <style> /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */ body { background: #57ECDC;
}
:before, .square:after, .hexagon:after, .hexagon:nth-of-type(2):after, .circle:after, :after { content: ''; position: absolute;
}
h1 { color: #334751; font-family: 'Vollkorn', serif; font-weight: normal; font-size: 2.25em; text-align: center;
}
section { background: rgba(0, 0, 0, 0.125); display: inline-block; height: 5rem; margin: 2rem -4px 3rem 10%; position: relative; vertical-align: middle; width: 5rem;
}
.square-corners { background: #f8afaf; height: 3rem; position: relative; top: 1rem; width: 5rem;
}
.square-corners:before, .square-corners.square:after, .square-corners.hexagon:after, .square-corners.circle:after { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem groove #f8afaf; top: -1rem; left: 0; width: 3rem;
}
.square-corners:after { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-top: 1rem ridge #f8afaf; bottom: -1rem; width: 3rem;
}
.square { background: #d8d898; height: 3.5rem; left: .75rem; position: relative; top: .75rem; width: 3.5rem; transform: rotate(45deg);
}
.square:before, .square:after, .square.hexagon:nth-of-type(2):after { background: rgba(255, 255, 255, 0.25); height: 1.5rem; left: 1rem; top: 1rem; width: 1.5rem;
}
.square:after { transform: rotate(45deg);
}
.diamond { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem solid #00bfff; width: 3rem; position: relative;
}
.diamond:before, .diamond.square:after, .diamond.hexagon:after, .diamond.circle:after { top: 1rem; left: -1rem; border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-top: 4rem solid #00bfff;
}
.diamond:after { top: 1rem; left: 0rem; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent; border-top: 3.5rem solid rgba(255, 255, 255, 0.25);
}
.triangle { border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-bottom: 5rem solid #27747F; height: 0; position: relative; width: 0;
}
.triangle:before, .triangle.square:after, .triangle.hexagon:after, .triangle.circle:after { border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-bottom: 2.5rem solid rgba(255, 255, 255, 0.25); left: -1.25rem; height: 0rem; top: 1.75rem; width: 0;
}
.triangle:after { border-left: .75rem solid transparent; border-right: .75rem solid transparent; border-top: 1.25rem solid rgba(39, 116, 127, 0.375); left: -.75rem; height: 0rem; top: 3rem; width: 0;
}
.hexagon { background: #FF6E2B; height: 2.5rem; position: relative; top: 1.25rem; width: 5rem;
}
.hexagon:before, .hexagon:after, .hexagon:nth-of-type(2):after { border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-bottom: 1.25rem solid #FF6E2B; left: 0; height: 0rem; top: -1.25rem; width: 0;
}
.hexagon:after { border-top: 1.25rem solid #FF6E2B; border-bottom: none; bottom: -1.25rem; top: auto;
}
.hexagon:nth-of-type(2) { background: rgba(255, 255, 255, 0.125); height: 1rem; position: absolute; top: 2rem; left: 1.5rem; width: 2rem;
}
.hexagon:nth-of-type(2):before, .hexagon:nth-of-type(2):after { border-bottom: none; border-top: 0.75rem solid rgba(255, 255, 255, 0.125); border-left: 1rem solid transparent; border-right: 1rem solid transparent; top: 1rem;
}
.hexagon:nth-of-type(2):after { bottom: 1rem; border-top: none; border-bottom: 0.75rem solid rgba(255, 255, 255, 0.125); top: auto;
}
.circle { background: whitesmoke; border: 1rem double rgba(255, 255, 255, 0.75); border-radius: 50%; height: 3rem; position: relative; width: 3rem;
}
.circle:before, .circle.hexagon:nth-of-type(2):after, .circle:after { border-left: 1.5rem solid rgba(255, 255, 255, 0.875); border-top: 1.5rem solid transparent; border-bottom: 1.5rem solid transparent; border-radius: 50%; height: 0rem; left: 0; top: 0; width: 1.5rem;
}
.circle:after { border-left: none; border-right: 1.5rem solid rgba(255, 255, 255, 0.875); right: 0;
} </style> <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>
</head>
<body> <h1>Bejeweled Game Pieces</h1>
<section> <div class="square-corners"></div>
</section>
<section> <div class="square"></div>
</section>
<section> <div class="diamond"></div>
</section>
<section> <div class="triangle"></div>
</section>
<section> <div class="hexagon"></div> <div class="hexagon"></div>
</section>
<section> <div class="circle"></div>
</section>
</body>
</html>

Bejeweled pieces - Script Codes CSS Codes

body { background: #57ECDC;
}
:before, .square:after, .hexagon:after, .hexagon:nth-of-type(2):after, .circle:after, :after { content: ''; position: absolute;
}
h1 { color: #334751; font-family: 'Vollkorn', serif; font-weight: normal; font-size: 2.25em; text-align: center;
}
section { background: rgba(0, 0, 0, 0.125); display: inline-block; height: 5rem; margin: 2rem -4px 3rem 10%; position: relative; vertical-align: middle; width: 5rem;
}
.square-corners { background: #f8afaf; height: 3rem; position: relative; top: 1rem; width: 5rem;
}
.square-corners:before, .square-corners.square:after, .square-corners.hexagon:after, .square-corners.circle:after { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem groove #f8afaf; top: -1rem; left: 0; width: 3rem;
}
.square-corners:after { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-top: 1rem ridge #f8afaf; bottom: -1rem; width: 3rem;
}
.square { background: #d8d898; height: 3.5rem; left: .75rem; position: relative; top: .75rem; width: 3.5rem; transform: rotate(45deg);
}
.square:before, .square:after, .square.hexagon:nth-of-type(2):after { background: rgba(255, 255, 255, 0.25); height: 1.5rem; left: 1rem; top: 1rem; width: 1.5rem;
}
.square:after { transform: rotate(45deg);
}
.diamond { border-left: 1rem solid transparent; border-right: 1rem solid transparent; border-bottom: 1rem solid #00bfff; width: 3rem; position: relative;
}
.diamond:before, .diamond.square:after, .diamond.hexagon:after, .diamond.circle:after { top: 1rem; left: -1rem; border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-top: 4rem solid #00bfff;
}
.diamond:after { top: 1rem; left: 0rem; border-left: 1.5rem solid transparent; border-right: 1.5rem solid transparent; border-top: 3.5rem solid rgba(255, 255, 255, 0.25);
}
.triangle { border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-bottom: 5rem solid #27747F; height: 0; position: relative; width: 0;
}
.triangle:before, .triangle.square:after, .triangle.hexagon:after, .triangle.circle:after { border-left: 1.25rem solid transparent; border-right: 1.25rem solid transparent; border-bottom: 2.5rem solid rgba(255, 255, 255, 0.25); left: -1.25rem; height: 0rem; top: 1.75rem; width: 0;
}
.triangle:after { border-left: .75rem solid transparent; border-right: .75rem solid transparent; border-top: 1.25rem solid rgba(39, 116, 127, 0.375); left: -.75rem; height: 0rem; top: 3rem; width: 0;
}
.hexagon { background: #FF6E2B; height: 2.5rem; position: relative; top: 1.25rem; width: 5rem;
}
.hexagon:before, .hexagon:after, .hexagon:nth-of-type(2):after { border-left: 2.5rem solid transparent; border-right: 2.5rem solid transparent; border-bottom: 1.25rem solid #FF6E2B; left: 0; height: 0rem; top: -1.25rem; width: 0;
}
.hexagon:after { border-top: 1.25rem solid #FF6E2B; border-bottom: none; bottom: -1.25rem; top: auto;
}
.hexagon:nth-of-type(2) { background: rgba(255, 255, 255, 0.125); height: 1rem; position: absolute; top: 2rem; left: 1.5rem; width: 2rem;
}
.hexagon:nth-of-type(2):before, .hexagon:nth-of-type(2):after { border-bottom: none; border-top: 0.75rem solid rgba(255, 255, 255, 0.125); border-left: 1rem solid transparent; border-right: 1rem solid transparent; top: 1rem;
}
.hexagon:nth-of-type(2):after { bottom: 1rem; border-top: none; border-bottom: 0.75rem solid rgba(255, 255, 255, 0.125); top: auto;
}
.circle { background: whitesmoke; border: 1rem double rgba(255, 255, 255, 0.75); border-radius: 50%; height: 3rem; position: relative; width: 3rem;
}
.circle:before, .circle.hexagon:nth-of-type(2):after, .circle:after { border-left: 1.5rem solid rgba(255, 255, 255, 0.875); border-top: 1.5rem solid transparent; border-bottom: 1.5rem solid transparent; border-radius: 50%; height: 0rem; left: 0; top: 0; width: 1.5rem;
}
.circle:after { border-left: none; border-right: 1.5rem solid rgba(255, 255, 255, 0.875); right: 0;
}
Bejeweled pieces - Script Codes
Bejeweled pieces - Script Codes
Home Page Home
Developer Pollardld
Username pollardld
Uploaded November 08, 2022
Rating 3.5
Size 4,449 Kb
Views 12,144
Do you need developer help for Bejeweled pieces?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Pollardld (pollardld) Script Codes
Name
Turkey Hunting with Horizontal Lines
Triceratops
Animation mixin
Titanis walleri
Paypal checkout svg
Nav Combine
Titanis walleri
New Header
Dropdown Selector
SR2S Stable
Create amazing blog posts with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!