Posts
Figma
- Get link
- Other Apps
<!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>Figma Logo</title> <style type="text/css"> body { padding: 0; margin: 0; height: 100vh; display: flex; justify-content: center; align-items: center; background-color: azure; } .figma-logo { width: 200px; display: flex; flex-wrap:wrap; } .element { width: 100px; height: 100px; background: red; } .left { border-top-left-radius: 50px; border-bottom-left-radius: 50px; } .right { border-top-right-radius:50px; border-bottom-right-radius:50px; } .circle { border-radius:50px; } .clip { border-bottom-right-radius:50px; } .orange { background: #FB7266; } .purple { background: #A061FA;
How to create Instagram Icon in HTML & CSS3
- Get link
- Other Apps
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Instagram Icon in CSS3</title> <style type="text/css"> *{ margin:0; padding:0; box-sizing:border-box; } body { height:100vh; display:grid; place-items:center; background-color:#000000; } .IG { width:45px; height:45px; background:transparent; border-radius:12px; border:3px solid aqua; display:flex; justify-content:center; align-items:center; position:relative; cursor:pointer; } .IG:before{ content:""; height:13px; width:13px; border-radius:50%; border:3px solid aqua; } .IG:after{ content:""; position:absolute; top:5px; right:6px; border-radius:50%; border:2px solid aqua; } </style> </head> <body> <div class="IG"></div> </a> </body> </html>
3D Pyramid
- Get link
- Other Apps
<style type="text/css"> .container { max-width:100%; width: 400px; height: 400px; margin: 0 auto; position: relative; perspective: 400px; perspective-origin: 50% 40%; } .side { position: absolute; left: 140px; top: 150px; width: 0; height: 0; border-left: 60px solid transparent; border-right: 60px solid transparent; border-bottom: 120px solid #ccc; transform-origin: 50% 0%; animation: spin 5s infinite linear; } .back { animation-delay: -2.5s; } .right { animation-delay: -1.25s; } .left { animation-delay: -3.75s; } @keyframes spin { 0% { transform: rotateY(0deg) rotateX(30deg); border-bottom-color: #1abcff; } 25% { transform: rotateY(90deg) rotateX(30deg); border-bottom-color: #00a2e6; opacity: 1; } 25.1% { opacity: 0; } 50% { transform: rotateY(180deg) rotateX(30deg); border-bottom-color: #0089c2; } 74.9% { opacity: 0; } 75% { transform: rotat