Related
I have a progress bar that show from left to right. I need to make another which is same style progress but will show from right to left.
Here is my style definition:
progress, progress[role] {
-webkit-appearance: none;
appearance: none;
border: none;
background-size: auto;
height: 50px;
width: 100%;
padding-top: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: grey;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image:
-webkit-linear-gradient(-45deg,
transparent 33%, rgba(0, 0, 0, .1) 33%,
rgba(0,0, 0, .1) 66%, transparent 66%),
-webkit-linear-gradient(top,
rgba(255, 255, 255, .25),
rgba(0, 0, 0, .25)),
-webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
.valuebar {
position: relative;
}
.valuebar h3 {
color: #fff;
left: 1em;
line-height: 1;
position: absolute;
}
I used sample from the web which uses ::-webkit-progress-value.
How can I make it render from right to left?
Generally, many elements flip their horizontal rendering when their direction attribute is changed from ltr (which is the default) to rtl, which stands for right-to-left (to be compatible with right-to-left languages, such as Arabic or Hebrew).
The <progress> element is not different. Just give CSS something to cling to (such as a special class) and set its direction: rtl;.
Here is a small snippet based on the code you posted.
/* this is the important bit */
progress.rtl {
direction: rtl;
}
progress,
progress[role] {
-webkit-appearance: none;
appearance: none;
border: none;
background-size: auto;
height: 50px;
width: 100%;
padding-top: 10px;
}
progress[value]::-webkit-progress-bar {
background-color: grey;
border-radius: 2px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}
progress[value]::-webkit-progress-value {
background-image: -webkit-linear-gradient(-45deg, transparent 33%, rgba(0, 0, 0, .1) 33%, rgba(0, 0, 0, .1) 66%, transparent 66%), -webkit-linear-gradient(top, rgba(255, 255, 255, .25), rgba(0, 0, 0, .25)), -webkit-linear-gradient(left, #09c, #f44);
border-radius: 2px;
background-size: 35px 20px, 100% 100%, 100% 100%;
}
.valuebar {
position: relative;
}
.valuebar h3 {
color: #fff;
left: 1em;
line-height: 1;
position: absolute;
}
<progress value="59" max="100">59%</progress>
<br />
<progress class="rtl" value="59" max="100">59%</progress>
I don't know what is your markup, as you did not post it, but you may need to adjust the .valuebar positioning.
Here is a code pen you can toy with.
Pretty sure this is possible with CSS3, but I can't figure out how. Given this design pattern
create the horizontal hash marks in CSS3 that expands or contracts to fill a responsive container (as background?).
Chris Coyier proffered this Vertical Stripe CodePen, but how can it be revised to re-create the pattern above?
HTML
<div class="module">
<h2 class="stripe-6">Vertical</h2>
<p>You could do some schenigans where you have a big rotated element within
this header area (with hidden overflow) that has these stripes. That way
you could get away with not using repeating-linear-gradient.</p>
</div>
CSS
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
> h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
> p {
padding: 0 1rem;
}
}
.stripe-6 {
color: black;
background: repeating-linear-gradient(
to right,
#f6ba52,
#f6ba52 10px,
#ffd180 10px,
#ffd180 20px
);
}
Here's a larger, higher-contrast image to see the pattern better (thanks #Martin!)
Yes, it is definitely possible to create this pattern using linear-gradient background images. Unlike the pattern generated by Chris Coyier, this would require two linear gradients as there are two stripes of different heights and gaps.
.bg-pattern{
height: 50px;
width: 100%;
background-color: rgb(115,199,192);
background-image: linear-gradient(to right, rgba(0,0,0,0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0,0,0,0.25) 12px, rgba(0,0,0,0.25) 14px, transparent 14px, transparent 20px, rgba(0,0,0,0.25) 20px, rgba(0,0,0,0.25) 22px, transparent 22px, transparent 28px, rgba(0,0,0,0.25) 28px, rgba(0,0,0,0.25) 30px, transparent 30px, transparent 36px, rgba(0,0,0,0.25) 36px, rgba(0,0,0,0.25) 38px, transparent 38px);
background-repeat: repeat-x;
background-size: 44px 30px, 44px 20px;
background-position: 8px 0px;
border-top: 2px solid rgba(0,0,0,0.25);
}
<div class='bg-pattern'></div>
Below snippet has the same pattern added into your code:
.module {
background: white;
border: 1px solid #ccc;
margin: 3%;
}
.module > h2 {
padding: 1rem;
margin: 0 0 0.5rem 0;
}
}
.module > p {
padding: 0 1rem;
}
.stripe-6 {
color: black;
height: 50px;
background-color: rgb(115, 199, 192);
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.25) 6px, transparent 6px), linear-gradient(to right, transparent 12px, rgba(0, 0, 0, 0.25) 12px, rgba(0, 0, 0, 0.25) 14px, transparent 14px, transparent 20px, rgba(0, 0, 0, 0.25) 20px, rgba(0, 0, 0, 0.25) 22px, transparent 22px, transparent 28px, rgba(0, 0, 0, 0.25) 28px, rgba(0, 0, 0, 0.25) 30px, transparent 30px, transparent 36px, rgba(0, 0, 0, 0.25) 36px, rgba(0, 0, 0, 0.25) 38px, transparent 38px);
background-repeat: repeat-x;
background-size: 44px 30px, 44px 20px;
background-position: 8px 0px;
border-top: 2px solid rgba(0, 0, 0, 0.25);
}
<div class="module">
<h2 class="stripe-6">Vertical</h2>
<p>You could do some schenigans where you have a big rotated element within this header area (with hidden overflow) that has these stripes. That way you could get away with not using repeating-linear-gradient.</p>
</div>
I have a responsive theme installed, I have used FireBug from fire fox to change the colors of certain parts of my website, and everything works perfectly on Firefox. BUT the second I look on Google chrome, Internet Explorer, and my Phone it ALL looks horribly off. Mostly it's the header widget tags as they are supposed to NOT be red.
This I think is whats not taking affect (it's the backgrounds not taking affect)? :
#secondary .widget_fearless_tabs .headings a {
background: linear-gradient(to bottom, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0)) repeat scroll 0 0 #333333 !important;
border-left: 1px solid rgba(255, 255, 255, 0.15) !important;
border-right: 1px solid rgba(0, 0, 0, 0.5) !important;
color: #CCCCCC !important;
display: block !important;
font-size: 1.3rem !important;
margin: 0;
outline: 0 none;
padding: 0.9em 0;
text-align: center;
}
button:hover, .flexslider .category-label, .layout-module .widget-title > span, .pagination a:hover, .pagination .current, #primary-navigation .menu li.current-menu-item, #primary-navigation .menu li.current-menu-ancestor, #primary-navigation .menu li.current_page_item, #primary-navigation .menu > li:hover, #primary-navigation .menu > li.sfHover, #primary-navigation .menu ul a:hover, #primary-navigation .menu ul li.current-menu-item a, .review-box .heading, #searchform #searchsubmit:hover, #secondary .widget_fearless_tabs .headings a.active, section.top-reviews .review-column-1 h2, .sidebar-primary .widget-title, .wpcf7-submit:hover {
background: -moz-linear-gradient(center top, #FEFEFE, #F4F4F4) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
border: 1px solid #E0E0E0 !important;
border-radius: 1px !important;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
color: #182945 !important;
}
/* This changes colors of hover secondary widget headings like review widget */
#secondary .widget_fearless_tabs .headings a:hover {
background: -moz-linear-gradient(center top, #FFFFFF, #F6F6F6) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
border: 1px solid #E0E0E0 !important;
border-radius: 1px !important;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
color: #40516D !important;
}
I don’t understand why this is not working? I have also looked at the original style sheet of my theme and can't find any thing to point me in the right direction to add to my child theme?
-moz surprisingly works just in mozilla. If you include the gradient for every other browser it will work in every other browser.
I always use http://www.colorzilla.com/gradient-editor/ to create the code so I don't forget something.
Add liner gradient for all other browsers too
#secondary .widget_fearless_tabs .headings a:hover {
background: -moz-linear-gradient(center top , #FFFFFF, #F6F6F6) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
//for all other browsers
background: -o-linear-gradient(center top , #FFFFFF, #F6F6F6) repeat scroll 0 0 padding-box rgba(0, 0, 0, 0) !important;
border: 1px solid #E0E0E0 !important;
border-radius: 1px !important;
box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.9) inset !important;
color: #40516D !important;
}
I'm pretty new to Asp.net so sorry if this is elementary. I'm trying to get a button control to look a certain way.
I'm using a CSS file I used before that would style my tags a certain way.
If I'm using an asp.net button control, how can I apply this style to the button control?
I tried setting CSSClass='button' but that doesn't work. I put the tags around my asp.net button control, but that just makes the asp.net be inside of my stylized button.
Any ideas what I need to do?
Thanks for any help.
/******************** Button ********************/
button,
.big-button {
display: inline-block;
border: 1px solid;
border-color: #50a3c8 #297cb4 #083f6f;
background: #0c5fa5 url(../images/old-browsers-bg/button-element-bg.png) repeat-x left top;
-webkit-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-o-background-size: 100% 100%;
background-size: 100% 100%;
background: -moz-linear-gradient(
top,
white,
#72c6e4 4%,
#0c5fa5
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#0c5fa5),
color-stop(0.03, #72c6e4)
);
-moz-border-radius: 0.333em;
-webkit-border-radius: 0.333em;
-webkit-background-clip: padding-box;
border-radius: 0.333em;
color: white;
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
font-size: 1.167em;
padding: 0.286em 1em 0.357em;
line-height: 1.429em;
cursor: pointer;
font-weight: bold;
}
/* IE class */
.ie button {
overflow: visible;
}
/* IE class */
.ie7 button {
padding-top: 0.357em;
padding-bottom: 0.214em;
line-height: 1.143em;
}
button img,
.big-button img {
margin-bottom: -3px;
}
button:hover,
.big-button:hover {
border-color: #1eafdc #1193d5 #035592;
background: #057fdb url(../images/old-browsers-bg/button-element-hover-bg.png) repeat-x left top;
background: -moz-linear-gradient(
top,
white,
#2bcef3 4%,
#057fdb
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#057fdb),
color-stop(0.03, #2bcef3)
);
}
button:active,
.big-button:active {
border-color: #5b848b #b2def1 #b2def1 #68a6ba;
background: #3dbfed url(../images/old-browsers-bg/button-element-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#89e7f9,
#3dbfed
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#89e7f9),
to(#3dbfed)
);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
}
button.red,
.red button,
.big-button.red,
.red .big-button {
color: white;
border-color: #bf3636 #5d0000 #0a0000;
background: #790000 url(../images/old-browsers-bg/button-element-red-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#ca3535 4%,
#790000
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#790000),
color-stop(0.03, #ca3535)
);
}
button.red:hover,
.red button:hover,
.big-button.red:hover,
.red .big-button:hover {
border-color: #c24949 #9d3d3d #590909;
background: #9d0404 url(../images/old-browsers-bg/button-element-red-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#fe6565 4%,
#9d0404
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9d0404),
color-stop(0.03, #fe6565)
);
}
button.red:active,
.red button:active,
.big-button.red:active,
.red .big-button:active {
border-color: #7c5656 #f7cbcb #f7cbcb #a15151;
background: #ff5252 url(../images/old-browsers-bg/button-element-red-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#ff9d9d,
#ff5252
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#ff9d9d),
to(#ff5252)
);
}
button:disabled,
button:disabled:hover,
.big-button.disabled,
.big-button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f0f2f2,
#c8c8c8
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f0f2f2),
to(#c8c8c8)
);
-moz-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-webkit-text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.75);
-moz-box-shadow: none;
-webkit-box-shadow: none;
box-shadow: none;
cursor: auto;
}
/* IE class */
button.disabled,
button.disabled:hover {
color: #bfbfbf;
border-color: #e9f2f6 #c4c3c3 #a2a2a2 #e3e2e2;
background: #c8c8c8 url(../images/old-browsers-bg/button-element-disabled-bg.png) repeat-x top;
cursor: auto;
}
button.grey,
.big-button.grey {
color: white;
border-color: #a1a7ae #909498 #6b7076;
background: #9fa7b0 url(../images/old-browsers-bg/button-element-grey-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#c5cbce 5%,
#9fa7b0
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#9fa7b0),
color-stop(0.05, #c5cbce)
);
-moz-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-webkit-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
}
button.grey:hover,
.big-button.grey:hover {
border-color: #a1a7b0 #939798 #6e7275;
background: #b1b5ba url(../images/old-browsers-bg/button-element-grey-hover-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
white,
#d6dadc 4%,
#b1b5ba
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(white),
to(#b1b5ba),
color-stop(0.03, #d6dadc)
);
}
button.grey:active
.big-button.grey:active {
border-color: #666666 #ffffff #ffffff #979898;
background: #dddddd url(../images/old-browsers-bg/button-element-grey-active-bg.png) repeat-x top;
background: -moz-linear-gradient(
top,
#f1f1f1,
#dddddd
);
background: -webkit-gradient(
linear,
left top, left bottom,
from(#f1f1f1),
to(#dddddd)
);
}
button.small,
.big-button.small {
font-size: 0.833em;
padding: 0.2em 0.3em 0.3em 0.2em;
vertical-align: 0.2em;
}
/* IE class */
.ie button.small {
padding: 0.5em 0.3em;
vertical-align: 0.1em;
}
.ie7 button + button {
margin-left: 0.25em;
}
Button:
<asp:Button ID="LoginButton" runat="server" CommandName="Login"
Text="Log In" type="button"
ValidationGroup="mainLogin" onclick="LoginButton_Click" CSSClass='button'/>
After investigating your CSS the lines below have the issue and the reason for css not working for you asp:button in CssClass
button,
.big-button {
You must use css this way
.button,
.big-button {
so the issue is that you missed period operator . before
the button,
The class selector uses the HTML class attribute, and is defined with a "." http://www.w3schools.com/css/css_id_class.asp
I am trying to make this button using CSS3:
But my button looks like this right now:
The CSS3 Gradient effect somehow removes the blue color, why does it do that and how can I fix it.
Here is a jsFiddle example: http://jsfiddle.net/fjYWZ/
HTML code:
<a class="button large facebook radius nice" href="#">Logga in med facebook</a>
CSS code:
.button{
-moz-transition-duration: 0.1s;
-moz-transition-property: opacity;
-moz-transition-timing-function: ease-in;
background-color: #999999;
border: 1px solid #999999;
color: #FFFFFF;
cursor: pointer;
display: inline-block;
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
font-size: 1.3rem;
font-weight: bold;
line-height: 34px;
margin: 0;
outline: medium none;
padding: 0 34px;
position: relative;
text-align: center;
text-decoration: none;
}
.large {
font-size: 18px;
line-height: 48px;
padding: 0 40px;
width: auto;
}
.facebook {
background-color: #3B5998;
border-color: #3B5998;
color: #FFFFFF;
}
.button.radius {
border-radius: 7px 7px 7px 7px;
}
.full-width {
padding-left: 0 !important;
padding-right: 0 !important;
text-align: center;
width: 100%;
}
.nice {
background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset;
text-shadow: 0 -1px 1px rgba(0, 0, 0, 0.3);
}
Just add this property in your .button class
.button{
/*Your existing styling*/
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
}
Try this updated fiddle
EDIT I have updated the code to support multiple colors here you can find two buttons with different colors. I have added two classes as .red & .blue. Please refer new fiddle
.blue{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.4)), to(rgba(255, 255, 255, 0)));
background: -moz-linear-gradient(center top , rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}
.red{
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 0, 0, 0.4)), to(rgba(255, 0, 0, 0)));
background: -moz-linear-gradient(center top , rgba(255, 0, 0, 0.4) 0%, rgba(255, 0, 0, 0)) repeat scroll 0 0%, none repeat scroll 0 0 #999999;
}
Note: remove these properties from the body class. Also add as much color classes you want and add this class as second param in your style tag as
<a class="button blue large facebook radius nice" href="#">Logga in med facebook</a>
here class="button blue large facebook radius nice" use second class as new color class.
Your -moz-linear-gradient resets the background to #999999... change that to #3B5998 and it works beautifully.
Keep in mind that the -moz prefixes mean this will only work in Firefox.