Pure css box - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Panel

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Panel

Description

Pure css box

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style>

body {<!--  w  ww  .  j a v  a  2s .  c  om-->
   background: url(your image) no-repeat;
   background-size: cover;
   height: 100vh;
}
h1 {
   text-align: center;
   color: red;
   margin: 80px 0;
}
.box {
   width: 40%;
   margin: 0 auto;
   background: rgba(255,255,255,0.2);
   padding: 35px;
   border: 2px solid #fff;
   border-radius: 20px/50px;
   background-clip: padding-box;
   text-align: center;
}
.button {
   font-size: 1em;
   padding: 10px;
   color: #fff;
   border: 2px solid red;
   border-radius: 20px/50px;
   text-decoration: none;
   cursor: pointer;
   transition: all 0.3s ease-out;
}
.button:hover {
   background: red;
}
.overlay {
   position: fixed;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
   background: rgba(0, 0, 0, 0.7);
   transition: opacity 500ms;
   visibility: hidden;
   opacity: 0;
}
.overlay:target {
   visibility: visible;
   opacity: 1;
}
.popup {
   margin: 70px auto;
   padding: 20px;
   background: #fff;
   border-radius: 5px;
   width: 30%;
   position: relative;
   transition: all 5s ease-in-out;
}
.popup h2 {
   margin-top: 0;
   color: #333;
}
.popup .close {
   position: absolute;
   top: 20px;
   right: 30px;
   transition: all 200ms;
   font-size: 30px;
   font-weight: bold;
   text-decoration: none;
   color: #333;
}
.popup .close:hover {
   color: red;
}
.popup .content {
   max-height: 30%;
   overflow: auto;
}
@media screen and (max-width: 700px){
   .box{
      width: 70%;
   }
   .popup{
      width: 70%;
   }
}


      </style> 
 </head> 
 <body translate="no"> 
  <h1>header</h1> 
  <div class="box"> 
   <a class="button" href="#popup1">Let me Pop up</a> 
  </div> 
  <div id="popup1" class="overlay"> 
   <div class="popup"> 
    <h2>Here i am</h2> 
    <a class="close" href="#">?</a> 
    <div class="content">
      test test test test test test test
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials