Related
I am getting the error
Parse Error progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0) }
here is the code
.surgeryCategory .card-title.gradient {
display: block;
width: 100%;
background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0)
}
I forget to put semicolon at the end of the line
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0);
Here's the correct code. You forgot to add semicolon at the end of the second last line.
.surgeryCategory .card-title.gradient {
display: block;
width: 100%;
background: linear-gradient(to bottom, rgba(125, 185, 232, 0) 0, rgba(0, 0, 0, .4) 50%, rgba(0, 0, 0, .8) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#007db9e8', endColorstr='#cc000000', GradientType=0);
}
Hi i am working on an org chart where in i was successfully able to generate the whole tree. Now my concern is how can i convert a group of list elements to display vertically instead of horizontal display.
My code for the org chart is as follows:
* {
margin: 0;
padding: 0;
}
.tree ul {
padding-top: 50px;
position: relative;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
.tree li {
float: left;
text-align: center;
list-style-type: none;
position: relative;
padding: 40px 5px 0 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
}
/*We will use ::before and ::after to draw the connectors*/
.tree li::before,
.tree li::after {
content: '';
position: absolute;
top: 0;
right: 50%;
border-top: 2px solid #3f3974;
width: 50%;
height: 40px;
}
.tree li::after {
right: auto;
left: 50%;
border-left: 2px solid #3f3974;
}
/*We need to remove left-right connectors from elements without
any siblings*/
.tree li:only-child::after,
.tree li:only-child::before {
display: none;
}
/*Remove space from the top of single children*/
.tree li:only-child {
padding-top: 0;
}
/*Remove left connector from first child and
right connector from last child*/
.tree li:first-child::before,
.tree li:last-child::after {
border: 0 none;
}
/*Adding back the vertical connector to the last nodes*/
.tree li:last-child::before {
border-right: 2px solid #3f3974;
border-radius: 0 5px 0 0;
-webkit-border-radius: 0 5px 0 0;
-moz-border-radius: 0 5px 0 0;
}
.tree li:first-child::after {
border-radius: 5px 0 0 0;
-webkit-border-radius: 5px 0 0 0;
-moz-border-radius: 5px 0 0 0;
}
/*Time to add downward connectors from parents*/
.tree ul ul::before {
content: '';
position: absolute;
top: 0;
left: 50%;
border-left: 2px solid #3f3974;
width: 0;
height: 50px;
}
.tree li a {
border: 1px solid #ccc;
padding: 5px 10px;
text-decoration: none;
color: #666;
font-family: arial, verdana, tahoma;
font-size: medium;
font-weight: bolder;
display: inline-block;
border-radius: 5px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
transition: all 0.5s;
-webkit-transition: all 0.5s;
-moz-transition: all 0.5s;
width: 10em;
word-break: break-word;
white-space: pre-wrap;
}
.tree li a~.tree li a {
/* Undo last assignment */
word-spacing: unset;
display: table-caption;
}
/*Time for some hover effects*/
/*We will apply the hover effect the the lineage of the element also*/
.tree li a:hover,
.tree li a:hover+ul li a {
/* background: #c8e4f8; */
color: #000;
border: 1px solid #94a0b4;
}
/*Connector styles on hover*/
.tree li a:hover+ul li::after,
.tree li a:hover+ul li::before,
.tree li a:hover+ul::before,
.tree li a:hover+ul ul::before {
border-color: #94a0b4;
}
.tree ul.sections {
margin-top: -20px;
}
.tree ul.sections li.section {
padding-left: 25px;
border-bottom: 2px solid orange;
height: 80px;
}
.tree ul.sections li.section a {
background: #92D4A8;
top: 38px;
position: absolute;
z-index: 1;
width: 95%;
height: auto;
vertical-align: middle;
right: 0px;
line-height: 14px;
}
a[class^='level1_'] {
background: rgb(248, 80, 50);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(248, 80, 50, 1) 0%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 18%, rgba(246, 41, 12, 1) 21%, rgba(246, 41, 12, 1) 25%, rgba(240, 47, 23, 1) 43%, rgba(241, 111, 92, 1) 61%, rgba(231, 56, 39, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f85032', endColorstr='#e73827', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #f2f2f2 !important;
}
a[class^='level2_'] {
background: rgb(181, 189, 200);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(181, 189, 200, 1) 22%, rgba(130, 140, 149, 1) 33%, rgba(40, 52, 59, 1) 59%, rgba(130, 140, 149, 1) 62%, rgba(40, 52, 59, 1) 73%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#b5bdc8', endColorstr='#28343b', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #f2f2f2 !important;
}
a[class^='level3_'] {
background: rgb(157, 213, 58);
/* Old browsers */
background: -moz-linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(157, 213, 58, 1) 29%, rgba(161, 213, 79, 1) 38%, rgba(128, 194, 23, 1) 47%, rgba(157, 213, 58, 1) 63%, rgba(124, 188, 10, 1) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#9dd53a', endColorstr='#7cbc0a', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #000 !important;
}
a[class^='level4_'] {
background: -moz-linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, rgba(30, 87, 153, 0) 0%, rgba(30, 87, 153, 1) 19%, rgba(30, 87, 153, 0.95) 20%, rgba(31, 92, 159, 0.8) 23%, rgba(41, 137, 216, 0.8) 50%, rgba(30, 87, 153, 0.8) 80%, rgba(30, 87, 153, 0.8) 81%, rgba(30, 87, 153, 0) 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#001e5799', endColorstr='#001e5799', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #fff !important;
}
a[class^='level5_'] {
background: #6db3f2;
/* Old browsers */
background: -moz-linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #6db3f2 39%, #6db3f2 39%, #54a3ee 40%, #3690f0 45%, #1e69de 69%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#6db3f2', endColorstr='#1e69de', GradientType=1);
/* IE6-9 fallback on horizontal gradient */
color: #fff !important;
width: 7em !important;
}
/*Thats all. I hope you enjoyed it.
Thanks :)*/
<section class="uRegion clearfix" id="newtree" style="overflow-x: scroll;">
<div class="uRegionContent clearfix" style="width: 4275px;">
<div class="tree">
<ul class="leve1">
<li class="level1">President
<ul class="level2">
<li class="level21">Direc1
<ul class="level3">
<li class="level3_3">CSD
<ul class="level4">
<li class="level4_8">MR Sec.</li>
<li class="level4_9">Insts Section
<ul class="level5 sections">
<li class="level5_2 section">Ip Unit</li>
<li class="level5_3 section">Sp Unit</li>
<li class="level5_4 section">QTS Unit</li>
</ul>
</li>
<li class="level4_10">Acc Section
<ul class="level5 sections">
<li class="level5_5 section">Acc Unit</li>
<li class="level5_6 section">Cust Bill Unit</li>
</ul>
</li>
<li class="level4_11">BC Sec.</li>
<li class="level4_12">Mtr Section
<ul class="level5 sections">
<li class="level5_7 section">Tech Supp AMI Unit</li>
<li class="level5_8 section">Mtr Inst Unit</li>
</ul>
</li>
<li class="level4_13">CC & CC Sec
<ul class="level5 sections">
<li class="level5_9 section">CC Unit</li>
<li class="level5_10 section">BOff Unit</li>
<li class="level5_11 section">Q & A Unit</li>
<li class="level5_12 section">CC Rep. Unit</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
</div>
</section>
In the chart under sections i have some list elements aligned horizontally. Now i want to display align the li elements vertically as shown in the figure i.e.
I tried tweaking with the code by adding a new class other than the one already available but it didn't work out.
To list list's items vertically you don't have to do anything.
Lists are automatically vertical.
If you want to display them horizontally, you have to use property float: left;
.horizontal li {
float: left;
padding: 20px;
list-style-type: none;
}
<ul class="horizontal">
<li> one </li>
<li> two </li>
<li> three </li>
</ul>
As I can see in your code, you have float: left property added to each .tree li element. Just remove it from those elements that you don't want to be floated (and should be vertical), and add it only to those which have to be flated (and should be horizontal).
How can I align the text in the button to the bottom?
I tried to set line-height and vertical-align: bottom; in my CSS but neither worked.
UPDATE:
Also, I want the text to be in front of the background. I have set back gradients in the normal, hover and active states, so I my white text to be in front of that.
Code:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
Hello
</button>
</div>
</div>
For some reason bootstrap is not working in the code snippet
You can create a child element in your button (here a span) that you position to the bottom of the button.
Because the button is position: relative, the span with position: absolute will be position according to the button.
We also create a child element to display the background, via the ::before pseudo-element selector.
To resolve which child will be display on top, between two position: absolute elements, the browser use the HTML/DOM order. So a ::before element will be displayed below the others, while a ::after will be displayed on top.
You also can force the stacking order with the z-index property.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
}
.img-panel::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0; bottom: 0;
background: linear-gradient(to bottom, transparent 40%, black 100%);
}
.img-panel:hover::before {
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 40%, black 100%);
}
.img-panel > span {
position: absolute;
left: 0; right: 0; bottom: 0;
text-align: center;
color: white;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span>Hello</span>
</button>
You could use vertical-align: bottom; but to do this you need to apply a display:table to the container and display:table-cell to the button and give him some specific height.
Take a look to this examples: http://daker.me/2014/04/4-css-tricks-for-vertical-alignment.html
Try adding this:
<style>
span{
position: absolute;
bottom: 0;
}
</style>
And in html markup add:
<span>Hello</span>
Try this
.img-panel {
display: flex;
flex-direction: column-reverse;
align-items: center;
}
If your button's height is 300px, you can try with a padding-top property :
CSS:
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
padding-top:250px;
}
Bootply : http://www.bootply.com/AHSl2MVDIy
Place your button text in a span, give it absolute positioning and set bottom to 0:
See the .img-panel span.button-title rule.
Update:
To place the text above the background, just add a higher z-index for the button text. A low number will do it.
.img-panel {
position: relative;
height: 300px;
width: 100%;
background-size: cover;
color: white;
}
.img-panel:after {
content: "";
width: 100%;
height: 100%;
top: 0;
left: 0;
position: absolute;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0)), color-stop(40%, rgba(0, 0, 0, 0)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 40%, #000000 100%);
}
.img-panel:hover:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.3)), color-stop(40%, rgba(0, 0, 0, 0.3)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.3) 40%, #000000 100%);
}
.img-panel:active:after {
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.6)), color-stop(40%, rgba(0, 0, 0, 0.6)), color-stop(100%, #000000));
background: -moz-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.6) 40%, #000000 100%);
}
.img-panel span.button-title {
position: absolute;
bottom: 0;
z-index: 10;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
<div class="row">
<div class="col-md-4 img-panel-container">
<button class="img-panel translucent-overlay-light" style="background-image: url('http://placeimg.com/500/300/any')">
<span class="button-title">Hello</span>
</button>
</div>
</div>
This question already has answers here:
Make CSS3 triangle with linear gradient
(5 answers)
Closed 8 years ago.
How is it possible to make a CSS arrow as a gradient instead os a solid colour?
Here is my CSS"
.breadcrumbDivider .arrow-right {
width: 0;
height: 0;
border-top: 25px solid transparent;
border-bottom: 25px solid transparent;
border-left: 25px solid gold;
position: relative;
margin-left: 360px;
}
I tried using the CSS gradient background image gradient but it takes the border parameter but unsure how to overcome this?
Here is the gradient I am trying to use...
background-color: #c9bc9e;
background-image: -webkit-gradient(linear, left top, left bottom, from(#c9bc9e), to(#a89464));
background-image: -webkit-linear-gradient(top, #c9bc9e, #a89464);
background-image: -moz-linear-gradient(top, #c9bc9e, #a89464);
background-image: -ms-linear-gradient(top, #c9bc9e, #a89464);
background-image: -o-linear-gradient(top, #c9bc9e, #a89464);
background-image: linear-gradient(top, #c9bc9e,#a89464);
filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#c9bc9e', endColorStr='#a89464');
I've made this by 'cutting out' the arrow from a square div, instead of 'generating' an arrow. It even has a hover effect:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 70%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.perc {
position: absolute;
top: 0;
width: 0%;
height: 100%;
background: rgb(30, 87, 153);
background: -moz-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(30, 87, 153, 1)), color-stop(50%, rgba(41, 137, 216, 1)), color-stop(51%, rgba(32, 124, 202, 1)), color-stop(100%, rgba(125, 185, 232, 1)));
background: -webkit-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -o-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: -ms-linear-gradient(top, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
background: linear-gradient(to bottom, rgba(30, 87, 153, 1) 0%, rgba(41, 137, 216, 1) 50%, rgba(32, 124, 202, 1) 51%, rgba(125, 185, 232, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#1e5799', endColorstr='#7db9e8', GradientType=0);
z-index: 5;
transition: all 0.8s;
}
.arrow:hover .perc {
width: 100%;
}
<div class="arrow">
<div class="perc"></div>
</div>
Note
Originally designed for a progress bar, but hover effect can be removed if necessary.
Is suitable for a block coloured background only
So, if I cut the 'fancy stuff' and show you how it works:
Hover the one below to see the magic:
.arrow {
height: 200px;
width: 300px;
background: rgb(169, 3, 41);
background: -moz-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(169, 3, 41, 1)), color-stop(44%, rgba(143, 2, 34, 1)), color-stop(100%, rgba(109, 0, 25, 1)));
background: -webkit-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -o-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: -ms-linear-gradient(top, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
background: linear-gradient(to bottom, rgba(169, 3, 41, 1) 0%, rgba(143, 2, 34, 1) 44%, rgba(109, 0, 25, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#a90329', endColorstr='#6d0019', GradientType=0);
position: relative;
overflow: hidden;
transition: all 0.8s;
}
.arrow:before {
content: "";
position: absolute;
top: 0;
width: 100%;
height: calc(100% - 80px);
border-top: 40px solid white;
border-bottom: 40px solid white;
z-index: 10;
}
.arrow:after {
content: "";
position: absolute;
right: 0px;
border-top: 100px solid white;
border-bottom: 100px solid white;
border-left: 100px solid transparent;
z-index: 10;
}
.arrow:hover:before {
border-top: 40px solid tomato;
border-bottom: 40px solid tomato;
}
.arrow:hover:after {
border-top: 100px solid yellow;
border-bottom: 100px solid blue;
}
<div class="arrow"></div>
I'm trying to create a menu which stretches across the page. However, it's not stretching across the screen, even when I make the width 100%.
Here's my code:
select {
display: none;
}
nav {
margin: 0 auto;
text-align: center;
background: #fff;
height: 70px;
width: 100%;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148, 148, 149, 1);
background: -moz-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148, 148, 149, 1)), color-stop(36%, rgba(192, 192, 192, 1)), color-stop(100%, rgba(192, 192, 192, 1)));
background: -webkit-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -o-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: -ms-linear-gradient(top, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
background: linear-gradient(to bottom, rgba(148, 148, 149, 1) 0%, rgba(192, 192, 192, 1) 36%, rgba(192, 192, 192, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0);
}
nav ul li {
float: left;
margin: 0;
padding: 0;
}
nav ul li a {
display: block;
padding: 10px 7px;
color: #000;
text-decoration: none;
}
nav ul li~li {
border-left: 1px solid #857D7A;
}
nav .active a {
background: rgba(180, 85, 12, 1);
background: -moz-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(180, 85, 12, 1)), color-stop(36%, rgba(234, 110, 16, 1)), color-stop(100%, rgba(234, 110, 16, 1)));
background: -webkit-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -o-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: -ms-linear-gradient(top, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
background: linear-gradient(to bottom, rgba(180, 85, 12, 1) 0%, rgba(234, 110, 16, 1) 36%, rgba(234, 110, 16, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#b4550c', endColorstr='#ea6e10', GradientType=0);
color: #fff;
}
#media (max-width: 480px) {
select {
display: block;
width: 200px;
margin: 0 auto;
}
nav {
display: none;
}
}
<nav>
<ul>
<li class="active">Item 1
</li>
<li>Item 2
</li>
<li>Item 3
</li>
<li>Item 4
</li>
<li>Item 5
</li>
</ul>
</nav>
<select>
<option value="#">Item 1</option>
<option value="#">Item 2</option>
<option value="#">Item 3</option>
<option value="#">Item 4</option>
<option value="#">Item 5</option>
</select>
You just need to add width: 100%; to your nav ul like this:
nav ul {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
display: inline-block;
vertical-align: top;
background: rgba(148,148,149,1);
background: -moz-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -webkit-gradient(left top, left bottom, color-stop(0%, rgba(148,148,149,1)), color-stop(36%, rgba(192,192,192,1)), color-stop(100%, rgba(192,192,192,1)));
background: -webkit-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -o-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: -ms-linear-gradient(top, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
background: linear-gradient(to bottom, rgba(148,148,149,1) 0%, rgba(192,192,192,1) 36%, rgba(192,192,192,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#949495', endColorstr='#c0c0c0', GradientType=0 );
}
If you want the buttons to expand, you need to use display: table; on the nav ul followed by display: table-cell; on the nav ul li
Here is a fiddle for you showing it working - http://jsfiddle.net/andyjh07/Ldu3o1jm/
Check this Codepan. You need to change this.
nav ul
{
width:100%
}