css3

Multiple columns, column-span workaround

hey there... i'm working with safari and i need to have a multiple columns text (in a single <p> through webkit-column-count), but also i need to make an image span upon two or more columns (i know it's not supported yet, but i'm asking for some workaround if possible) meaning: i want this layout --------------------------- image ---...

Jquery css Compass-like correction

jQuery has opacity correction when you use css method (lines 4592-4608 on jQuery 1.4.2): // IE uses filters for opacity if ( !jQuery.support.opacity && name === "opacity" ) { if ( set ) { // IE has trouble with opacity if it does not have layout // Force it by setting the zoom level st...

CSS 3 PIE: Not working inside an absolutely positioned (popup) element? Shifts on mouseover?

I am using the CSS 3 PIE include so that I can have rounded borders on my popup in IE. However, in IE, the popup is not rounded on the pageload, but when I mouse over it, it shifts to the top-left corner of the container, which is positioned absolutely, and THERE it has rounded borders. Here is the HTML: <div class="popupWrapper" i...

Make the background fixed (stationary)

Is there anyway to make the sky/lake background stay still while you scroll? Site: http://bit.ly/agJiEy ...

CSS: 50% Transparent (Opacity) with a solid border

Is it possible with just CSS to have a white background color and then have 50% transparncy with: .transparent_class { filter:alpha(opacity=50); -moz-opacity:0.5; -khtml-opacity: 0.5; opacity: 0.5; } and still have a solid white border? ...

Pure CSS Rounded Corners in IE6-8 (JQuery Accepted)

There are a lot of JQuery plugins to give rounded corners to browsers that dont support CSS3. They either don't work or have an ugly effect where you see it unstyled, and then the JS kicks in and finally makes them rounded. I am looking for a solution that renders rounded corners before visibility, looking for a seamless, or near seamle...

How to make div expand all the way to the right.

The demo page: CLICK HERE I have made a picture to show: As clearly seen in the picture, there is a gap from the div left_bg and the div middle_bg. The left_bg has no content, and its width should be fluid and fit inside it's div container top-container. Just to help demonstrate the gap I have it set left_bg to width:500px. However, ...

CSS3 Javascript Library

Hi! Does a Javascript library exist that enables the usage of CSS3 properties such as rounded corners in unsupporting browsers? Thanks, DLiKS ...

CSS3: Transparent Rounded Corner Problem.

Site is located here: CLICK TO VIEW THE WEBSITE Here is an image of the problem: As you can see, using CSS3 border-radius, and background: transparent I was able to make what looks like a "cutout" from the div. The problem should be obvious that the corners are transparent as well. I know I could just use an image and problem would b...

Any way to get border-radius to validate?

including the 'border-radius: num1 / num2;' property gives a '/ is an incorrect operator' error. any way to get this to validate? ...

NY Times Multiple Columns

hey guys... have you seen NY Times Editor's choice (on iPad) ?? .... so if you have .... i'm trying to make the same design (multiple columns in full article) .... how? through css3 , -webkit-columns-count , -webkit-columns-width and so forth.... but the problem is when i try to make an image span across 2 or more columns (this feature i...

CSS3 background-clip

I'm using -webkit-background-clip to restrict a background image to the text in an h2 element. My question is, does -moz-background-clip function the same way? This only seems to work in webkit browsers, which suggests it doesn't work yet in Firefox: #header h1 a{ background: url(img/logo-overlay.png) no-repeat #000; -moz-backg...

How to implement a Radial/Pie Menu in CSS3?

I would like to implement a radial menu using CSS3 transforms animations similar to the third demo in this page. There is an implementation in jQuery using canvas Radmenu but it doesn't move as fluidly as the flash one. First question would be: is this feasible? if possible using only 2D transforms and animations so it works in more pla...

What does *|* this mean in css

I just saw this: *|*:link with firebug, it's some default styling which firefox appends, but what does *|* mean? ...

css validation besides jigsaw

any other css validation sites out there besides jigsaw? It's saying content:none; is incorrect but according to the specs it should be fine.. ...

Can someone please explain CSS media queries?

I read the article about them over at css3.info, but I didn't feel like it explained it well enough. I also could not get their examples to change with my screen size. I attempted in Safari, FF, Chrome. Is this a feature that is not ready for implimentation yet? If I want to adjust some styles when the browser window is less than 1024p...

css3 animation/transition/transform: How to make image grow?

I want to make my image grow to 1500px in height (and hopefully the width would just automatically re-size itself, if not, I could easily set it too) I was using jquery .animate() but its just too choppy for my liking... I know I can use the : -webkit-transform: scale(2); But I want it to be set to a specific size.. not just double o...

iphone/ipad website development/testing on Windows........

Can i successfully do iphone/ipad web development (not native apps) on Windows and without having iphone/ipad device? Work Like PSD to iphone optimized XHTML, CSS layout. Interested to learn and make iphone/ipad optimized websites? Any tips? How much it will be different from desktop? What different other than small screen? ...

Is it possible to set different duration/delay for transform options?

I want to set several transform options for my html object but with different duration and delay. If i try to use something like that: -webkit-transition: -webkit-transform, opacity; -webkit-transform: rotate(180deg) scale(2); -webkit-transition-duration: 2000ms, 6000ms; -webkit-transition-delay: 0ms, 6000ms; Then i will have diffe...

Show content in title when text-overflow

CSS3 introduces text-overflow so you can hide overflowing text and even add ellipses. If the text is overflowing and hidden, I would like to show it as a tooltip when hovered. The easiest way to do this is to add the text to the title attribute of the element. However that will make the text show whether it is overflowing or not. I o...