Skip to main content

Archive

Show more

Captain America Shield Design | HTML And CSS

by Rustcode
Captain-America-Shield-Design-HTML-And-CSS

Captain America Shield Design Using HTML And CSS

As we can create a number of animation using css only. However "Captain America Shield design" is not complex, we can design this using html and css. We have created a lot of animation you can check on this website. let's try to code this animation.

You can read interesting articles on web development. The link is given below.

If you want to learn animation using javascript and jsplugins, We have already created a lot of animation using various plugins of javascript, check out the playlist. We hope you like it.


01. HTML STRUCTURE

<!DOCTYPE html>
<html>
<head>
  <title>Captain America Shield Design | Rustcode</title>	
  <link rel="stylesheet" href="style.css">
</head>

<body>

    main content.

</body>
</html>



02. HTML

<body>

<div class="container">
  <div class="item layer-1"></div>
  <div class="item layer-2"></div>
  <div class="item layer-3"></div>
  <div class="star-container">
    <div class="star"></div>
  </div>
</div>

</body>



03. CSS

body{
  padding: 0px;
  margin: 0px;
  position: absolute;
  top: 55%;
  left: 40%;
  transform: translate(-50%, -50%);
  background: #C6DCE8;
}

.container{
  position: relative;
}

.item{
  position: absolute;
  border-radius: 50%;
}

.layer-1{
  width: 500px;
  height: 500px;
  background: #DC1A47;
  box-shadow: rgba(0, 0, 0, 0.2) 0px 20px 30px 0px;
  bottom: -230px;
  left: -115px;
}

.layer-2{
  width: 400px;
  height: 400px;
  background: #DFD8C9;
  bottom: -180px;
  left: -65px;
}

.layer-3{
  width: 300px;
  height: 300px;
  background: #DC1A47;
  bottom: -130px;
  left: -15px;
}

.star-container{
  background: #528DC1 !important;
  border-radius: 50%;
  height: 200px;
  width: 200px;
  position: absolute;
  bottom: -80px;
  left: 35px;
}

.star, .star::after, .star::before{
  content: "";
  position: absolute;
  top: 75px;
  border: 56px solid #DFD8C9;
  border-left: 84px solid transparent;
  border-right: 84px solid transparent;
  border-bottom: 0px;
  box-sizing: border-box;
}

.star{
  left: 15px;
}

.star::after{
  transform: rotate(72deg);
  top: -56px;
  left: -84px;
}

.star::before{
  transform: rotate(-72deg);
  top: -56px;
  left: -84px;
}



04. Youtube Video

Here I am attaching a YouTube video from my channel so that you can understand this article better and you can create a better web user interface. I have a lot of videos on my YouTube channel which is related to the user interface and web development. You can also, learn about web development from there.




05. SOURCE CODE

After reading this article and watching a Youtube video, if you want to download the source code, you can download it from here and change this according to your need.





Comments

Post a Comment