Get Even More Visitors To Your Blog, Upgrade To A Business Listing >>

Make vertical splitters in pure css3 in background

Make vertical splitters in pure css3 in background

Problem

I am trying to make a vertical splitter in background of a home-made slider (like here http://theymakeapps.com/users/add). How to do that ? Here is what I've done so far:


Hi, bot Keep sliding... Submit

And my css

* {
    font-family: calibri
}
#dragger {
    width: 10px;
    padding: 5px 10px 5px 5px;
}
.rect {
    background-color: #ccc;
    height: 15px;
    width: 10px;
}
.arrow-down {
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 5px solid #ccc;
}
#wrapper {
    z-index: 55;
    width: 200px;
    padding: 0 10px;
}
#slide-container {
    background: #dedede;
    height:2px;
    border-radius: 1px;
    margin-top:-18px;
}
.drag-caption {
    padding-right: 20px;
    color: #d4d4d4;
    -webkit-transition: color 500ms ease;
    -moz-transition: color 500ms ease;
    -ms-transition: color 500ms ease;
    -o-transition: color 500ms ease;
    transition: color 500ms ease;
}
.drag-caption.active {
    color: black;
}
#submit-caption{
    font-weight: bold;
}

And here is the jsfiddle. I'd like my separtors to be aligned over the caption and ON the background bar.

Like this:

---|---------|------------|
   |         |            |
  Hi bot  Keep sliding  Submit
Problem courtesy of: Vinz243

Solution

I've added a div and two span elements and positioned the separators on the range using CSS Positioning.

Demo

Demo 2 (If you don't need the last one)

Demo 3 (As per your exact requirements)

Here, am using CSS Positioning to position each of the separator on the range bar, you can tweak up the lefts and rights according to your requirement.

.separators { position: relative; } .separators > span:before, .separators > span:after{ content: "|"; position: absolute; z-index: -1; color: #DEDEDE; } .separators > span:nth-of-type(1):before { left: 50px; top: -12px; } .separators > span:nth-of-type(1):after { left: 100px; top: -12px; } .separators > span:nth-of-type(2):before { left: 150px; top: -12px; } .separators > span:nth-of-type(2):after { left: 200px; top: -12px; }
Solution courtesy of: Mr. Alien

Discussion

View additional discussion.



This post first appeared on CSS3 Recipes - The Solution To All Your Style Problems, please read the originial post: here

Share the post

Make vertical splitters in pure css3 in background

×

Subscribe to Css3 Recipes - The Solution To All Your Style Problems

Get updates delivered right to your inbox!

Thank you for your subscription

×