Can some1 point me in thr right direction or give me a few pointers it would really help.
thank you.
0
Gradiant Slicing Coding
Started by FK69, Feb 24 2006 12:48 AM
8 replies to this topic
#1
-
- Members
-
- 57 posts
Young Padawan
- Location:Melbourne, Australia
Posted 24 February 2006 - 12:48 AM
I created a template that has gradiant bg content boxes and im unsure how to slice and code these without losing color and whatnot.
Can some1 point me in thr right direction or give me a few pointers it would really help.
thank you.
Can some1 point me in thr right direction or give me a few pointers it would really help.
thank you.
#2
-
- Members
-
- 540 posts
Code Enforcer
- Location:Battle Creek, Michigan
- Interests:Web Development and Graphic Design
Posted 24 February 2006 - 12:55 AM
well I believe you could pull it off if your content boxes will be fixed (that is they wont change in height, but they'll scroll)
You could pull it off by slicing a 2px wide, (whatever)px high of the gradient.
Then for the code it would look something like:
CSS:
#contentbox{
width: 350px;
height: 250px;
background-image:url(../images/content_bg.png) !important; /*change url to location of the gradient pic*/
background-repeat: repeat-x; /*repeats the background horizontally only*/
}
HTML:
<div id="contentbox">
your content here
</div>
Theres also a way to pull a gradient off just using code but thats only supported by IE. and wouldnt be viewable in other browsers.
Anyways thats my thought on it, hope it helps out a bit.
You could pull it off by slicing a 2px wide, (whatever)px high of the gradient.
Then for the code it would look something like:
CSS:
#contentbox{
width: 350px;
height: 250px;
background-image:url(../images/content_bg.png) !important; /*change url to location of the gradient pic*/
background-repeat: repeat-x; /*repeats the background horizontally only*/
}
HTML:
<div id="contentbox">
your content here
</div>
Theres also a way to pull a gradient off just using code but thats only supported by IE. and wouldnt be viewable in other browsers.
Anyways thats my thought on it, hope it helps out a bit.
#3
-
- Members
-
- 57 posts
Young Padawan
- Location:Melbourne, Australia
Posted 24 February 2006 - 12:59 AM
Is there a way the above CSS code could just be plain HTML.
i only wanna use CSS for Font Format control atm.
i only wanna use CSS for Font Format control atm.
#4
-
- Members
-
- 540 posts
Code Enforcer
- Location:Battle Creek, Michigan
- Interests:Web Development and Graphic Design
Posted 24 February 2006 - 01:05 AM
well you could put that css in the div's style attribute:
like
<div style="background:url(gradient.png) repeat-x;">
Content here
</div>
like
<div style="background:url(gradient.png) repeat-x;">
Content here
</div>
#5
-
- Members
-
- 57 posts
Young Padawan
- Location:Melbourne, Australia
Posted 24 February 2006 - 01:11 AM
yer i know how to use the CSS what i mean is..
That CSS code in your first post is there a way just to have in HTML like
.body {
color: #583958;
bgcolor: #849684;
}
would be
<body color="#583958">
WEBSITE
</body>
in HTML? so i'd lose the CSS altogether
Sorry if my last post was a bit non-unstandable
That CSS code in your first post is there a way just to have in HTML like
.body {
color: #583958;
bgcolor: #849684;
}
would be
<body color="#583958">
WEBSITE
</body>
in HTML? so i'd lose the CSS altogether
Sorry if my last post was a bit non-unstandable
Edited by FK69, 24 February 2006 - 01:12 AM.
#6
-
- Members
-
- 540 posts
Code Enforcer
- Location:Battle Creek, Michigan
- Interests:Web Development and Graphic Design
Posted 24 February 2006 - 01:50 AM
oh well I suppose you could do it as the background image of a table cell
<td background="gradient.png">
but thats only if you were going to do a table-based layout. Other than that I cant think of anyway else without css.
<td background="gradient.png">
but thats only if you were going to do a table-based layout. Other than that I cant think of anyway else without css.
#7
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 24 February 2006 - 11:26 PM
It doesn't work in HTML, because there's no equivalent of "repeat-x" in plain HTML.
#8
-
- Members
-
- 57 posts
Young Padawan
- Location:Melbourne, Australia
Posted 25 February 2006 - 05:38 AM
bugger and i cant use CSS cos i dont know how to make it work on most Browsers
Doesnt matter neways i changed the layouts so the main content bg was a gradiant.
Doesnt matter neways i changed the layouts so the main content bg was a gradiant.
Edited by FK69, 25 February 2006 - 05:39 AM.
#9
-
- Members
-
- 499 posts
Jedi In Training
- Location:New York City
- Interests:Fine art, web and graphic design, naval architecture, chess, and sports.
Posted 25 February 2006 - 11:07 AM
Well this code works in all browsers:
.gradientbox{
width: 350px;
height: 250px;
background: url(yourimage.gif) repeat-x;
}
I don't think you should be avoiding CSS just because there are a few minor cross-browser issues. Those are only issues with just several CSS properties; the rest of CSS is quite easy and works in all browsers.
1 user(s) are reading this topic
0 members, 1 guests, 0 anonymous users
