Pure CSS3 Push Down Panel | Help a newbie change color

[a404freedom]

I've tried everything to change the color of it to #f87b00 along with it's corresponding gradients. I just have no clue how to do it. Below is the css:

<style type="text/css">

div.css3droppanel { /* Main wrapper for push down panel */
		position: relative;
		margin: 0;
		margin-bottom: 1em; /* margin with rest of content on page */
		}


div.css3droppanel > div { /* Content DIV DIV inside wrapper */
		height: 10px; /* initial height of content when hidden. Should be same height as bottom bar (see div.css3droppanel:after) */
		padding: 5px;
		-moz-box-sizing: border-box; /* ensure any padding and border declared inside content DIV doesn't increase DIV's declared dimensions */
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		overflow: hidden;
		background: #b5e5e0; /* background of content DIV */
		position: relative;
		opacity: 0;
    -moz-transition: all 0.2s ease-in-out 0.1s;  /* CSS3 transition of UL state. Last 0.1s specifies delay before animation */
    -o-transition: all 0.2s ease-in-out 0.1s; /* instead of ease-in-out, also try cubic-bezier(0.25, 0.1, 0.25, 1.4) instead */
    -webkit-transition: all 0.2s ease-in-out 0.1s;
    transition: all 0.2s ease-in-out 0.1s;
		}

div.css3droppanel:after { /* Add bottom bar beneath wrapper */
		content: '';
		display: block;
		bottom: 0;
		position: absolute;
		width: 100%;
		height: 10px;
		box-shadow: 0 3px 8px gray, 3px 3px 4px brown inset;
		background: #5a1619; /* dark redish background and its gradient versions */
		background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(56,38,39,0.72) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(56,38,39,0.72)));
		background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(56,38,39,0.72) 100%);
		}


div.css3droppanel input[type="checkbox"] { /* style invisible checkbox element used to toggle state of push down panel */
		position: absolute;
		right: 50px; /* right position of checkbox */
		width: 60px; /* width of checkbox */
		height: 42px; /* height of checkbox */
		bottom: -34px; /* bottom offset of checkbox */
		z-index: 10;
		cursor: pointer;
		opacity: 0;
		}

div.css3droppanel input[type="checkbox"]:checked ~ div { /* when checkbox is checked, expand content within wrapper */
		height: 250px; /* height of content to expand to. Scrollbar will be shown if content overflows this height */
		opacity: 1;
		overflow: auto;
		}

div.css3droppanel label { /* style label that's positioned below wrapper's bottom bar, and will toggle checkbox when interacted with */ 
		position: absolute;
		right: 50px; /* right position of label */
		width: 60px; /* width of label */
		height: 42px; /* height of label */
		bottom: -34px; /* bottom offset of label */
		border-bottom-left-radius: 30px;
		border-bottom-right-radius: 30px;
		cursor: pointer;
		z-index: 5;
		background: #5a1619; /* dark redish background and its gradient versions */
		background: -moz-linear-gradient(top,  rgba(118,36,41,1) 0%, rgba(117,5,11,1) 50%, rgba(124,31,32,0.72) 100%);
		background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(118,36,41,1)), color-stop(50%,rgba(117,5,11,1)), color-stop(100%,rgba(124,31,32,0.72)));
		background: -webkit-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: -o-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: -ms-linear-gradient(top,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		background: linear-gradient(to bottom,  rgba(118,36,41,1) 0%,rgba(117,5,11,1) 50%,rgba(124,31,32,0.72) 100%);
		box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset;
		}

div.css3droppanel label:hover { /* style of label when mouse rolls over it */
		box-shadow: 0 3px 8px black, 5px 5px 6px brown inset, 0 -3px 3px rgba(152,41,47,0.7) inset, 0 5px 0 rgba(255,255,255,0.7) inset, 0 0 15px rgba(255,255,255,0.8) inset;
		}

div.css3droppanel label:after { /* generated down arrow */
		content: '';
		position: absolute;
		display: block;
		width: 0;
		height: 0;
		border: 12px solid transparent;
		border-color: white transparent transparent transparent;
		top: 18px;
		left: 18px;
		box-shadow: 0 0 7px gray inset;
		}

</style>

<!--[if lte IE 8]>

<style>

/* Hide panel from IE8 and below */

div.css3droppanel {
		display: none;
		}

</style>

<![endif]-->

All help would be GREATLY GREATLY GREATLY appreciated!!!!!!!!

[traq]

I've tried everything to change the color of it to #f87b00 along with it's corresponding gradients

I assume you mean background-color and gradients...?

What, specifically, have you tried? It would be helpful to know if you've had problems with something that should work, vs. not yet figuring out how to approach the problem.

In each rule set you showed, the background color is specified in the background properties. The first declaration is a solid color—this is simply a "fallback" value for browsers that don't understand gradients. The following background declarations define the gradients. There are so many of them because it's a relatively new feature, and not all (versions of) browsers implement them in the same way.

Start with the standards version: linear-gradient. The first parameter is the direction: to bottom. each of the following values is a color (rgba uses the red/green/blue values (0-255), followed by the alpha (transparency; 0-1) value) followed by a "stop" position (0% - 100%).

There are online tools (like colorzilla) that can help you generate the other forms from the "official" syntax.

[a404freedom]

I assume you mean background-color and gradients...?

What, specifically, have you tried? It would be helpful to know if you've had problems with something that should work, vs. not yet figuring out how to approach the problem.

In each rule set you showed, the background color is specified in the background properties. The first declaration is a solid color—this is simply a "fallback" value for browsers that don't understand gradients. The following background declarations define the gradients. There are so many of them because it's a relatively new feature, and not all (versions of) browsers implement them in the same way.

Start with the standards version: linear-gradient. The first parameter is the direction: to bottom. each of the following values is a color (rgba uses the red/green/blue values (0-255), followed by the alpha (transparency; 0-1) value) followed by a "stop" position (0% - 100%).

There are online tools (like colorzilla) that can help you generate the other forms from the "official" syntax.

Thank you for the reply.

I ended up toying with the coding on codepen and ended up self teaching but thank you very much for the advice.

[traq]

no problem. self-teaching is good.

If your question has been answered, please mark your thread "resolved":

• On your original post (post #1), click [edit], then click [go advanced].
• In the "thread prefix" box, select "Resolved".
• Click [save changes].