Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Screen sliding using css

    • 0
    • 3
    • 3
    • 1
    • 0
    • 0
    • 0
    • 0
    • 448
    Comment on it

    Hi all, Below is an example of slide screen using css.

    HTML:-

      <input type="checkbox" id="opci" />
      <div class="baseM">
        <label for="opci" class="nombre"></label>
        <div class="nextSlide "></div>
        <span class="c pt"></span>
      </div>
    

    CSS:-

    body{
      background-color:#ECF0F1;
    }
    .nombre{
      cursor:pointer;
      color:#0b8cbc;
      font-size:1.4em;
      top:3px;
      right:10px;
      position:absolute;
    }
    .pt{
      color:white;
    }
    .nombre:before{
          content: "\2632";
          background:#ccc;
        border-radius: 30px;
        display: inline-block;
        height: 30px;
        margin: 5px 0 0;
        padding: 0 2px 3px;
        text-align: center;
        width: 30px;
        box-shadow:0 0 8px #333;
    }
    #opci{display:none;}
    .nextSlide{
      color:white;
    }
    .baseM{
      overflow: hidden;
    }
    #opci ~ .baseM{
      transform:scale(1);
    }
    #opci:checked ~ .baseM .nombre{
      color:#fff;
    }
    #opci:checked ~ .baseM .nextSlide{
      animation: op-open 500ms cubic-bezier(0.405, 0.00, 0.165, 1.000);;
      width:100%;
      height:100%;
      top:0px;
      right:0px;
      border-radius: 0;
    }
    #opci ~ .baseM .nextSlide{
      animation: op-close 300ms cubic-bezier(0.405, 0.00, 0.165, 1.000);
      overflow: hidden;
      width:0px;
      height:0px;
    }
    .baseM{
      background-color:#fff;
      position:relative;
      height:280px;
      z-index:0;
    }  
    .nextSlide{
      position:absolute;
      top:20px;
      right:20px;
      border-radius: 50%;
      background:#0b8cbc;  
      z-index:-1;
    }
    @keyframes op-open {
        0%   {
          width:0px;
          height:0px;
          top:20px;
          right:20px;
        border-radius: 50%;
              }
        100% {
          width:1000px;
          height:1000px;
          top:-480px;
          right:-480px;
        border-radius: 50%;
              }
    }
    @keyframes op-close {
        0%   {
            width:100%;
            height:100%;
            top:0px;
            right:0px;
            border-radius: 0;
              }
        100% {
             width:0%;
            height:0%;
            top:20px;
            right:20px;
            border-radius: 0;
      }
    }
    .baseM{ 
      margin:4px;
      width:220px;
      font-size:1em;
      color:#828282;
      box-shadow: rgba(0,0,0,0.1) 0px 1px 3px;
    }
    

    Out put:-

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: