I was wondering how to get the link/a href to work on the text inside the box? I'm not sure what is causing the link to not work/function. I'd like to keep the animation if possible, not sure if this is what is causing the link to not work. Thank you for your help in advance!
Here is my html and css:
.sign a {
text-decoration: none;
cursor: pointer;
}
s
.sign a:hover {
color:aqua;
}
.sign {
position: relative;
vertical-align: top;
margin: 0 auto;
z-index: -10;
margin-top: 10px;
display: inline-block;
/* sign width */
width: 150px;
/* Give it a white border */
border: 5px solid #fff;
/* pad content text away from the edges of the sign */
padding: 1em 1em .75em;
/* give it a drop shadow and inset shadow at the top */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
/* setup a default background red and a red gradient where supported */
background-color: #a1cdad;
//background: linear-gradient(top, #ff9696 0%, #c80000 100%);
/* attempt to get rid of jaggies when rotated */
transform-style: preserve-3d;
backface-visibility: hidden;
/* nice rounded corners */
border-radius: 15px;
/* set the swing origin (nail body) */
transform-origin: 50% -65px;
/* animate the swing with pendulum-style easing */
animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
/* Hover over the sign to stop the animation */
animation-play-state: paused;
}
.sign p {
/* Typography */
/* let's have uppercase.. */
text-transform: uppercase;
/* bold... */
font-weight: bold;
/* white... */
color: #fff;
/* centered text */
text-align: center;
/* text-shadow: 0 0 2px rgba(0,0,0,1);*/
margin: 0 auto;
line-height: normal;
}
.one P {
font-size:1.5em;
line-height:1.5em;
font-family: 'Open Sans', sans-serif;
}
.sign IMG {
display:block;
width:3.5em;
margin:auto;
}
.sign:before {
/* string */
position: absolute;
content: "";
/* string thickness/color */
border: 2px dotted #444;
/* hide string after connection with sign */
border-bottom: none;
border-left: none;
/* string 'size' (as a -45deg rotated square) */
width: 100px;
height: 100px;
/* string position */
top: -55px;
left: 50%;
margin-left: -50px;
/* string construct */
transform: rotate(-45deg);
/* string curved round nail body (unseen) */
border-radius: 0 5px 0 0;
}
.sign:after {
/* nail */
position: absolute;
content: "";
/* nail head size */
width: 10px;
height: 10px;
/* nail head as a circle */
border-radius: 50%;
/* nail position */
top: -75px;
left: 50%;
margin-left: -4px;
/* nail head default color + gradient (where supported) */
background: #4c4c4c;
background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
#keyframes swing {
0% { transform: rotate(-3deg) }
100% { transform: rotate(3deg) }
}
<div class="sign one">
<p>start my<br>order</p>
</div>
The root cause is z-index: -10 on .sign which moves all the thing to background. And lack of z-index on a which makes it hidden behind absolutely positioned elements.
See the updated snippet:
.sign a {
text-decoration: none;
cursor: pointer;
position:relative; z-index:1;
}
.sign a:hover {
color:aqua;
}
.sign {
position: relative;
vertical-align: top;
margin: 0 auto;
/* z-index: -10; */
margin-top: 70px;
display: inline-block;
/* sign width */
width: 150px;
/* Give it a white border */
border: 5px solid #fff;
/* pad content text away from the edges of the sign */
padding: 1em 1em .75em;
/* give it a drop shadow and inset shadow at the top */
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.4), 0 5px 10px rgba(0, 0, 0, 0.4);
/* setup a default background red and a red gradient where supported */
background-color: #a1cdad;
//background: linear-gradient(top, #ff9696 0%, #c80000 100%);
/* attempt to get rid of jaggies when rotated */
transform-style: preserve-3d;
backface-visibility: hidden;
/* nice rounded corners */
border-radius: 15px;
/* set the swing origin (nail body) */
transform-origin: 50% -65px;
/* animate the swing with pendulum-style easing */
animation: swing 1.5s infinite alternate ease-in-out;
}
.sign:hover {
/* Hover over the sign to stop the animation */
animation-play-state: paused;
}
.sign p {
/* Typography */
/* let's have uppercase.. */
text-transform: uppercase;
/* bold... */
font-weight: bold;
/* white... */
color: #fff;
/* centered text */
text-align: center;
/* text-shadow: 0 0 2px rgba(0,0,0,1);*/
margin: 0 auto;
line-height: normal;
}
.one P {
font-size:1.5em;
line-height:1.5em;
font-family: 'Open Sans', sans-serif;
}
.sign IMG {
display:block;
width:3.5em;
margin:auto;
}
.sign:before {
/* string */
position: absolute;
content: "";
/* string thickness/color */
border: 2px dotted #444;
/* hide string after connection with sign */
border-bottom: none;
border-left: none;
/* string 'size' (as a -45deg rotated square) */
width: 100px;
height: 100px;
/* string position */
top: -55px;
left: 50%;
margin-left: -50px;
/* string construct */
transform: rotate(-45deg);
/* string curved round nail body (unseen) */
border-radius: 0 5px 0 0;
}
.sign:after {
/* nail */
position: absolute;
content: "";
/* nail head size */
width: 10px;
height: 10px;
/* nail head as a circle */
border-radius: 50%;
/* nail position */
top: -75px;
left: 50%;
margin-left: -4px;
/* nail head default color + gradient (where supported) */
background: #4c4c4c;
background: linear-gradient(top, #4c4c4c 0%, #595959 12%, #666666 25%, #474747 39%, #2c2c2c 50%, #000000 51%, #111111 60%, #2b2b2b 76%, #1c1c1c 91%, #131313 100%);
}
/* sign swinging animation sequence */
#keyframes swing {
0% { transform: rotate(-3deg) }
100% { transform: rotate(3deg) }
}
<div class="sign one">
<p>start my<br>order</p>
</div>
Related
I have did until now created a button and give same property for button.
I have used linear-gradient as the background-image
position the image at the center of the element and then transition
background-size from 0% 100% to 100% 100% on hover.
But I didn't do another animation when leave mouse over on button background color coming from corners to center on button like border-radius in the center on button.
Below is my code:
button {
position: relative;
display: inline-block;
padding: 15px 70px;
border-radius: 5px;
color: black;
font-size: 30px;
font-family: arial;
background-color: #D5C264;
background-image: linear-gradient(#000000, #000000);
background-repeat: no-repeat;
transition: background-size .3s, color .3s;
}
.center-corner {
background-position: 50% 50%;
}
.center-corner {
background-size: 0% 0%;
}
button:hover {
background-size: 100% 100%;
color: #fff;
}
<button class='center-corner'>NEXT</button>
I want to create this effect exactly by UI/UX which I am sharing the link:
(this is button I am talking when hover change background color)
[![enter image description here][1]][1]
Anyone help.
Use a div inside the button:
button {
cursor: pointer; /* now added in my edit */
display: inline-block;
padding: 15px 70px;
border-radius: 5px;
color: black;
font-size: 30px;
font-family: arial;
background-color: #D5C264;
transition: color .8s;
position: relative; /* now changed in my edit */
z-index: 1; /* because text to be placed over the background */
overflow: hidden; /* because background of div not to be overflow from button. */
}
.background {
width: 0;
height: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%); /* top-left and transform are for putting div in the middle of button.*/
background-image: linear-gradient(#000000, #000000);
transition: .8s;
z-index: -1;
border-radius: 50%;
}
button:hover {
color: white;
}
button:hover .background {
width: 150%;
height: 500%; /* 150% and 500% because div completely to be fill the space of the button.*/
}
<button class='center-corner'>
<div class="background"></div>NEXT
</button>
As the title describes, I am trying to animate a dashed arrow. I want it to look as close as possible to this on this site.
I was able to make an arrow although I'm not sure that this was the correct way of making such arrow. I'm assuming I'd have to have drawn it with SVG...
Also the animation looks weird and I don't know how to make it smoother...
I'd appreciate some help guys :)
This is the JsFiddle i made
Here is the code:
body {
margin: 0;
font-size: 16px;
line-height: 1.528571429;
padding: 0;
height: 100%;
}
body #contact {
height: calc(100vh - 40px);
background-color: #ffffff;
}
body #contact .to-top-btn-wrapper {
position: absolute;
z-index: 999;
left: 7%;
bottom: 15%;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper {
margin: -35px auto;
}
body #contact .to-top-btn-wrapper .btn-text-wrapper .btn-text {
font-size: 14px;
letter-spacing: 0.25em;
text-align: center;
color: #676565;
text-transform: uppercase;
}
body #contact .to-top-btn-wrapper .to-top-btn {
position: absolute;
top: 0;
left: 35px;
bottom: 25px;
cursor: pointer;
}
body #contact .to-top-btn-wrapper .to-top-btn .line {
border-right: 0.1rem dashed #676565;
display: inline-block;
animation: show 1000ms linear forwards infinite;
}
body #contact .to-top-btn-wrapper .to-top-btn .arrow {
position: absolute;
top: -0.3rem;
bottom: 0;
height: 1rem;
border-right: 0.1rem solid #676565;
display: inline-block;
}
body #contact .to-top-btn-wrapper .to-top-btn .right {
left: 0.3rem;
transform: rotate(-45deg);
}
body #contact .to-top-btn-wrapper .to-top-btn .left {
right: 0.3rem;
transform: rotate(45deg);
}
#keyframes show {
0% {
height: 5rem;
}
100% {
height: 0rem;
}
}
<section id="contact" class="container-fluid">
<div class="to-top-btn-wrapper">
<div class="btn-text-wrapper">
<span class="btn-text">Scroll to top</span>
</div>
<div class="to-top-btn">
<span class="arrow left"></span>
<span class="line"></span>
<span class="arrow right"></span>
</div>
</div>
</section>
A clip-path animation with some background can do it
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
position: relative;
padding-bottom:4px;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
clip-path:polygon(0 0,100% 0,100% 100%,0 100%);
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
clip-path:polygon(0 100%,100% 100%,100% 100%,0 100%);
}
50.1% {
clip-path:polygon(0 0 ,100% 0 ,100% 0 ,0 0);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
A similar idea using mask
.arrow {
width: 20px;
margin:10px;
height: 150px;
padding-bottom:4px;
display:inline-block;
position: relative;
color: #fff;
background: linear-gradient(currentColor 50%, transparent 50%) top/2px 15px content-box repeat-y;
-webkit-mask:linear-gradient(#fff,#fff);
-webkit-mask-size:100% 0%;
-webkit-mask-repeat:no-repeat;
mask:linear-gradient(#fff,#fff);
mask-size:100% 0%;
mask-repeat:no-repeat;
animation:hide infinite 2s linear;
}
.arrow:after {
content: "";
position: absolute;
border-left: 2px solid;
border-bottom: 2px solid;
width: 80%;
padding-top: 80%;
bottom: 4px;
left: 1px;
transform: rotate(-45deg);
}
#keyframes hide {
50% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:top;
mask-size:100% 100%;
mask-position:top;
}
50.1% {
-webkit-mask-size:100% 100%;
-webkit-mask-position:bottom;
mask-size:100% 100%;
mask-position:bottom;
}
100% {
-webkit-mask-position:bottom;
mask-position:bottom;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Here is a background only solution with no clip-path:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-block;
color: #fff;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom left/10px 10px,
linear-gradient(to bottom right,
transparent calc(50% - 1px),
currentColor 0 calc(50% + 1px),
transparent 0)
bottom right/10px 10px,
repeating-linear-gradient(currentColor 0 7px, transparent 7px 15px)
bottom/2px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
Another version with less gradient:
.arrow {
width: 20px;
margin:10px;
height: 150px;
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% 10px,
repeating-linear-gradient(white 0 7px, transparent 0 15px)
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:150px 0 0;
}
50.1% {
padding:0 0 150px;
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1)"></div>
And with CSS variables to easily control everything:
.arrow {
--h:150px; /* height */
--w:20px; /* width */
--b:7px; /* width of the dash*/
--g:8px; /* gap between dashes*/
width: var(--w);
margin:10px;
height: var(--h);
display:inline-flex;
}
.arrow:before,
.arrow:after{
content:"";
width:50%;
background:
linear-gradient(to bottom left,
transparent calc(50% - 1px),
white 0 calc(50% + 1px),
transparent 0)
bottom/100% calc(var(--w)/2),
repeating-linear-gradient(white 0 var(--b), transparent 0 calc(var(--b) + var(--g)))
right/1px 100%;
background-repeat:no-repeat;
background-clip:content-box;
box-sizing:border-box;
animation:hide infinite 2s linear;
}
.arrow:after {
transform:scaleX(-1);
}
#keyframes hide {
50% {
padding:var(--h) 0 0;
}
50.1% {
padding:0 0 var(--h);
}
}
body {
background: red;
}
<div class="arrow"></div>
<div class="arrow" style="transform:scaleY(-1);--h:100px;--g:3px;"></div>
<div class="arrow" style="--h:120px;--b:3px;--w:30px"></div>
<div class="arrow" style="transform:scaleY(-1);--h:150px;--b:5px;--g:10px;--w:40px"></div>
toke a different approach to the arrow animation.
you can use SVG instead of text.
POC:
body {
margin: 0;
}
.arrow-container {
padding: 0 50px;
animation: scrolling 2s infinite linear;
overflow: hidden;
height: 150px;
}
.arrow {
animation: scrolling-a 2s infinite linear;
}
.arrow-point {
font-size: 50px;
display: block;
margin: 0 0 -50px -10px;
}
#keyframes scrolling {
0% {
margin-top: 150px;
height: 0;
}
50% {
margin-top: 0;
height: 150px;
}
100% {
margin-top: 0;
height: 0;
}
}
#keyframes scrolling-a {
0% {
margin-top: -150px;
}
50%,
100% {
margin-top: 0;
}
}
<div class="arrow-container">
<div class="arrow">
<span class="arrow-point">^</span><br> |
<br> |
<br> |
<br> |
<br> |
<br> |
<br> |
</div>
</div>
I am trying to create this button in html with a little animation as below.
How can I make the below polygon shape in css, and how to move it to a regular rectangle in animation on hover?
This is what I am trying to make it look like:
And here is how it should look like on hover:
Thanks for any help
A bit messy, but it is what I get so far:
body {
background-color: #FFB504;
}
.cta {
color: white;
border: none;
width: 240px;
height: 80px;
display: inline-flex;
justify-content: center;
align-items: center;
font-size: 22px;
font-family: sans-serif;
cursor: pointer;
position:relative;
background-color: transparent;
outline: none;
}
.cta-content {
padding-right: 20px;
transition: all .3s ease;
z-index:1;
}
.cta:before {
clip-path: polygon(10px 10px, 230px 10px, 190px 70px, 10px 70px);
transition: all .3s ease;
will-change: clip-path;
background-color: #0081B1;
}
.cta-border, .cta-border:before, .cta-border:after, .cta:before {
content: "";
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%;
box-sizing: border-box;
transition: all .3s ease;
}
.cta-border{
overflow: hidden;
}
.cta-border:before {
clip-path: polygon(0px 0px, 220px 0px, 170px 80px, 0px 80px);
border: 2px solid white;
}
.cta-border:after {
transform-origin: center center;
transform: translate(-28px, -69px) rotate(32deg);
border-right: 2px solid white;
height: 94.34px;
}
.cta:hover .cta-content {
padding-right: 0;
}
.cta:hover:before, .cta:hover .cta-border:before {
clip-path: polygon( 0px 0px, 240px 0px, 240px 80px, 0px 80px);
}
.cta:hover .cta-border:after {
transform: translate(0,0) rotate(0);
}
<button class="cta">
<span class="cta-content">HIRE ME</span>
<span class="cta-border"></span>
</button>
How to overlay image on text which is like a pattern image.
like we do in css for applying color with hex value
color: #ffffff;
How it can be done?
I'm trying to get pattern over text
Thanks in advance.
I have please check the code..
h1 {
background: url(http://www.lovethispic.com/uploaded_images/114180-Pink-Glitter-Pattern-.jpg) no-repeat;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-size:80px
}
<h1>Welcome</h1>
trying this
answer1
=============================================
answer2
demo
html
<div id="container">
<h1>HAWAII</h1>
</div>
css
h1, p { margin: 0; }
#container {
padding: 20px 20px 100px;
margin: 50px;
position: relative;
}
#container h1 {
/* has same bg as #container */
background: url(http://media.royalcaribbean.com/content/shared_assets/images/destinations/regions/hero/hawaii_01.jpg);
font-size: 12em;
font-family: impact;
left: 0;
line-height: 100%;
padding-top: 25px; /* padding + border of div */
position: absolute; /* position at top left of #containter to sync bg */
text-align: center;
top: 0;
width: 100%;
text-fill-color: transparent; /* not yet supported */
background-clip: text; /* not yet supported */
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
-moz-text-fill-color: transparent; /* not yet supported */
-moz-background-clip: text; /* not yet supported */
/* text-shadow: 5px 5px 0px rgba(0,0,0,0.1); */
}
================
answer3
css
body {
font: normal 16px/1.5 Arial, sans-serif;
}
h1, p {
margin: 0;
padding: 0 0 .5em;
}
.container {
margin: 0 auto;
max-width: 480px;
}
/*
* Caption component
*/
.caption {
position: relative;
overflow: hidden;
/* Only the -webkit- prefix is required these days */
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.caption::before {
content: ' ';
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: transparent;
transition: background .35s ease-out;
}
.caption:hover::before {
background: rgba(0, 0, 0, .5);
}
.caption__media {
display: block;
min-width: 100%;
max-width: 100%;
height: auto;
}
.caption__overlay {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
padding: 10px;
color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay {
-webkit-transform: translateY(0);
transform: translateY(0);
}
.caption__overlay__title {
-webkit-transform: translateY( -webkit-calc(-100% - 10px) );
transform: translateY( calc(-100% - 10px) );
transition: -webkit-transform .35s ease-out;
transition: transform .35s ease-out;
}
.caption:hover .caption__overlay__title {
-webkit-transform: translateY(0);
transform: translateY(0);
}
demo
My scrolling div wont stretch the height of its parent container when resizing the browser or when toggling a button that adds an extra space on the top.
AUG 27 UPDATE
http://jsfiddle.net/ursp39s9/
The following jfiddle contains a code by ctwheels that has been modified to fit my needs, and as a result I've discovered the issue has to do with a show/hide button filter (Code provided below)
This button adds an extra space at the bottom when the button is pressed, and then dissapears when it's pressed again. However, this seems to be causing issues with the resizeable scrolling div container thats suppose to stretch to 100% height and width to fill the entire parent container. Instead I get a whitespace at the bottom all the time.
So please take a look at my jsfiddle, and see if you can help me fix this issue. Thanks!
Here's the problematic HTML:
<div id="feed-content">
<div id="networkfeed" class="feedpagetab activefeed">
<input type="checkbox" id="filterbutton" role="button">
<label for="filterbutton" onclick=""><span class="filterswitch">Show Me</span><span class="filterswitch">Hide Me</span> </label>
<br /><br />
<div class="borderline"></div>
<section class="filtercontent">
</section><!--Filtercontent ends here-->
And the CSS:
/*----- Show me Button-----*/
.filtercontent {
margin: 0;border-bottom:#000 solid 1px;
padding: 0; height:170px; margin-top:5px;
-webkit-box-sizing: border-box; font-family:"Trebuchet MS", Arial, Helvetica, sans-serif; font-size:14px; color:#000;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.feedpagetab > section:first-of-type {
float: right;
width: 62.5%;
}
.feedpagetab > section:last-of-type {
display: none;
visibility: hidden;
}
.feedpagetab {
-webkit-transition: .125s linear;
-moz-transition: .125s linear;
-ms-transition: .125s linear;
-o-transition: .125s linear;
transition: .125s linear;
}
#filterbutton[type=checkbox] {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
width: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
}
[for="filterbutton"] {
position: absolute;
top:4px;
padding: 0;
left: 5%;
width: 80px;
text-align: center;
padding: 4px; font-weight:bold;
color: #555;
text-shadow: 1px 1px 1px #DDD;
font-family: Helvetica, Arial, "Sans Serif";
font-size: 13px;
border: 1px solid #CCC;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 0px 1px 0px #FFF;
-moz-box-shadow: inset 0px 0px 1px 0px #FFF;
box-shadow: inset 0px 0px 1px 0px #FFF;
background: #EEE;
background: -moz-linear-gradient(top, #F9F9F9 0%, #DDD 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#DDD));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#DDD 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#DDD',GradientType=0 );
background: linear-gradient(top, #F9F9F9 0%,#DDD 100%);
}
[for="filterbutton"]:hover {
color: #444444;font-weight:bold;
border-color: #BBB;
background: #CCC;
background: -moz-linear-gradient(top, #F9F9F9 0%, #CCC 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#F9F9F9), color-stop(100%,#CCC));
background: -webkit-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -o-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
background: -ms-linear-gradient(top, #F9F9F9 0%,#CCC 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#F9F9F9', endColorstr='#CCC',GradientType=0 );
}
[for="filterbutton"] span.filterswitch:last-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked {color:#FFA317;}
#filterbutton[type=checkbox]:checked ~ .filtercontent {
display: block;
visibility: visible;
width: 100%;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:first-of-type {
display: none;
visibility: hidden;
}
#filterbutton[type=checkbox]:checked ~ [for="filterbutton"] span.filterswitch:last-of-type { color:#3CC;
display: block;
visibility: visible;
}
.borderline { width:100%; border-bottom:#000 solid 1px; height:0px;}
.filtercontent { margin-left:29%; }