sorry about this post being all over the place but I’m in a rush.
I think the gradients should be capable of at least 3 colors (left,right,middle) and agree with an earlier comment on there being the ability of gradients to control tranparency.
Imagine combining 3 shades of blue gradient with 3 shades of gray alpha as the background color of a div with rounded corners. 60 pixels in height with 30pixel corner radius creating a rounded mac aqua pill button with no need for images 🙂
Multiple backgrounds are a must. I feel there should be at least: top, top-left, top-right, left, right, bottom, bottom-left, bottom-right. A friend also suggests right-top along with top-right etc, no explanation given? Or, how about near-infinite(128) multiple background images and just use background crop and position to say where they go.
I really feel that a lot of the custom filter: stuff from IE should be considered for inclusion. And ROTATED IMAGE PLACEMENT. I hated having to use flash for dynamic images just because they client wanted the image to ‘tweak’ a little to the left or right. Actually, any chance of being able to just arbitrarily rotate anything? Oh and IE’s filter for using the same image but flipping/mirroring it would be very useful and bandwidth saving since it’s the same image.
I don’t think this one has to do with the specs, more with the browser developers. How about state transitions. Like I have a drop down menu. at first it’s just a button, on mouse over a css drop down appears. The browser knows it has to draw from regular menu to drop down showing menu. Why can’t the browser just have a default fade in transition for all such changes on the page instaed of having to animate it with javascript.
I want animated, transparent png’s with rotate:-45deg; skew:33px top;
I’d like to be able to apply image map polygol like attributes to a div
and create a 5 pointed star with a background of 3 separate star fish pngs against another underwaterphoto for the background.
I just see no reason why we can’t expand on what css has given us so far
and someday achieve at least the level of possibilies that I have with
illustrator, quark, and even MSpublisher & Word (rotate a square object with text in it and a background gradient!)
All browsers should support safari’s drop shadow (it looks the most photoshoppish) (see Elsa Bartley above)
But back to gradients, I don’t really know anthing about svg, but like
Douglas Bowman said about overlapping roles with SVG, how about I just
save a svg file that contains nothing more than my instructions for a
9 color 4 alpha gradient and apply it as the url(background) of my
100% liquid width element and have it behave as expected.
I’d really like to be able to define at the top of my css some color swatches.
like:
swatch(~logo_blue){#6cabf3}
and now wherever in my css I use background:~logo_blue;
it will be that exact hex value instead of changing multiple occurances
of #6cabf3;
I’d like to be able to resize the width and height of background images
and rotate them as well.
CSS needs an official method for 100% height.
Designers have found making a containing element position:relative;
then having an absolutely positioned element within it with
top:5px; bottom:5px; gives the desired spanning of total height of the
container with 5px of space between edges (yes 0px works fine too! yes can also be used to achieve liquide width as well as height).
A previous post mentioned backwards compatibility.
Can we just define what level of Css our files should be parsed with.
That way, should the usage of background position change, it would
have no affect on older sites since those sites didn’t indicate
to parse the css as css3. It’s the whole doctype thing, that works.
I’d love to be able to clip an image with text.
div {background:url(day.jpg); color:url(night.jpg)}
Doug Falby’s #keyholeShape { clipping-mask:url(/masks/keyhole.eps ); stroke-clipping:true; stroke:1px solid #333; } and my idea of something
similar to an image map polygon for people without vector drawing apps!
Oh, and svg instead of eps please.
I like brad’s “border-depth: 2; or something for two borders.”
I often fake an effect like that in photoshop by having a 2 color
gradient with very little transition set to the stroke color.
OOOH Can we get gradient-shape burst!?
Imagine the earlier keyhole example with a large stroke and the color
of the stroke was actually a gradient that conformed to the contours
of the keyhole shape.
Btw, just ask and I can whip up some images of what this stuff would
look like if you don’t have access photoshop (yeah, right)l.
George Crecoukias said: Because I don’t think browsers, especialy IE, will implement all of this for years
Well, george, lets think about flash for a second. Macrmedia threw everything they could think of into flash as fast as they could and now flash has like 90% market saturation. I swear, if you woke up one day and flash was only available for konqueror, sales of VMware and downloads of knoppix would skyrocket.
If we can get the specifics of this css stuff hammered out and get it
implemented sensibly ASAP, the visual appeal of our work and the speed
and ease with which we do it would hopefully get people to upgrade
to the new IE(if it supports it) or switch to better browsers. I know
LOTS of people with no clue how to upgrade browsers but they ALWAYS MAKE
SURE they have the latest edition of the flash plug in.
We need to tout the term CSS, get the name out there, market this sucker like flash. Sure it does wonders for accessibility and other stuff, but at the end of the day for most people it’s all about being pretty. First it let us be as pretty as we wanted to be without all the headache and bandwidth of tables and spacer gifs. The next CSS should let us be prettier that we every thought possible. Let us do things we would normally decide against due to the sheer volume of images and extra per-page markup involved…even after css freed us from tables.
CSS… so pretty … we got Little Richard in the logo.
If they can design css so well, and browser makers can implement it so well, that we web designers just can’t deny the urge to happily use in every personal side project we decide to do, then sooner or later our corporate clients and their visitors are gonna begin to wonder why every business site they visit looks as lame as it did in 1999 and a whole lot of ‘other’ recent sites look…like they have potential but somethin’s not quite right with them and they all tell you that you can use the site just fine but it would look a lot prettier if you upgraded your browser….they just might upgrade.
And for the love of God we need to standardize the dimensions, margins, and padding of form elements. And then style the hell out of them if we feel like it.
I for one hate the fact that Safari Insists on not looking like other forms. But what I hate even more is when I decide to style my submit buttons to look like safari or ANYTHING else, it looks like poop in safari.
I want every f***ing pixel on every form element imaginable to be stylable. I want to be able to style my drop down select boxes and radio’s and check boxes to match the drop down menus in my site’s top navigation. The flash people can do it!
hm…what else now……
oh
J King said:
wouldn’t the best way to do gradient be simply to have them as a colour-value? We could have a gradient “function” as a colour-value which then can be applied to either ‘background-color’ or ‘color’.
That’s kinda like my swatch idea. I like.
and the ability to use a previously defined color swatch within a gradient.
I really like where I’m going with this swatch thing. Think about this.
The image sprite technique where you have multiple images saved as one and you just define the position on the image you want to use as the background.
if you’ve got 7 links in your navigation you still need to type in the
full url of that one image 7 times I believe.
why not:
link(~allnav){‘../images/topnav.gif’}
and then whenever you need to use that image in the css
background:url(~allnav) no-repeat;
yes i know it’s a heck of a lot like
var myvariable = ‘topnav.gif’
but come on, it’s not like we’re doing serious php level programming with css
exclipy said something about the outside pseudo element….
exclipy needs to say some more….i’m intrigued.
Could we use a gradient() as the color of a dropshadow?
I’m with Keith Roberts on the constants thing along with my swatches. HTML has baseurl right, why can’t css?
Keith Roberts ellipse suggestion NEED to be implemented like…from 5 years ago so I could have used it when I REALLY REALLY NEEDED it those times…but then again 6 years ago I didnt know about image maps.
I whole heartedly agree with Eduardo Figueiredo’s div { dimension: 35em 10em;} as well as
Alexandre Roerto Pereira’s sliced corners.
KEEP WORKING ON THE TEXT FLOWING CSS COLUMNS.
Mugur Padurean asked for a border fade into the background. With shape burst gradiends and the ability to use ‘transparent’ as a gradient color
there’s your answer.
The internal border issue. Isn’t there already an ‘outline’ border in firefox? That would be neither inside or outside and has no effect on the width of the element. Shoulnt it be easy to have an inner border just like it.
ok, damn i’m tired of reading and writing.