opacity over gradient background - css

I want to use opacity only for this gradient, not for text color. Here is code :
.large-thumb {
position: absolute;
bottom: 15px;
z-index: 99;
padding: 5px 5px 20px;
color: #fff;
background: #323232; /* Old browsers */
background: -moz-linear-gradient(top, #323232 0%, #858585 50%, #E7E7E7 100%) ; /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#323232), color-stop(50%,#858585), color-stop(100%,#E7E7E7)) ; /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* Opera 11.10+ */
background: -ms-linear-gradient(top, #323232 0%,#858585 50%,#E7E7E7 100%) ; /* IE10+ */
background: linear-gradient(to bottom, #323232 0%,#858585 50%,#E7E7E7 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#323232', endColorstr='#E7E7E7',GradientType=0 ); /* IE6-9 */
width: 291px;
background:transperent;
margin-left: 20px;
margin-left: 20px;
padding-bottom: 20px;
bottom: 31px;
-moz-border-radius:25px;
-webkit-border-radius:25px;
border-radius:25px;
}
For demo follow link demo blog

basically yout text color is what it is becouse at .large-thumb span.xpose_metayou set it at #00000 insteed of #000000(6 numbers) or #000 (3 numbers).
There's no opacity around on your project.
And, if possible, next time try to extract the part of the code that it's wrong (html and css) and give it to us in your question, even better if on a jsfiddle (nice info if you don't know jsfiddle here)
Don't expect people solving your problems like: "here is my web, this is not working, fix it for me... ah, don't even expect a single please or even ty in my question"
(and yes, I'm so stupid that still I try to help)

Related

Setting the background image to html button?

I have below code to set the background image to button.
CSS:
input.hButton{
background-image: url('images/hbutton.png');
height: 21px;
width: 110px;
text-align: center;
color: #696969;
font-family: Arial,Helvetica,sans-serif;
font-size: 11px;
display:block;
}
HTML:
<input type="button" class="hButton" id="customize" value="Customize Table"></input>
Output:
Here when the button text is too long, button is split. How can I get it fixed?
Add
background-size: 100% 100%;
or find your perfect setting here:
http://www.css3.info/preview/background-size/
Btw in your case should be better:
use a gradient
use border-radius for the upper corners
use a thin border
replace your css code background-image property with this one :
background-image: url('images/hbutton.png') top repeat-y;
Hi please use the pure css code.. and remove your older method..
Fiddle:http:http://jsfiddle.net/nikhilvkd/RZ4vV/1/
What's Here?
1-Gradient
2-Border radius
3.border top,right and left
.hButton{
border:solid 1px #0e4f85;
border-bottom:none;
-moz-border-radius:5px 5px 0 0;
-webkit-border-radius:5px 5px 0 0;
border-radius:5px 5px 0 0;
padding:3px;
color:#696969;
background: #f7f5f5; /* Old browsers */
background: -moz-linear-gradient(top, #f7f5f5 0%, #e0dede 50%, #e0dede 99%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f7f5f5), color-stop(50%,#e0dede), color-stop(99%,#e0dede)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* IE10+ */
background: linear-gradient(to bottom, #f7f5f5 0%,#e0dede 50%,#e0dede 99%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f7f5f5', endColorstr='#e0dede',GradientType=0 ); /* IE6-9 */
}

Style Facebook share button link

I'm wondering if it's possible to style the share button link. Here's the link I would like to access (nested in Facebook's iframe).
<a class="pluginShareButtonLink" href="/sharer.php?
app_id=XXXXXXXXXXXXXXX&sdk=joey&u=http%3A%2F%2FXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX&
display=popup" target="_blank" id="u_0_1"><div class="blueButton blue"><div
class="pluginButton"><div><div class="pluginButtonContainer"><div
class="pluginButtonImage"><button type="submit"><i class="pluginButtonIcon img sp_25oo7a
sx_e52148"></i></button></div><span class="pluginButtonLabel">Share</span></div></div>
</div></div></a>
I've tried to change the style of the class pluginShareButtonLink as follows:
.pluginShareButtonLink:hover{
text-decoration: none;
}
And it's not working. I've also tried to change the style with jQuery but this didn't work either. Can it be done somehow?
Thanks
**You can style the button with this css and you can change the background color to any color you want.**
solution 1 (without gradient background color)
.pluginButtonContainer button{
padding: 10px;
width: 70px;
height: 35px;
background: rgb(255, 70, 70);
border: 0px!important;
border-radius: 2px;
}
solution 2 (with gradient background color)
.pluginButtonContainer button{
padding: 10px;
width: 70px;
height: 35px;
background: #ff3a3a; /* Old browsers */
background: -moz-linear-gradient(top, #ff3a3a 0%, #ff3a3a 49%, #ff402b 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ff3a3a), color-stop(49%,#ff3a3a), color-stop(100%,#ff402b)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ff3a3a 0%,#ff3a3a 49%,#ff402b 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ff3a3a 0%,#ff3a3a 49%,#ff402b 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ff3a3a 0%,#ff3a3a 49%,#ff402b 100%); /* IE10+ */
background: linear-gradient(to bottom, #ff3a3a 0%,#ff3a3a 49%,#ff402b 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ff3a3a', endColorstr='#ff402b',GradientType=0 ); /* IE6-9 */
border: 0px!important;
border-radius: 2px;
}

CSS background Image plus gradient in 4 corners

What I want to achieve is something like this
What I tried so far is the CSS3 multiple background, it worked when I used one corner
See it here: CSS code
But it didn't work when I added more 'backgrounds'
See example here: jsfiddle
code is too long to post it here, view it on jsfiddle
Is there any suggestion to improve this, or is there a better way to doit?
Thank you
Update: Answer
Here is the background (gradient) I used. Link
And here is how I used the code:
HTML
<section class="window">
<div class="win1con">
</div>
</section>
CSS
.window {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
}
.win1con {
width: 100%;
height: 100%;
position: absolute;
overflow: hidden;
top: 0%;
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iNTUlIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAiLz4KICAgIDxzdG9wIG9mZnNldD0iNTglIiBzdG9wLWNvbG9yPSIjMDAwMDAwIiBzdG9wLW9wYWNpdHk9IjAuMDUiLz4KICAgIDxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjgiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%, rgba(0,0,0,0.05) 58%, rgba(0,0,0,0.8) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(55%,rgba(0,0,0,0)), color-stop(58%,rgba(0,0,0,0.05)), color-stop(100%,rgba(0,0,0,0.8))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(0,0,0,0) 55%,rgba(0,0,0,0.05) 58%,rgba(0,0,0,0.8) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#cc000000',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
top: 0%;
background: url('../images/vntg.jpg');
}
You can use box-shadow:
background:url('http://i.imgur.com/7TX9BQU.jpg?1?9512');
box-shadow: inset 0px 0px 200px 10px #000;
The key to make this work is the 'inset' value. Tt makes the shadow appear on the inside of the element.
Fiddle: http://jsfiddle.net/KhLsQ/5/
info about box-shadow: http://www.css3.info/preview/box-shadow/

how is this border effect achieved best with CSS?

I saw an amazing border effect on a website, and I'm wondering how the effect is achieved best. It's a seperator between navigation items in a vertical list:
I will choose the best answer based on the cross-browser compatibilty (and as non-hacky as possible).
Here you go
You may have to mess with it depending on what you want to put inside you list! If you want to change the color of the glow, you can just alter the colors in the gradient. This is a nice generator, which you probably already knew about.
HTML:
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
CSS:
ul {
list-style: none;
width: 200px;
}
li {
background: rgb(30,30,30);
text-align: center;
height: 40px;
color: rgb(140,140,140);
border-bottom: 1px solid black;
}
li:after {
content: '';
display: block;
position: relative;
top: 41px;
height: 1px;
background: #1e1e1e; /* Old browsers */
background: -moz-linear-gradient(left, #1e1e1e 0%, #757575 50%, #1e1e1e 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, right top, color-stop(0%,#1e1e1e), color-stop(50%,#757575), color-stop(100%,#1e1e1e)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(left, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* IE10+ */
background: linear-gradient(to right, #1e1e1e 0%,#757575 50%,#1e1e1e 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e1e1e', endColorstr='#1e1e1e',GradientType=1 ); /* IE6-9 */
}

IE9 css issue, forced to use float:left / float:right

I'm having a bit of an issue with IE9 and just can't figure it out, I'm creating a button in CSS with a linear gradient, it displays perfectly in Chorme, Firefox and Safari but just not in IE9
http://ubizzo.co.uk/img/ie9.png
http://ubizzo.co.uk/img/ch-fi-sa.png
First image link is IE9, second image link is every other browser, the only way I can get it work is if I add float:left or float:right in the css as below but then that obviously screws up the layout, I've tried to use float:none but that doesn't work either, I've tried this in a blank html file just to rule out any conflicting css but still doesn't work :-s
.purchase {
margin-top: 5px;
display: block;
width: auto;
}
.purchase a {
margin-top: 10px;
margin-bottom: 10px;
padding: 5px 10px;
cursor: pointer;
border: none;
color: #fff;
line-height: 1em;
width: auto;
**float: left;**
border-image: initial;
text-align: center;
border: solid 1px #189199;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
border-radius: 4px;
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
background: -webkit-gradient(linear, left top, left bottom, from(#19d7e3), to(#12A4B3));
background: -moz-linear-gradient(top, #19d7e3, #12A4B3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#19d7e3', endColorstr='#12A4B3');
}
.purchase a:hover {
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
background: -webkit-gradient(linear, left top, left bottom, from(#12A4B3), to(#19d7e3));
background: -moz-linear-gradient(top, #12A4B3, #19d7e3);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#12A4B3', endColorstr='#19d7e3');
color: #ffffff;
}
Thanks for any help,
Adam.
http://jsfiddle.net/gdmP8/ - notice that the button only displays once you've addded float:left/right
apply this css thi will work in all browser i have check in chrome, Firefox, safari, opera, ie-7, ie-8, ie-9
background: #12a4b3; /* Old browsers */
background: -moz-linear-gradient(top, #12a4b3 0%, #19d7e3 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#12a4b3), color-stop(100%,#19d7e3)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* IE10+ */
background: linear-gradient(top, #12a4b3 0%,#19d7e3 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#12a4b3', endColorstr='#19d7e3',GradientType=0 ); /* IE6-9 */
You'll have this same problem in Opera, why don't you just stick to a simple button image rollover for IE?
Float problems in IE 9 are usually due to a bad header. Check with this one :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
Taken from IE9 Float with Overflow:Hidden and Table Width 100% Not Displaying Properly
(not sure if duplicate)
And you probably should use the now standard linear-gradient (or at least -ms-linear-gradient and -o-linear-gradient instead of just using moz and webkit specific gradients).

Resources