I am facing a problem with edges in a css list (<ul>,<li>). The problem that when I set the left edge with a color and a different thickness, the lower edge of overlapping ends as shown in the screenshot below:
In the picture there to see the right, so here I leave the fiddle to anyone who can give me help in this situation.
http://jsfiddle.net/Igaojsfiddle/T6KrE/31/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4);
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-bottom:1px solid #999999;
**border-left:10px solid green;**
border-right:1px solid #999999;
height:55px;
}
it is normal, borders reaches each other to the corners.
you may draw your line with box-shadow:
http://jsfiddle.net/T6KrE/32/
#contactList > li {
font-weight: bold;
color: #fff;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -2px 3px -2px gray;;
background-image: -webkit-linear-gradient(#ededed, #eff0f2);
background-image: -moz-linear-gradient(#ededed, #eff0f2);
background-image: -ms-linear-gradient(#ededed, #eff0f2);
background-image: linear-gradient(#ededed, #eff0f2);
border-left:10px solid green;
border-right:1px solid #999999;
height:55px;
}
Related
how do i add a background image to a gradient background in css. here my code
input.button-add {
font-family: Arial, Helvetica, sans-serif;
font-size: 13px;
color: #ffffff;
padding: 4px 4px;
background: -moz-linear-gradient(
top,
#ff2819 0%,
#ff0d0d);
background: -webkit-gradient(
linear, left top, left bottom,
from(#ff2819),
to(#ff0d0d));
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
border: 1px solid #ffffff;
-moz-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
-webkit-box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
box-shadow:
0px 1px 1px rgba(000,000,000,0.5),
inset 0px 0px 2px rgba(255,255,255,0.7);
is it possible and if its possible how?
Why not? Just add as many background-images as you want (gradients are also images) by separating them with commas. Also, specify background-position and background-repeat for all of them.
Here is your code with one image background and one gradient background:
input.button-add {
color: #ffffff;
padding: 4px 4px;
border: 1px solid #ffffff; border-radius: 5px;
display: inline-block;
width: 120px; height: 64px;
box-shadow: 0px 1px 1px rgba(000, 000, 000, 0.5), inset 0px 0px 2px rgba(255, 255, 255, 0.7);
background-image:
url('http://lorempixel.com/16/16'),
-webkit-gradient(linear, left top, left bottom, from(#ff2819), to(#fff));
background-position: 4px center, center center;
background-repeat: no-repeat, no-repeat;
}
<input id="btn" type="button" value="Click Here" class="button-add" />
I have been trying to apply glow with CSS box-shadow property (tried inset) on hover. So far, I have been able to do this with inset - http://jsfiddle.net/bgGS6 (hover over list item to see the effect).
Test code:
HTML:
<ul>
<li>
home
</li>
</ul>
CSS:
ul {
list-style:none;
}
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
I'm trying to achieve something like this:
I'm wondering if it will be possible to increase glow toward the center and fade it out towards the edges. I assume ultimate solution will be to add a png on hover, but want to find out if this can be achieved with CSS alone.
Update: Added radial gradient to top and it is pretty close to what I need - http://jsfiddle.net/bgGS6/5 Will add rules for cross-browser compatibility as well.
It flickers because of transition, not sure how to fix that. Any suggestions?
You can simply chain your shadows, thus:
box-shadow: inset 0 3px 3px 0px #fff,inset 0 9px 10px 0px #00abe3;
Demo Fiddle
What this does is add an initial inset box shadow with the same colour as the background (in this case just white) to make it look like the element is faded at the edges, before applying your highlighing box shadow- with larger pixel distances defined.
just as a note, you should structure your html like this:
<ul>
<li>
<a>Home</a>
</li>
</ul>
The following is css to create a blue effect, and you can probably customize it to your liking but you can get the basic gist of it:
ul li a{
background-color: #759ae9;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #759ae9), color-stop(50%, #376fe0), color-stop(50%, #1a5ad9), color-stop(100%, #2463de));
background-image: -webkit-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -moz-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -ms-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: -o-linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
background-image: linear-gradient(top, #759ae9 0%, #376fe0 50%, #1a5ad9 50%, #2463de 100%);
border-top: 1px solid #1f58cc;
border-right: 1px solid #1b4db3;
border-bottom: 1px solid #174299;
border-left: 1px solid #1b4db3;
border-radius: 4px;
-webkit-box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
box-shadow: inset 0 0 2px 0 rgba(57, 140, 255, 0.8);
color: #fff;
font: bold 12px/1 "helvetica neue", helvetica, arial, sans-serif;
padding: 7px 0;
text-shadow: 0 -1px 1px #1a5ad9;
width: 150px;
}
As a further note, please check out some tutorials on CSS3. There are plenty out there that could help you get a more broad idea of the tools you have to play with to achieve what you need. A good place to start would be Codeacademy.com They have a pretty good tutorial on CSS3
You could add a :before pseudo-element which has a box-shadow;
li {
width:50px;
height:25px;
background:black;
color:white;
font-size:1.25em;
padding:10px;
position: relative;
}
li:hover {
box-shadow: inset 0 9px 10px 0px #00abe3;
}
li:hover:before {
position: absolute;
width: 10px;
height: 2px;
background: rgba(255, 255, 255, 0.4);
content:' ';
left: 30px;
top: 1px;
box-shadow: 0 3px 7px 5px rgba(255, 255, 255, 0.4);
}
See this fiddle
Can you help me to find css of "Submit Listenig" button?
I want to change primary color.
http://demo.sabaiapps.com/sabaidirectory/businesses/add
.sabai-btn {
display: inline-block !important;
padding: 4px 12px;
margin-bottom: 0;
font-size: 14px;
line-height: 20px;
text-align: center;
vertical-align: middle;
cursor: pointer;
color: #333333;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75);
background-color: #f5f5f5;
background-image: -moz-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), to(#e6e6e6));
background-image: -webkit-linear-gradient(top, #ffffff, #e6e6e6);
background-image: -o-linear-gradient(top, #ffffff, #e6e6e6);
background-image: linear-gradient(to bottom, #ffffff, #e6e6e6);
background-repeat: repeat-x;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffffff', endColorstr='#ffe6e6e6', GradientType=0);
border-color: #e6e6e6 #e6e6e6 #bfbfbf;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
border: 1px solid #bbbbbb;
border-bottom-color: #a2a2a2;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
-moz-box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
box-shadow: inset 0 1px 0 rgba(255,255,255,.2), 0 1px 2px rgba(0,0,0,.05);
}
.menu-toggle, input[type="submit"], input[type="button"], input[type="reset"], article.post-password-required input[type=submit], li.bypostauthor cite span
style.css - Line 238
The button uses CSS gradients for background color.
http://css-tricks.com/css3-gradients/
input[type="submit"].sabai-btn { background-image: linear-gradient(to bottom,#c8d6ff,#c8d6ff); }
This code changes only submit button. But hover effect changes. It hover only on half button.
I'm using PIE for shadows, radius borders and gradients but none of these are working in IE8.
Here is an example of the code I'm using for radius and shadow.
.conflict-suggestion-body-left{
border-right:2px solid #FDFDFD;
border-bottom:2px solid #FDFDFD;
border-top:1px solid #B8B8B8;
float: left;
width: 49%;
margin-left:1px;
-moz-box-shadow: 1px 1px 2px #000;
-webkit-box-shadow: 1px 1px 2px #000;
box-shadow: 1px 1px 2px #000;
border-radius:0 0 2px 2px;
behavior: url(PIE.htc);
}
Here is an example of the code I'm using for the gradient.
.yui3-widget-hd {
background: #C9D2DD;
filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#D8D8DA', endColorstr='#B6CAD5');
background: -webkit-gradient(linear, left top, left bottom, from(#D8D8DA), to(#B6CAD5));
background: -moz-linear-gradient(0% 100% 90deg, #B6CAD5 35%, #D8D8DA 83%, white 100%) repeat scroll 0 0 transparent;
border: 1px solid #F3FAFE;
border-radius: 0.435em 0.435em 0 0;
behavior: url(PIE.htc);
height: 33px;
margin: 0;
width: 97%;
cursor: default;
}
Thanks in advance for your assistance.
You should specify the behavior url as absolute path:
http://css3pie.com/documentation/known-issues/#relative-paths
Maybe this solves your problem.
I think its your url problem.. try this one
behavior: url(//Yoursite.com/path/to/PIE.htc);
Is there a way to style HTML5's range control? Is it possible to change the color of the line the slider slides on?
Turns out, there is in webkit:
input[type="range"]{
-webkit-appearance:none !important;
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
}
You can then add whatever attributes you need to each those selectors. Background, gradient, etc...
Hope that helps!
A full example of css for customization (at this moment for webkit):
input[type="range"]{
background: rgb(94, 30, 30);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]:hover{
background: rgb(194, 139, 131);
width: 130px;
height: 6px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
-webkit-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
-moz-box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
box-shadow: inset 0px 0px 1px 1px rgba(0, 0, 0, 0.9), 0px 1px 1px 0px rgba(255, 255, 255, 0.13);
}
input[type="range"]::-webkit-slider-thumb{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
border:1px solid black;
background: #a90329;
background: -moz-linear-gradient(left, #a90329 0%, #8f0222 50%, #6d0019 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#a90329), color-stop(50%,#8f0222), color-stop(100%,#6d0019));
background: -webkit-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -o-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: -ms-linear-gradient(left, #a90329 0%,#8f0222 50%,#6d0019 100%);
background: linear-gradient(to right, #a90329 0%,#8f0222 50%,#6d0019 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a90329', endColorstr='#6d0019',GradientType=1 );
}
input[type="range"]::-webkit-slider-thumb:hover{
-webkit-appearance:none !important;
width:25px;
height:15px;
-webkit-appearance: none;
border-radius: 8px;
-moz-border-radius: 8px;
-webkit-border-radius: 8px;
background-color:rgb(56, 13, 13);
border:1px solid black;
background: -moz-linear-gradient(left, #1d2e38 0%, #2b4254 50%, #2b4254 100%);
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1d2e38), color-stop(50%,#2b4254), color-stop(100%,#2b4254));
background: -webkit-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -o-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: -ms-linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
background: linear-gradient(left, #1d2e38 0%,#2b4254 50%,#2b4254 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1d2e38', endColorstr='#2b4254',GradientType=1 );
}
On the top answer its already described. I just customize it on my way.
Take a look its may help you.
Add below code on CSS:
input:focus{
outline-color: transparent;
}
input[type="range"]{
-webkit-appearance:none;
-moz-apperance:none;
height: 6px;
background-color: #b6b6b6;
outline-color: transparent;
}
input::-webkit-slider-thumb{
-webkit-appearance:none;
-moz-apperance:none;
width:16px;
height:16px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
-ms-border-radius:10px;
-o-border-radius:10px;
border-radius:10px;
background-color: #20b373;
overflow: visible;
}
Live Demo