|
CSS - Scalable Transparent Gradient Backgrounds
how is that possible cross browser without javascript (i dont know if these filters in IE is javascript but they are good)
i know its possible...only i dont know how.. must be someone here who know i thought thanx a lot in advance Similar TutorialsHi: If there is a post related to my question kindly redirect me there -- will be much appreciated. Question: Can a form be made transparent rather than using a solid color or, can you create a transparent background using CSS? If so, how is it done? Links, if any, please! Thank you. I have a titlebar for an article for my site and i'm trying to achieve rounded corners with transparency. The problem is that my transparent images (toprightcorner and blobs) are showing the background of the div i've used to tile the background image across the bar (it's variable width). How can I prevent this? i know there is background-position but i need a fixed size that the background won't tile across at either end while the width is variable. Is the only solution to make 3 divs and use 2 as columns to hold the corner images and have the background tile across it or is there an easier way? Here is the relevant code Thanks --James Code: <div class="articlebox"> <div class="articletitle"><img class="left" src="blobs.jpg" border="0" /></div> </div> css Code: Original - css Code div.articlebox{ width:100%; /*attach it to the top of the box so we can layer the corner on top of it*/ background:rgb(249,249,249) url('topbg2.png') repeat-x fixed; padding:0px; margin:0px; } div.articletitle{ text-align:left; width:100%; height:21px; background:url('toprightcorner2.png') no-repeat right top; border-bottom:1px solid #888; padding:0px; margin:0px; } div.articletitle img{ float:left; } * html div.articletitle img{ margin-left:-3px; }
Hey guys, quick question. I have a liquid layout. I have a few images that I would like to scale along with the layout but I can't do it. I have tried percentages and no luck. I'm creating a box that should be able to be scaled by either setting the size of the element containing the box, or the box itself. Here is the HTML: html4strict Code: Original - html4strict Code <div id="container1"> <div id="panelBox1" class="panelbox"> <div class="header">My Panel Box</div> <div class="content"> <div>Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box. Content for the panel box Content for the panel box. Content for the panel box. Content for the panel box</div> </div> </div>
The CSS: css Code: Original - css Code div.panelbox { background: transparent url("Styles/Default/Images/panel_box_head_left.gif") no-repeat left top; padding: 0px; margin: 0px; } div.panelbox div.header { background: transparent url("Styles/Default/Images/panel_box_head_right.gif") no-repeat right top; line-height: 24px; margin-left: 3px; font-size: 0.8em; font-weight: bold; padding: 0px; } div.panelbox div.content { border: solid 1px #b3b3b3; margin: 0px; padding: 2px; height: 100%; } div.panelbox div.content div { width: 100%; height: 100%; overflow: auto; } #panelBox1 { height: 100%; }
The content element should take up the remaining space left by the the header. How can I ensure that the height of the content is 100% of the box minus the height of the header? http://www.senti.ca/~kgf/programs/pickleball/ So here's the question... how do I make this picture, not transparent? Right now it's at 75% transparency on top of that background which makes it look very faded. Any ideas? I have tried: Code: filter:alpha(opacity=100); opacity: 1; -moz-opacity:1; And placing it inside of a div... sadly this doesn't work. hi, i have a container div, set at 50% opacity. i want my content to apear in here, but be 100% opacity. i thought this would work, but it doesn't... any help? #transContainer { background-color: #FFF; margin-left: auto; margin-right: auto; width: 982px; padding: 7px; height: 100%; padding-top: 0; filter:alpha(opacity=50); -moz-opacity:0.5; opacity: 0.5; } #mainContainer { background-color: #ccc; padding-top: 10px; margin-left: auto; margin-right: auto; width: 968px; height: 94%; filter:alpha(opacity=100); -moz-opacity:1.0; opacity: 1.0; } hey all, i have just been looking at this site http://www.dynasig.net/index.php after seeing a link on devshed to it and i really like the menu...thing is i can't seem to get the gradient like they have it... any ideas?? thanks in advanced to anyone who can reply RF Hi. I would like to create a gradient similar to the microsoft website. http://www.microsoft.com/downloads Look how the gradients at the top and bottom of the page work. Im sure this is not simply repeating an image. Does anyone know how this works? or can point me in the direction of a tutorial on how to achieve this? I looked at the microsoft site in Opera and NS, and the dynamic grad only seems to work in IE. So im guessing that you can also set a bkgnd image? for the other browsers? many thanks. Hi all, I am trying to do the following: I want to have a page essentially divided into 3 sections: left side|middle|right side. On the left and right sides of the page, I would like to have a gradient that is a dark shade of gray starting from the edge of the screen and getting lighter as it reaches the middle section of the page. I have seen some tutorials on the web describing how this is accomplished, but I have not had much luck. I have been told that an easy way to do this would be to treat the page as a large table, with the centre cell being another table. I am pretty sure that this is poor design, but I am unsure about how to do this the proper way. As for the gradient portion, the tutorials indicate that I should make an image that is a few pixels in height and x number of pixels in width, and just do something similar to this: Code: .grad{
background:url("gradient.jpg") top left repeat-y;
}
where "gradient.jpg" is the image I created. I could then apply the "grad" class to any element I wish, but I can not get this to work. Any ideas would be helpful. Hello, I created a 1px x 1000px image for my background that is a gradient. In my css I have the following code: background-image: url(images/background.jpg); background-repeat: repeat-x; Now, on longer pages (that obviously exceed 1000px) the graphic stops. Is there a way to get around this using CSS code, or should I just make the graphic longer? Thanks! My css has the following code: Code: table.main {
margin: 0px;
padding: 0px;
background-color: darkcyan;
}
body {
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 14px;
margin: 0px;
padding: 0px;
/* fallback (Opera) */
background: #9933CC;
/* Mozilla: */
background: -moz-linear-gradient(top, #9933CC, #E8E8E8);
/* Chrome, Safari:*/
background: -webkit-gradient(linear, left top, left bottom, from(#9933CC), to(#E8E8E8));
/* MSIE */
filter: progid:DXImageTransform.Microsoft.Gradient(StartColorStr='#9933CC', EndColorStr='#E8E8E8', GradientType=0);
}
The main table is colored correctly and the gradient background works...but it stops at the bottom of the main table and restarts until the bottom of the page (my monitor is a nice bigger one so it's taller vertically than the web page). how do i make the gradient last the entire page? thanks in advance!!! -gavman Hey everyone. Can anyone tell me why the blue container backgrounds on my development site... http://cmsbase.stealthwd.ca are having a gradient in ie? I'm talking about the news, twitter, main copy etc containers. It's supposed to just repeat the image, but its making the image a gradient from left to right. Other browsers are fine. Please and thanks! My apologies if this is a total newb question, however I am quite a newb with CSS (but trying to learn). What I am trying to do is change a color (say red) from position 0,0 to black at position 100,100. I am sure this is possible as I have seen a couple of close examples but nothing that matches what I am trying to do (and I must admit with my limited understanding of CSS I can't figure it out). ANy help will be greatly appreciated. Thanks. TJ Hi all, I have searched all over and can't seem to find an answer. I am looking for a template or tutorial on how to build a center content area with a drop shadow on top of a gradient background. An exact example would be: www.fatwallet.com points2shop.com Thanks for any guidance! I'm using CSS to create a gradient, and all is well except for the bottom of the page: http://www.area51entertainment.co/gradient_problem.png For some reason it's placing a red bar at the bottom of the gradient. Any ideas why? http://www.area51entertainment.co/index.php EDIT: Fixed using the following: Code: background-repeat: no-repeat; background-attachment: fixed; Hi, What would be the best way to create a hover effect as seen on the "Get Started" button he http://themeforest.net/item/mingle-multipurpose-wordpress-theme/full_screen_preview/235056 Thanks! Given an element of a fixed width but varying heights, is there a way to give that element a gradient background that would scale to the height? I would be really impressed if someone could show me a way. Thanks. Hi all, I think I came across it a while ago, but I can not find it now. There was this trick on how to make a CSS gradient background, it was something like background-color: #123456 50%; or something like it. That thing is supposed to fill up a table cell or an entire page with gradient background, if anybody knows what I am saying, assist me, please. I wish I could describe it better than that, but I don't think I can! Thank you, Chris |
|||||||