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/
Related
Here is my attempt
.string{
background: #b38f72; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIxMDAlIiB5Mj0iMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2IzOGY3MiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjIwJSIgc3RvcC1jb2xvcj0iI2QwYjI3ZSIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjQwJSIgc3RvcC1jb2xvcj0iI2QzYjg4OCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjYwJSIgc3RvcC1jb2xvcj0iIzhlNjU0NyIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjgwJSIgc3RvcC1jb2xvcj0iIzQwMjExNiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMzZjI4MjQiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-repeating-linear-gradient(-45deg, #b38f72 0%, #d0b27e 0.5%, #d3b888 1%, #8e6547 1.5%, #402116 2%, #3f2824 2.5%); /* FF3.6+ */
background: -webkit-repeating-gradient(linear, left top, right top, color-stop(0%,#b38f72), color-stop(20%,#d0b27e), color-stop(40%,#d3b888), color-stop(60%,#8e6547), color-stop(80%,#402116), color-stop(100%,#3f2824)); /* Chrome,Safari4+ */
background: -webkit-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Chrome10+,Safari5.1+ */
background: -o-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* Opera 11.10+ */
background: -ms-repeating-linear-gradient(left, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* IE10+ */
background: repeating-linear-gradient(to right, #b38f72 0%,#d0b27e 20%,#d3b888 40%,#8e6547 60%,#402116 80%,#3f2824 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b38f72', endColorstr='#3f2824',GradientType=1 ); /* IE6-8 */
height:6px;
width:100%;
margin-top:20px
}
http://jsfiddle.net/HmPkJ/
This is the kind of effect that I'm after.
https://forrst-live.s3.amazonaws.com/posts/snaps/94811/mega.jpg?1310500628
Any help would be appreciated...
You just need 2 gradients, one repeating in horizontal, and another one with semitransparent parts in vertical
.test {
position: absolute;
height: 40px;
width: 100%;
background-image:
linear-gradient(0deg, black 0%, rgba(100, 100, 100, 0.2) 10% , white 50% , rgba(100, 100, 100, 0.2) 90% , gray 100% ),
repeating-linear-gradient(to right, black 0px, white 15px)
;
}
fiddle
Why not just use an 5x5 image and just repeat the pattern ?
Use
background-image: url('data:image/gif;base64,R0lGODdhAgAIAOMQAB0aFSUfDyooKTUxJkA6Gk9EJFlPLFRRSGtnZnNpUHRvXIF3bY+Ifp6Xh7Gunby4rywAAAAAAgAIAAAEDHAERV5xpiW20BFABAA7');
height: 8px;
Demo
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 */
}
PROBLEM
I am trying to combine the CSS3 gradient feature along with a background-image sized specifically and placed specifically in the div. Strange thing is that the background-size property not only applies the size to the image, but also the gradient. However I need to keep the image 30px and apply the graident all the way. Any help would be welcomed?
Thanks in advance
CSS
.accordian-head {
height: 50px;
padding: 10px 10px;
background: #ADADAD;
background-image: url(../img/plus-icon.png) 97% 50%;
background-position:97% 50%;
background-repeat:no-repeat; /* fallback */
background-size:30px;
background-image: url(../img/plus-icon.png), -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD)); /* Saf4+, Chrome */
background-image: url(../img/plus-icon.png), -webkit-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Chrome 10+, Saf5.1+ */
background-image: url(../img/plus-icon.png), -moz-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* FF3.6+ */
background-image: url(../img/plus-icon.png), -ms-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* IE10 */
background-image: url(../img/plus-icon.png), -o-linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* Opera 11.10+ */
background-image: url(../img/plus-icon.png), linear-gradient(top, #F4F4F4 0%, #ADADAD 100%); /* W3C */
}
You have two layers, one for the image and one for the gradient. When you specify one background-size value, it applies to both layers.
To stretch the gradient you need to explicitly give it its own size:
background-size:30px, 100%;
What you could do is use nested divs, and apply the gradient on top.
<div class="gradient">
<div class="image" style="background-image:url(../img/plus-icon.png)">
</div>
</div>
.gradient {
background: -webkit-gradient(linear, left top, left bottom, from(#F4F4F4), to(#ADADAD));
/* etc */
}
.image {
background-size: 30%;
}
In my page I have few sections. I want to show linear-gradient in currently active section.
<div class='main_wrapper'>
<div class='header'>
Product
</div>
<div class='helper'>
Abc dda
</div>
<textarea>asdadadad</textarea>
<div class='active-section'></div>
</div>
Now, if I have
.active-section,
.active-section2{
border-top: 1px solid #d8d8d8;
margin-left: 0px;
width:100%;
position: absolute;
top: 2px;
left: 0;
height: 107px;
background: rgb(216,216,216); /* Old browsers */
background: -moz-linear-gradient(top, rgba(216,216,216,1) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,1)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(216,216,216,1) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
}
Then this will be actually over the text, that is not needed.
Following too is not expected. This is having transparency, but this will make the text look faded.
.active-section2{
background: -moz-linear-gradient(top, rgba(216,216,216,0.51) 0%, rgba(255,255,255,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(216,216,216,0.51)), color-stop(100%,rgba(255,255,255,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(216,216,216,0.51) 0%,rgba(255,255,255,1) 100%); /* Chrome10+,Safari5.1+ */
}
Check this fiddle: http://jsbin.com/ayimuk/2
I just want to have linear gradient in active section, height of the gradient will be 100px ( lets says ). I tried using z-index that too didn't worked.
You used z-index but forgot that you can't use this property without an element also having a position value other than the default - static. Adding relative positioning will bring the text above the gradient.
http://jsbin.com/itowes/1/edit
Full page CSS3 Gradient Backgrounds:
Alright so I am trying to make my background be a gradient that is always 100% width and height, and it works, except for the fact that nothing will show up on top of it. Here is the code I currently have.
CSS:
<style type="text/css" media="screen">
#bodyBg{
background:rgb(79,143,249) no-repeat center center fixed; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%, rgba(79,143,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(164,197,252,1)), color-stop(100%,rgba(79,143,249,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4c5fc', endColorstr='#4f8ff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index:0;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
#bodyBg {
left: 50%;
margin-left: -512px; /* 50% */
}
#body-404 {
position: relative;
margin: 50px auto;
width:880px;
text-align:center;
color:white;
font-family: "Helvetica Neue", "URW Palladio L", Arial, Helvetica, "Palatino Linotype";
z-index:99;
}
</style>
HTML:
<div id="body-404">
<img src="img/logo.png" width="100%">
<h1><span>Sorry the page you were looking for was not found</span></h1>
<p>If you believe you got to this page in error, please contact us via this page.</p><br />
<font size="120%"><a href="index.php">Return to Homepage</font>
</div>
<div id="bodyBg"></div>
DEMO:
http://mysteriousorigin.com/missing.html
It's generally considered poor practice to have empty elements like your #bodyBg. Just put the background gradient on the html (or body) element and get rid of the useless div:
http://jsfiddle.net/2yVRA/1/
html {
background:rgb(79,143,249) no-repeat center center fixed; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%, rgba(79,143,249,1) 100%); /* FF3.6+ */
background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(1%,rgba(164,197,252,1)), color-stop(100%,rgba(79,143,249,1))); /* Chrome,Safari4+ */
background: -webkit-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* Opera 12+ */
background: -ms-radial-gradient(center, ellipse cover, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* IE10+ */
background: radial-gradient(ellipse at center, rgba(164,197,252,1) 1%,rgba(79,143,249,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#a4c5fc', endColorstr='#4f8ff9',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
min-height: 100%;
}
#media screen and (max-width: 1024px) { /* Specific to this particular image */
body-404 {
position: relative;
margin: 50px auto;
width:880px;
text-align:center;
color:white;
font-family: "Helvetica Neue", "URW Palladio L", Arial, Helvetica, "Palatino Linotype";
z-index:99;
}
Use the background-image CSS property instead of using the image tag. I've made a quick jsfiddle to show what I mean. I know it's not exactly what you're going for but you should be able to change it for your use pretty quickly. If not, let me know.