CSS Shield

Developer
Angela Velasquez
Size
1,970 Kb
Views
34,408
  1. CSS Shield Previews
  2. CSS Shield HTML Codes
  3. CSS Shield CSS Codes

How do I make an css shield?

Css pure illustrtion with . What is a css shield? How do you make a css shield? This script and codes were developed by Angela Velasquez on 07 September 2022, Wednesday.

CSS Shield Previews
IQ Test

CSS Shield - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>CSS Shield</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="container"> <ul class="shield"> <li><div class="screw-up"></div> <div class="screw-down"></div></li> <li><div class="screw-up"></div> <div class="screw-down"></div></li> <li><div class="screw-up"></div> <div class="screw-down"></div></li> <li><div class="screw-up"></div> <div class="screw-down"></div></li> <li><div class="screw-up"></div> <div class="screw-down"></div></li> <div class="center"> <div class="c-center"></div> </div> </ul> </div>
</body>
</html>

CSS Shield - Script Codes CSS Codes

body { background: #7FFFBA;
}
.container{ display: block; position: relative; margin: 0 auto; padding-top: 50px; width: 400px; 400px; height: 400px;
}
.shield{ display: block; position: relative; margin: 0 auto; border-radius: 50%; border: 15px solid #BBB; height: 150px; width: 105px; overflow: hidden; box-shadow: 1px 5px 1px rgba(0,0,0,0.25); transition: 0.25s;
}
.shield:hover{ left: -10px;
}
.shield li{ background: #666; display: inline-block; width: 145px; height: 20%; border-top: 1px solid #888; border-bottom: 1px solid #444; float: left; left: -40px; position: relative;
}
.shield li:first-child{ border-top:none;
}
.shield li:first-child .screw-up{ display: none;
}
.shield li:last-child .screw-up{ display: none;
}
.shield li .screw-up{ display: block; position: absolute; height:6px; width: 6px; border: 1px solid #888; background: #999; border-radius: 50%; left: 30px; margin-top: 10px;
}
.shield li .screw-down{ display: block; position: absolute; height:6px; width: 6px; border: 1px solid #888; background: #999; border-radius: 50%; right: 30px; margin-top: 10px;
}
.shield li:first-child .screw-down{ display: none;
}
.shield li:last-child .screw-down{ display: none;
}
.center { display: table; position: relative; border: 6px solid #BBB; width: 25px; height: 25px; border-radius: 50%; top: -99px; margin: 0 auto; text-align: center; left: -20px; box-shadow: 2px 2px 1px rgba(0,0,0,0.15);
}
.center .c-center{ display: table-cell; vertical-align: middle; background: #999; width: 80%; height: 80%; border-radius: 50%; box-shadow: 1px 1px 0px rgba(0,0,0,0.25);
}
CSS Shield - Script Codes
CSS Shield - Script Codes
Home Page Home
Developer Angela Velasquez
Username AngelaVelasquez
Uploaded September 07, 2022
Rating 3
Size 1,970 Kb
Views 34,408
Do you need developer help for CSS Shield?

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!

Angela Velasquez (AngelaVelasquez) Script Codes
Name
Searchbox
Layout Theme
CSS Fruit Background - Bananas
CSS Switch Day and Night - Cat
Dancing Pug
CSS - Cat on a Plane
Form with SVG radio buttons
SVG Line Drawing
CSS Fruit Background - Pineapple
CSS - Cat in the sky
Create amazing marketing copy 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!