I am creating a web application and I need to add a ui wizard to that only using html, js, and css. It was achievable. But here need to change the shapes of the steps as in the attached image. In addition to the image I need to remove the gap between each steps. For that I need some css support. So anyone have an idea to create this ui using pure css & html?
#flowBoxes {
margin:auto;
padding:20px;
min-width:700px;
}
#flowBoxes div {
display:inline-block;
position:relative;
height:25px;
line-height:25px;
padding:0 20px;
border:1px solid #ccc;
margin-right:-4px;
background-color:white;
}
#flowBoxes div.right:after{
content:'';
border-top:1px solid #ccc;
border-right:1px solid #ccc;
width:18px;
height:18px;
position:absolute;
right:0;
top:-1px;
background-color:white;
z-index:150;
-webkit-transform: translate(10px,4px) rotate(45deg);
-moz-transform: translate(10px,4px) rotate(45deg);
-ms-transform: translate(10px,4px) rotate(45deg);
-o-transform: translate(10px,4px) rotate(20deg);
transform: translate(10px,4px) rotate(45deg);
}
#flowBoxes div.left:before{
content:'';
width:18px;
height:18px;
position:absolute;
left:0;
top:-1px;
background-color:white;
z-index:50;
-webkit-transform: translate(-10px,4px) rotate(45deg);
-moz-transform: translate(-10px,4px) rotate(45deg);
-ms-transform: translate(-10px,4px) rotate(45deg);
-o-transform: translate(-10px,4px) rotate(20deg);
transform: translate(-10px,4px) rotate(45deg);
}
#flowBoxes .active{
background-color:green;
color:white;
}
#flowBoxes div.active:after{
background-color:green;
}
<div id="flowBoxes">
<div class="right">Step 1</div>
<div class="left right active">Step 2</div>
<div class="left right">Step 3</div>
<div class="left right">Step 4</div>
<div class="left">Step 5</div>
</div>
I think this is what you are looking for.
I am adding this as another answer because the first answer was really simple and can help others too..
Page Navigation Wizzard UI
I've made changes to that code and here you have the updated snippet.
I hope this is simple to understand.
Please change color as per ur needs.
ul {
display: flex;
}
.arrow-pointer {
list-style: none;
display: flex;
align-items: center;
justify-content: center;
margin-right: 25px;
}
.arrow-pointer {
width: 250px;
height: 50px;
background: gray;
position: relative;
}
.arrow-pointer:not(:first-child):after {
content: '';
position: absolute;
left: 0; bottom: 0; width: 0; height: 0;
border-left: 25px solid white;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
.arrow-pointer:not(:last-child):before {
content: '';
position: absolute;
right: -25px;
bottom: 0;
width: 0;
height: 0;
border-left: 25px solid gray;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
}
<!DOCTYPE html>
<html>
<body>
<h1>The ul element</h1>
<ul>
<li class="arrow-pointer">Step 1</li>
<li class="arrow-pointer">Step 2</li>
<li class="arrow-pointer">Step 3</li>
</ul>
</body>
</html>
Related
I'm transforming a div with perspective(150px) and rotateY(-1deg) and on hover I'm transitioning the rotation to 0deg.
Everything worked great, on Firefox 31.0 for Windows, then I updated to Firefox 32.0.1.
Now in Firefox 32.0.1, the perspective and rotation work, but the transition between the normal state and the hover state has a nasty little jump that I can't seem to get rid of.
Here's the stripped down code:
#wrap {
border: 1px solid #000;
display: block;
position:relative;
z-index:1;
width:550px;
}
#one, #two {
height:100px;
width:550px;
background:red;
margin: 50px 0;
transition:all 1s linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index:2;
}
#one {
text-align:right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(1deg);
}
#two {
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-1deg);
}
#one:hover, #two:hover {
transform: perspective(150px) rotateY(0deg);
transition:all 1s linear;
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
jsFiddle demo
To recreate the issue, hover on the red divs and watch the right edge. At the end of the transition you will see a 5-10 pixel shift/jump.
I've tried:
Moving perspective to the parent element.
backface-visibility: hidden; and other anti-aliasing methods
Using rotate3D() rather than rotateY()
Using transform-style: preserve-3d;
Various combinations of perspective and rotation*
*Using more extreme perspective values seems to reduce the appearance of the jump, but strangely if I hover over the elements several times in succession the jump comes and goes randomly. Example
Note that the problem doesn't appear in other browsers/versions.
I've had a look at the issue, and you are right about the differences between the firefox versions.
The problem is the 0deg value in the rotate transformation. I've tried two different solutions, one of which seems to work every time on testing, and the other glitches occasionally.
My solution using 0rad is the occasional glitchy solution:
#wrap {
border: 1px solid #000;
display: block;
position: relative;
z-index: 1;
width: 550px;
}
#one, #two {
height: 100px;
width: 550px;
background: red;
margin: 50px 0;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index: 2;
}
#one {
left: 0px;
text-align: right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(0.05rad);
}
#one:hover {
transform: perspective(150px) rotateY(0rad);
}
#two {
right: 1px;
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-0.05rad);
}
#two:hover {
transform: perspective(150px) rotateY(0rad);
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
My other solution requires a bit more work with positions and size to give the perception of a 0deg transform by using a value of 0.1deg.
#wrap {
border: 1px solid #000;
display: block;
position: relative;
z-index: 1;
width: 550px;
}
#one, #two {
height: 100px;
width: 550px;
background: red;
margin: 50px 0;
transition-property: all;
transition-duration: 1s;
transition-timing-function: linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: relative;
z-index: 2;
}
#one {
left: 0px;
text-align: right;
transform-origin: left center 0px;
transform: perspective(150px) rotateY(1deg);
}
#two {
right: 1px;
transform-origin: right center 0px;
transform: perspective(150px) rotateY(-1deg);
}
#one:hover {
transform: perspective(150px) rotateY(0.1deg);
width: 552px;
}
#two:hover {
right: 3px;
transform: perspective(150px) rotateY(-0.1deg);
width: 552px;
}
<div id="wrap">
<div id="one">one</div>
<div id="two">two</div>
</div>
Ultimately the differences in the two solutions is the amount of work required to get it to work.
For the occasional glitch, I would suffice with rad over deg.
I hope this helps.
From what version did you update? I have tried Firefox 28.0, 31.0, 32.0.2, 33.0b4 (beta), 33.0b5 (beta), and 34.0a2 (alpha). All experience this issue.
After trying multiple possibilities for property values, my belief is that this is a bug in the rendering engine. While it might be possible to find some combination of properties that forces the rendering engine to be referenced to the right, using transform-origin: right center 0px; (as you have) does appear to be what should cause this to be locked to the right edge.
The correct action appears to be to file a bug with Mozilla.
Here is a screen capture of the jump I see into the <div>:
And out of the <div> (only a couple of pixels):
Looking at it some more, the bottom <div> also jumps in the vertical direction.
As mentioned, it is unlikely there will be a workaround. However, I can suggest a hack which actually makes a dramatic improvement (at least for me).
The hack is to obscure the edges which are where the issues show up. It is not really a good solution. However, for these simple mono colored divs it does look better. Here is a JSFiddle you can test with (definitely not as compete as you would need, but it will give you an idea).
html, body, * {
padding: 0;
margin: 0;
}
#mak-overwrap {
border: 0px solid #000;
display: block;
position:absolute;
z-index:0;
width:590px;
pointer-events:none;
}
#mak-wrap1 {
border: 0px solid #000;
display: block;
position:absolute;
z-index:10;
width:570px;
left:10px;
pointer-events:none;
}
#mak-wrap2 {
border: 1px solid #000;
display: block;
position:absolute;
z-index:10;
width:550px;
left:10px;
top:0px;
height:400px;
background:transparent;
pointer-events: none;
}
#mak-three {
height:300px;
width:20px;
border: 0px solid #000;
position: absolute;
top:0px;
z-index:10;
background:white;
top:30px;
}
#mak-four {
height:300px;
width:20px;
border: 0px solid #000;
position: absolute;
top:0px;
left:572px;
z-index:10;
background:white;
top:30px;
}
#mak-one-in {
height:50px;
width:75px;
border: 0px solid #000;
position: relative;
top:0px;
z-index:11;
background:transparent;
top:0px;
left:218px
}
#mak-two-in {
height:50px;
width:75px;
border: 0px solid #000;
position: relative;
top:0px;
z-index:11;
background:transparent;
top:0px;
left:274px
}
#mak-one, #mak-two {
height:100px;
width:570px;
background:red;
margin: 50px 0;
transition:all 1s linear;
border: 1px solid #000;
outline: 1px solid transparent;
position: reletive;
z-index:2;
pointer-events: auto;
}
#mak-one {
text-align:right;
transform-origin: left center 0px;
transform: perspective(120.7px) rotateY(1deg);
left:0px;
}
#mak-two {
transform-origin: right center 0px;
transform: perspective(120px) rotateY(-1deg);
left:0px;
}
#mak-one:hover, #mak-two:hover {
transform: perspective(150px) rotateY(0deg);
transition:all 1s linear;
}
<div id="mak-overwrap">
<div id="mak-wrap1">
<div id="mak-one">
<div id="mak-one-in">one</div>
</div>
<div id="mak-two">
<div id="mak-two-in">two</div>
</div>
<div id="mak-wrap2"></div>
</div>
<div id="mak-three"></div>
<div id="mak-four"></div>
</div>
This question already has answers here:
draw diagonal lines in div background with CSS
(13 answers)
Closed 8 years ago.
I need to draw in my div diagonal line. It should look like this:
My HTML:
<div style="height: 28px; width: 28px; border: 1px solid rgb(219,225,230);background-color:white;" >
</div>
Is it possible to do it only with CSS?
You can achieve the desired effect by using just one single div. Check the DEMO.
div{
border:1px solid gray;
width:28px;
height:28px;
position:relative;
}
div:after{
content:"";
position:absolute;
border-top:1px solid red;
width:40px;
transform: rotate(45deg);
transform-origin: 0% 0%;
}
Note: please add the vendor prefix for older browsers i.e. -moz, -webkit.
Using CSS transform property you can achieve this. Look at the following HTML and CSS.
HTML
<div style="border: 1px solid #000; width:100px; height:100px;">
<div id="hr" style="border-top:1px solid #ff00ff; height:100px; margin-left:-140px;"></div>
</div>
CSS
#hr {
-moz-transform: rotate(45deg);
-o-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
DEMO
You could also use two elements and theirs borders like that :
The HTML :
<div class="top-left">
<div class="cross-a"></div>
<div class="cross-b"></div>
</div>
The CSS :
.top-left {
position: absolute;
top: 0;
left: 0;
height: 28px;
width: 28px;
border-top: solid 2px #fff;
border-left: solid 2px #fff;
}
.cross-a, .cross-b {
position:absolute;
width:0;
height:0;
}
.cross-a {
top: -2px;
left: -2px;
border-top: 28px solid transparent;
border-right: 28px solid #000;
}
.cross-b {
top: 0px;
left: 0px;
border-top: 26px solid transparent;
border-right: 26px solid #FFFFFF;
}
The fiddle : http://jsfiddle.net/9yK6q/7/
You could use a hr element or a other element and rotate it.
Here is a demo: http://jsfiddle.net/9HXTe/
div, hr {
-moz-transform: rotate(7.5deg);
-o-transform: rotate(7.5deg);
-webkit-transform: rotate(7.5deg);
-ms-transform: rotate(7.5deg);
transform: rotate(7.5deg);
}
I want create one circle with CSS that cut off one piece (like pizza :D) but I don't know about it. please guide me how to create one circle like pizza that one piece cut off.
this is my code :
HTML:
<div class="state"></div>
CSS:
.state {
position: absolute;
height: 44px;
width: 44px;
right: 5px;
top: 0;
border: 3px solid transparent;
border-radius: 25px;
z-index: 1;
border-color: #82ba00
}
I want create this image :
Using the link RJo provided and the demo in one of the answers I came up with this:
<div class="arc-wrapper">
<div class="arc arc_start"></div>
<div class="arc arc_end"></div>
</div>
.arc-wrapper {
position:relative;
margin:20px;
}
.arc {
position:absolute;
top:0;
left:0;
width: 100px;
height: 100px;
border-radius:100%;
border:1px solid;
border: 10px solid;
border-color: #82ba00;
}
.arc_start {
border-color:#82ba00 transparent;
-webkit-transform: rotate(-65deg);
-moz-transform: rotate(-65deg);
-ms-transform: rotate(-65deg);
-o-transform: rotate(-65deg);
transform: rotate(-65deg);
}
.arc_end {
border-color: transparent #82ba00 #82ba00 #82ba00;
-webkit-transform: rotate(-110deg);
-moz-transform: rotate(-110deg);
-ms-transform: rotate(-110deg);
-o-transform: rotate(-110deg);
transform: rotate(-110deg);
}
You can change the size and direction of the gap by changing the rotate(deg) values.
Demo: http://jsfiddle.net/mmetsalu/JmruQ/
Here is the solution.
Working Fiddle
Inspiration from magnifying glass shape from this LINK
EDIT: This is a adjustable arc too. So you can increase or decrease size of the circle only by making one change to this line in the CSS
font-size: 15em; /* This controls the size. */
CSS
#pie {
font-size: 15em;
/* This controls the size. */
display: inline-block;
width: 0.5em;
height: 0.5em;
border: 0.05em solid #00cc00;
position: relative;
border-radius: 0.35em;
}
#pie::before {
content:"";
display: inline-block;
position: absolute;
right: 0.33em;
bottom: 0em;
border-width: 0;
background: white;
width: 0.22em;
height: 0.12em;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
}
HTML
<div id="pie"><div>
EDIT 2:
Here is a fiddle of a Canvas based solution. Personally i feel you should use this method.
FIDDLE
Code borrowed from Tharindulucky
See this fiddle: http://jsfiddle.net/avrahamcool/vqu5d/
HTML:
<div id="circle"></div>
CSS:
#circle {
width: 50px;
height: 50px;
border-radius: 50%;
border: 10px solid green;
border-bottom-color: transparent;
transform:rotate(30deg);
}
You can easily do it by using HTML5 Canvas element.
First write the code for cavas. (Just like a div.)
<canvas id="myCanvas" width="200" height="100" style="border: 1px solid black;"></canvas>
And then write the script for it
<script>
var d=document.getElementById("myCanvas");
var dtx=d.getContext("2d");
dtx.beginPath();
dtx.arc(95,50,40,0,1.8*Math.PI);
dtx.lineWidth = 5;
dtx.stroke();
</script>
It will produce what you want. Have fun!
For more advanced reference, http://www.html5canvastutorials.com/tutorials/html5-canvas-circles/
I know only rounded border way. Can't figure out how to create such kind of imageless ul li tabs.
As you see it's not exactly triangle: it's top and bottom sides kinda rounded. Is it possible to create something maximum similiar to the image below with css3? if yes, how?
Thank you in advance!
the markup :
first you have to define your makeup as follow:
<menu type=list>
<li>home</li>
<li>work</li>
</menu>
then use skew, rotate, box-shadow, border-radius and CSS Pseudo-elements as follow:
source: http://www.w3schools.com/css3/css3_2dtransforms.asp
http://www.w3schools.com/cssref/css3_pr_box-shadow.asp
http://www.w3schools.com/cssref/css3_pr_border-radius.asp
http://www.w3schools.com/css/css_pseudo_elements.asp
Demo1:http://jsfiddle.net/kougiland/mVu2z/5/
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position: absolute;
content: "";
height: 32px;
width: 32px;
border-radius: 4px;
background-color: red;
top: 11px;
-webkit-transform: rotate(45deg) skew(16deg,16deg);
-moz-transform: rotate(45deg) skew(16deg,16deg);
transform: rotate(45deg) skew(16deg,16deg);
}
li:before{
left:-15px;
}
li:after{
right:-15px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
Demo2: http://jsfiddle.net/kougiland/mVu2z/4/
the style:
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position: absolute;
content: "";
height: 26px;
width: 26px;
border-radius: 4px;
background-color: red;
top: 14px;
-webkit-transform: rotate(45deg) skew(30deg,30deg);
-moz-transform: rotate(45deg) skew(30deg,30deg);
transform: rotate(45deg) skew(30deg,30deg);
}
li:before{
left:-13px;
}
li:after{
right:-13px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
Demo3: http://jsfiddle.net/kougiland/mVu2z/
menu{
position:relative;
width:320px;
height:40px;
}
li{
float:left;
width:50%;
background-color:red;
list-style:none;
position:relative;
height:54px;
text-align:center;
line-height:50px;
color:white;
}
li:before,li:after{
position:absolute;
content:"";
height:40px;
width:40px;
border-radius:4px;
background-color:red;
top: 7px;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
transform:rotate(45deg);
}
li:before{
left:-20px;
}
li:after{
right:-20px;
}
li:nth-child(2):before{
box-shadow: 0px 0 0 black,-4px 4px 0 black;
}
You can use CSS transform rotate property along with border-radius, here, I've rotated an :after pseudo, which is positioned absolute to the container element. And than am using border-radius for the curve.
Demo
div {
height: 30px;
width: 100px;
background: #f00;
position: relative;
margin: 100px;
}
div:after {
background-color: #f00;
content: "";
display: block;
height: 22px;
width: 22px;
transform: rotate(45deg);
border-radius: 0 10px 0 0;
right: -11px;
top: 4px;
position: absolute;
}
Sure!
Chris Coyier was wrote a cool code for this:
http://css-tricks.com/triangle-breadcrumbs
Is this possible at all using just CSS? I need to create two slant edges with an outer border but seeming that I created the slant edges with a border I am completely lost.
This is how far I got.
JSFIDDLE does not seem to want to load today??? but will post it on there as soon as possible :).
Here's the CSS:
.wrap {width:29%;}
.slider-header:before {
content:'';
border-top:20px solid white;
border-right: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
left: 0;
height:100%;
width: 20px;
}
.slider-header {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:right;
}
.slider-header2:before {
content:'';
border-bottom:20px solid white;
border-left: 20px solid #000;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height:20px;
position: absolute;
top: 0;
right: 0;
height:100%;
width: 20px;
}
.slider-header2 {
color:#FFFFFF;
font-family:Arial, Helvetica, sans-serif;
background:#000000;
position:relative;
font-size:1em;
padding-left:1.5em;
width:200px;
float:left;
}
and the HTML:
<div class="wrap">
<div class="slider-header">
hey2
</div>
<div class="slider-header2">
hey
</div>
<div>
Hey everyone answers has been great especially Aequanox but i need this to work on IE8+ and if its IE7+ ill probably name my first born after you..
Here is achieved without adding any markup.
<div class="wrap">
<div class="slider-header">
hey1
</div>
<div class="slider-header2">
hey2
</div>
<div>
CSS is not optimized at all, just to achieve the deired effect.
.wrap{width:500px; padding:5px; display:block; overflow:hidden}
.wrap div{background:#333; color:#fff; width:235px; }
.wrap:after{
content:"";
display:block;
border-top:1px solid #333;
margin-top:-5px;
margin-left:265px;
width:235px;
}
.wrap:before{
content:"";
display:block;
border-bottom:1px solid #333;
position:absolute;
top:37px;
width:235px;
}
.slider-header{position:relative; float:left;}
.slider-header2{position:relative; float:right;}
.slider-header:before{
content:"";
display:block;
height:1px;
width:70px;
background:#333;
position:absolute;
left:225px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
}
.slider-header:after{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
right:-20px;
border-right: 20px solid transparent;
border-top: 20px solid #333;
}
.slider-header2:before{
content:"";
display:block;
width:0;
height:0;
position:absolute;
top:0;
left:-20px;
border-left: 20px solid transparent;
border-bottom: 20px solid #333;
}
And here's the fiddle : http://jsfiddle.net/dG7mD/
It is possible to draw the shapes:
http://techcruser.blogspot.com/2011/08/draw-various-shapes-using-css.html
I was able to get the shapes without writing in them:
html:
<table>
<tr>
<td class="triangle-topleft">
button1
</td>
<td class="triangle-bottomright">
button2
</td>
</tr>
</table>
css:
.triangle-topleft {
width: 0;
height: 0;
border-top: 100px solid red;
border-right: 100px solid transparent;
*/}
.triangle-bottomright {
width: 0;
height: 0;
border-bottom: 100px solid red;
border-left: 100px solid transparent;
}
but honestly, I would use jquery to do my buttons or menus. It makes it easier in the long run.
What about using some simple hr's?
HTML:
<div id="elem"> <span>Text 1</span>
<span>Text 2</span>
<hr id="hr1" class="lines" />
<hr id="hr2" class="lines" />
<hr id="hr3" class="lines" />
</div>
CSS:
#elem {
height: 50px;
width: 320px;
background: black;
margin: 50px;
position: relative;
}
#elem > span {
box-sizing: border-box;
height: 100%;
width: 50%;
color: white;
display: block;
float: left;
padding: 0.2em 1.5em;
}
hr.lines {
height: 1px;
background-color: black;
color: black;
border: 3px solid white;
border-left: 0 none;
border-right: 0 none;
position: absolute;
margin: 0;
}
hr#hr1 {
-webkit-transform: rotate(-55deg);
-moz-transform: rotate(-55deg);
-o-transform: rotate(-55deg);
width: 70px;
top: 50%;
left: 50%;
margin-left: -40px;
margin-top: -3px;
}
hr#hr2 {
width: -webkit-calc(50% - 25px);
bottom: -7px;
left: 0;
}
hr#hr3 {
width: -webkit-calc(50% - 15px);
top: -7px;
right: 0;
}
Fiddle!