Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • Vertical Wizard in CSS

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 1
    • 0
    • 1.06k
    Comment on it

    Hello Readers!

    In this blog post, we will be preparing a vertical wizard.  A wizard is commonly seen on shopping websites (while placing an order) or when we fill a form. A wizard shows us the various steps we have to complete before fulfilling a particular task. It shows us the total number of steps to be completed, the progress we have made, and the remaining number of steps.

    A wizard can be horizontal or vertical.

     

    We will be looking over a vertical wizard here.

     

    HTML :

    <div class="l-wizard-v">
        <ul class="wizard-v">
            <li class="wizard-v__step">
    	    <h3>First Step</h3>
    	    <p>Step 1 contains of some other steps that can be defined here.</p>
    	</li>
    	<li class="wizard-v__step">
    	    <h3>Second Step </h3>
    	    <p>Feel free to add some more HTML stuff into this div.</p>
    	</li>
    	<li class="wizard-v__step">
    	    <h3>Third Step</h3>
    	    <p>The end is near. Go further to see what happens</p>
    	</li>
    	<li class="wizard-v__step">
    	    <h3>Final Step</h3>
    	</li>
        </ul>
    </div>

     

    CSS :

    .wizard-v {
        background: #f5f5f5 none repeat scroll 0 0;
        list-style-type: none;
        margin: 0 0 30px;
        padding: 20px;
        border: 1px solid #dbdbdb;
    }
    
    .wizard-v__step {
        border-bottom: 3px solid #3890bd;
        margin-bottom: 2px;
        position: relative;
    }
    
    .wizard-v__step::after, .wizard-v__step::before {
        border: medium solid transparent;
        content: " ";
        height: 0;
        pointer-events: none;
        position: absolute;
        top: 100%;
        width: 0;
    }
    
    .wizard-v__step::before {
        border-top-color: #3890bd;
        border-width: 20px;
        left: 50%;
        margin-left: -20px;
    }
    
    .wizard-v__step::after {
        border-top-color: #f5f5f5;
        border-width: 16px;
        left: 50%;
        margin-left: -16px;
    }

     

    OUTPUT :

    Vertical Wizard in CSS

 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: