I have a status bar with chevron shape, each bar has a long text. in big screen all are perfect. but in small screen text break the alignment and shape. I not needed to work on mobile screen but it breaks in small laptop screen also.
My target result show below (with small text my code work fine)
My snippets are below, please advise me.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
A few tips that you might consider :
You may adjust the padding to keep text away from edges .
Flex can also be useful to center contents.
Vertical-align can be used on inline boxes
.chevron {
/* flex to align content */
display: inline-flex;
align-items:center;
justify-content:center;
/* end flex update*/
position: relative;
clear: both;
padding: 10px 0 10px 2.5em;/* adjust here side's padding*/
margin:2px 0;/*vertical margins if wrapping ? */
height: 20px;
width: 15%;
vertical-align:middle;
text-align:center;
color: white;
font-size: 12px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
.content {
width: 100%;
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: center;
}
#media(max-width:768px) {
.content {
flex-flow: wrap;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
height: 20px;
line-height: 20px;
text-align:center;
color: white;
font-size: 12px;
white-space: pre-wrap;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="content">
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
</div>
I hope it's what you're looking for :)
what if you align the elements and in case of the responsive you center it and leave only one per line.
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 12px 0 8px 27px;
height: 20px;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
vertical-align: top;
line-height: 9px;
}
.chevron:before {
top: 0;
-webkit-transform: skew(40deg, 0deg);
-moz-transform: skew(40deg, 0deg);
-ms-transform: skew(40deg, 0deg);
-o-transform: skew(40deg, 0deg);
transform: skew(40deg, 0deg);
border-top-left-radius: 3px;
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-40deg, 0deg);
-moz-transform: skew(-40deg, 0deg);
-ms-transform: skew(-40deg, 0deg);
-o-transform: skew(-40deg, 0deg);
transform: skew(-40deg, 0deg);
border-bottom-left-radius: 3px;
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
#media all and (max-width:768px){
.chevron {display: block;margin: 5px auto;padding: 8px 9px 12px 30px;}
}
<div class="chevron">Claim registered</div>
<div class="chevron">Awaiting Emails </div>
<div class="chevron">Please Repair; Awaiting repair date</div>
<div class="chevron">some lengthiest; status goes</div>
<div class="chevron">Invoice Paid</div>
.content {
width: calc(100% - 30px);
display: flex;
flex-direction: row;
justify-content: space-around;
align-items: stretch;
}
#media(max-width:768px) {
.content {
flex-flow: wrap;
}
.chevron {
text-align:end;
}
}
.chevron {
width: 100%;
position: relative;
padding: 10px;
min-height: 20px;
display: flex;
flex-direction: column;
justify-content: center;
margin: 5px 2px;
}
.chevron span {
width: 100%;
margin-left: 25px;
color: white;
text-align: center;
font-size: 12px;
white-space: pre-wrap;
text-transform: capitalize;
}
.chevron:before {
top: 0;
-webkit-transform: skew(55deg, 0deg);
-moz-transform: skew(55deg, 0deg);
-ms-transform: skew(55deg, 0deg);
-o-transform: skew(55deg, 0deg);
transform: skew(55deg, 0deg);
}
.chevron:after {
top: 50%;
-webkit-transform: skew(-55deg, 0deg);
-moz-transform: skew(-55deg, 0deg);
-ms-transform: skew(-55deg, 0deg);
-o-transform: skew(-55deg, 0deg);
transform: skew(-55deg, 0deg);
}
.chevron:after, .chevron:before {
content: '';
position: absolute;
left: 15px;
z-index:-1;
height: 50%;
width: 100%;
background: #609090;
}
<div class="content">
<div class="chevron"><span>Claim registered</span></div>
<div class="chevron"><span>Awaiting Emails</span> </div>
<div class="chevron"><span>Please Repair; Awaiting repair date </span></div>
<div class="chevron"><span>some lengthiest; status goes</span></div>
<div class="chevron"><span>Invoice Paid</span></div>
</div>
ok friend here is this!
Yes, the styles are not responsive, a fixed height and width. Also use the word-wrap property to break word from overlapping content area ( won't work well if height is fixed ).
See an example:
.chevron {
display: inline-block;
position: relative;
clear: both;
padding: 10px;
/* You can change this to fit the height you want */
height: auto;
width: 15%;
text-align:center;
color: white;
font-size: 12px;
word-wrap: break-word;
}
/* Responsive media query */
#media screen and ( min-width: 992px )
{
.chevron {
max-height: 20px;
}
}
I am having problems creating a Navigation bar that can spin in a circle in CSS3 and HTML. How can I do this? Below is a picture of the idea from an old game. I want the same animation type that it uses. When it is on the active circle, the page is shown. As you move left and right, the page will change. Is there a way to accomplish this? How can I create this in CSS3 and HTML5.
I have added a code snippet of what I have done so far as a basic idea. I need two buttons that would allow the animation to move left or right instead of 1,2,3,4.
The idea comes from SliderDock. A dock for Windows and MacOS.
CSS3 should be able to accomplish this task if i'm not mistaken.
http://img05.deviantart.net/d13f/i/2011/139/7/4/altimit_mine_os_by_tenshi_no_chi-d3gowsq.png
* {
margin: 0;
padding: 0;
-webkit-backface-visibility: hidden;
}
/*HEADER*/
.header {
height: 25px;
background: #222;
color: #eee;
text-align: center;
font: 10px/25px Helvetica, Verdana, sans-serif;
}
.header a {
color: #999;
}
/*WRAPPER*/
.wrapper {
position: relative;
overflow: hidden;
margin: 20px auto;
width: 370px;
}
.menu a {
margin-right: -4px;
padding: 10px 30px;
width: 50px;
color: #333;
text-decoration: none;
font: 15px/25px Helvetica, Arial, sans-serif;
}
.menu a:hover {
background: #eee;
}
/*INNER CIRCLE*/
.wrapper:before {
content: "Menu";
text-align: center;
font: 30px/120px Georgia, Times, serif;
color: #black;
position: absolute;
top: 140px;
left: 110px;
z-index: 10;
width: 130px;
height: 130px;
border-radius: 50%;
background: #fff;
-webkit-box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.3);
}
/*MAIN CIRCLE*/
.circle {
position: relative;
margin-top: 30px;
margin-bottom: 20px;
margin-left: 25px;
width: 300px;
height: 300px;
border-radius: 50%;
background: #white;
box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-box-shadow: inset 0px 0px 30px rgba(0, 0, 0, 0.3);
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
transition: all 0.5s ease;
}
/*LITTLE CIRCLES*/
.circle li {
position: absolute;
width: 50px;
height: 50px;
border-radius: 50%;
background: white;
list-style-type: none;
text-align: center;
font: 20px/50px Helvetica, Arial, sans-serif;
top: 0;
left: 0;
}
.circle li:nth-child(1) {
top: 15px;
left: 125px;
}
.circle li:nth-child(2) {
top: 125px;
left: 235px;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.circle li:nth-child(3) {
top: 235px;
left: 125px;
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.circle li:nth-child(4) {
top: 125px;
left: 15px;
-webkit-transform: rotate(270deg);
-moz-transform: rotate(270deg);
-ms-transform: rotate(270deg);
-o-transform: rotate(270deg);
transform: rotate(270deg);
}
/*HOVER STATES*/
.menu > .one:hover ~ .circle {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.menu > .two:hover ~ .circle {
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.menu > .three:hover ~ .circle {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
.menu > .four:hover ~ .circle {
-webkit-transform: rotate(-270deg);
-moz-transform: rotate(-270deg);
-ms-transform: rotate(-270deg);
-o-transform: rotate(-270deg);
transform: rotate(-270deg);
}
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<meta name="description" content="description">
<title>Nav Menu</title>
<link rel="stylesheet" type="text/css" media="screen" href="style.css" />
</head>
<body>
<div class="header"></div>
<div class="wrapper">
<div class="menu">
1
2
3
4
<div class="circle">
<ul>
<li>Home</li>
<li>World</li>
<li>Games</li>
<li>AboutUs</li>
</ul>
</div>
</div>
</div>
</body>
</html>
you can do it with CSS3 also. To do this use animation rotate on hover of that numbers and rotate the menu image.
you can do it by using javascript with onmousehover and onmouseleave event.
"Ugh, yet another css octagon".
This is something different, I swear. I did read similar questions on StackOverflow.
I would like to have the following on my page:
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
.octagon {
display: inline-block;
position: relative;
overflow: hidden;
-webkit-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-moz-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-ms-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
-o-transform: rotate(22.5deg) scale(0.9) translateY(-4px);
transform: rotate(22.5deg) scale(0.9) translateY(-4px);
}
div.octagon > * {
position: relative;
overflow: hidden;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
background: transparent;
border: 4px solid;
margin: 0;
}
div.octagon > *:after {
position: absolute;
/* There needs to be a negative value here to cancel
* out the width of the border. It's currently -4px,
* but if the border were 5px, then it'd be -5px.
*/
top: -4px;
right: -4px;
bottom: -4px;
left: -4px;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
content: '';
border: inherit;
}
div.octagon > * > img {
display: block;
-webkit-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-moz-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-ms-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
-o-transform: rotate(-67.5deg) scale(1.1) translateZ(0);
transform: rotate(-67.5deg) scale(1.1) translateZ(0);
backface-visibility: hidden;
}
.green .octagon {
color: green;
}
/* Grouping */
.octagons {
position: relative;
display: inline-block;
/* To take dimension of the main octagon */
margin-left: 30px;
font-size: 0;
/* Remove white space */
}
.background.octagon {
position: absolute;
width: 100%;
height: 100%;
}
.background.octagon > * {
width: 100%;
height: 100%;
}
.left.octagon {
left: -30px;
}
.right.octagon {
right: -30px;
}
<div class="green octagons">
<div class="left background octagon">
<div> </div>
</div>
<div class="right background octagon">
<div> </div>
</div>
<div class="octagon">
<p>
<img src="https://placeholdit.imgix.net/~text?txtsize=25&txt=People&w=175&h=175" alt="" width="175" height="175" />
</p>
</div>
</div>
As you probably see, this is a "div soup". Because the main octagon needs to clip the image, it needs to have the same variable dimension as the image. Also, the octagons have border and are responsive, so I can't use "border hack".
The two background octagons only need the borders, but it need to be the same dimension as the image as well.
I can't use SVG because the image will be entered by end-user.
My question is then: Is there a cleaner way to do this?
So what i want is: when cursor goes over the image (diamond), no to activate the hover of the octagon.
Here is the example:
http://codepen.io/Chrez/pen/yYajGo
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
CCS:
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
}
Add pointer-events: none; to .diamond
codepen
body {
background-color: #ba2020;
}
.octagonFirst {
width: 164px;
height: 68px;
position: absolute;
background: black;
top: 200px;
left: 1000px;
color: white;
font-size: 30px;
-webkit-transform: rotate(-16deg);
-moz-transform: rotate(-16deg);
-ms-transform: rotate(-16deg);
-o-transform: rotate(-16deg);
transform: rotate(-16deg);
}
.octagonIn1 {
width: 100%;
height: 100%;
background: inherit;
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
}
.octagonIn2 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-ms-transform: rotate(90deg);
-o-transform: rotate(90deg);
transform: rotate(90deg);
}
.octagonIn3 {
width: 100%;
height: 100%;
display: inherit;
background: inherit;
-webkit-transform: rotate(135deg);
-moz-transform: rotate(135deg);
-ms-transform: rotate(135deg);
-o-transform: rotate(135deg);
transform: rotate(135deg);
}
.text {
display: block;
position: absolute;
z-index: 1000;
-webkit-transform: rotate(16deg);
-moz-transform: rotate(16deg);
-ms-transform: rotate(16deg);
-o-transform: rotate(16deg);
transform: rotate(16deg);
}
.First {
left: 35px;
top: 10px;
}
.octagonFirst:hover {
background: white;
color: black;
}
.diamond {
width: 206px;
height: 202px;
position: absolute;
background-image: url('http://i.imgur.com/Yyv3dht.png');
top: 0;
pointer-events: none;
}
<li>
<a href="#">
<div class="octagonFirst">
<div class="octagonIn1">
<div class="octagonIn2">
<div class="octagonIn3"></div>
</div>
</div>
<span class="text First">Startseite</span>
<div class="diamond"></div>
</div>
</a>
</li>
Can someone explain why my purple box overlaps my yellow box in this demo?
I'd like my yellow box to appear first & then my purple box to be 10px below it.
Demo: http://jsfiddle.net/t0x0y7ax/
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
Personally, I would just transform the container...it makes it much easier all round
JSfiddle Demo
* {
margin: 0;
padding: 0;
}
#container {
position: fixed;
top:50%;
left:0;
border:1px solid red;
transform-origin:top left;
transform: rotate(-90deg) translate(-100%, 0%);
}
#feedback1 {
background:yellow;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
#feedback2 {
background:purple;
height: 50px;
width: 160px;
float: right; /* to correct order when rotated */
}
<div id="container">
<div id="feedback1">Feedback</div>
<div id="feedback2">Feedback</div>
</div>
It is because of the rotation as the commentator specified. You can float them to get them to show up next to each other - http://jsfiddle.net/t0x0y7ax/2/.
#container {
position: fixed;
top: 50%;
left:-55px;
}
#feedback1 {
float: left;
background:yellow;
height: 50px;
width: 160px;
margin-bottom:10px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
#feedback2 {
float: left;
background:purple;
height: 50px;
width: 160px;
transform: rotate(-90deg);
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
-o-transform: rotate(-90deg);
filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
Updated Fiddle - http://jsfiddle.net/t0x0y7ax/12/