css3

CSS3 webkit fading in a tooltip.

HI, I've just been experimenting with a CSS tooltip that fades in with CSS3's transitions. I was going for a tooltip effect that when you hover a link, the tooltip appears, but fades in using only CSS3. I've got it working up to a point, but for some reason, when I hover over where it's meant to be, it activates, even though it's inital...

Why CSS Transitions -module does not support image-to-image transitions?

Hi, I've read the spec for CSS Transitions Module Level 3 and I'd like to know why it does not support image-based transitions. According to the draft, the background-image transitions are only supported when using with gradients. Both Webkit and Gecko seems to follow this practice. It's just that I see this as a major drawback. HTML ...

Why don't web fonts in Firefox work on a different domain?

I was experimenting with the fancy new OpenType font capability in Firefox 3.5 and I ran into a problem. I was trying to embed a font on a different domain than the page it would be used on, and it didn't work. I thought it may have been a bug, but from what I read on the MDC reference page, I noticed this note: In Gecko, web fonts a...

CSS3 - Validator - RGBA wrong?

I'm using the W3C CSS Validator with the Profile CSS3 but the validator says that my CSS rgba()'s are wrong. I looked up the Color Module Level 3, and the syntax is the same as mine. I also tried the Dev-Validator, same result. Example input: div.class { border: 1px solid rgba(0, 0, 0, 0.5); } Am I wrong or why does the validat...

Webkit CSS3 for Mozilla

What is the equivalent of -webkit-transition: opacity 0.6s linear; in -moz? I tried replacing -webkit with -moz but nothing happened. I even tried extending it to -moz-transition-property/duration but with no success. ...

Box-shadow not working on Webkit?

Hi I'm creating multiple borders to element using box-shadow, but they don't show at Webkit. What's wrong with this code? I'm using this four times to create shadow on each side, then border for extra border box-shadow: 1px 1px 0px rgba(0,0,0,0.1); Martti Laine ...

using CSS3 transform:rotate in IE origin problem

I'm working on a project that uses the new CSS3 transform:rotate(180deg) feature. Every modern browser has it's own tag, but does support it. Only IE (of course) doesn't. But with using filters the same thing can be achieved. The only problem with that is, is that IE uses another origin as CSS3 does. My guess is that with some math the o...

CSS - Inheriting layered background images

CSS3 supports multiple background images, for example: foo { background-image: url(/i/image1.jpg), url(/i/image2.jpg); } I'd like to be able to add a secondary image to an element with a class though. So for example, say you have a nav menu. And each item has a background image. When a nav item is selected you want to layer on anot...

How can I make my users automatically download the font I use for my website if they don't have it?

My website uses the font ff-clifford-eighteen-web-pro-1. I want all my text to be displayed using that font even for the users that don't have it installed on their machine. Is it possible? ...

CSS Transform Rotate Missing Scrollbar

When i rotate an iframe with css rotate, the scrollbar is not there. Is there any way to add the scrollbar? ...

CSS3 Gradients to reproduce an 'inner glow' effect from Illustrator with border-radius applied

Hello all! First post on here so please be kind :) I am in the process of trying to get my head properly around CSS3 Gradients (specifically radial ones) and in doing so I think I've set myself a relatively tough challenge. In Adobe Illustrator I have created a 'button' style which can be seen here: http://bit.ly/aePPtV (jpg image). ...

CSS3 Selectors To Find All But Last

How would I select all but the last child using css3 selectors? For example, to get only the last child would be div:nth-last-child(1) ...

How to use Vendor Properties in Multiple Backgrounds?

I want to use multiple backgrounds in css, which are currently supported by Firefox 3.61, Chrome/Safari, supposedly Opera10.5 (doesn't run on gnu/linux). It is working fine, however i would like to use linear-gradients as a background. it works ok for Firefox, doesn't work at all with Chrome, yet i can't figure out how to make it work fo...

css3 design tutorial/template etc

Hello, I search some tutorial/templates how made easy (lightwight) and nice css3 design, or made with some "css firmware" etc ...

How to apply CSS to HTML body element?

I am trying to get rid of this: document.body.className = "someclass"; I want to do this in CSS. body.someclass { . . . } unfortunately I am not able to get this working in Firefox, chrome. Am I doing anything wrong here? Is there any way we could apply a CSS class to body? ...

CSS3 Continous Rotate Animation (Just like a loading sundial)

Hi, I am trying to replicate an Apple style activity indicator (sundial loading icon) by using a PNG and CSS3 animation. I have the image rotating and doing it continuously, but there seems to be a delay after the animation has finished before it does the next rotation. @-webkit-keyframes rotate { from { -webkit-transform: rotate...

HTML5+CSS3 Framework like BluePrint/960gs?

I'm starting a side project and want to build it with HTML5+CSS3. Backward compatibility isn't a concern. I wonder if exist a framework similar to BluePrint/960gs. Mainly, I'm looking for the grid system & typography. The best (and only) I found that plays nice with the new HTML5 tags is Less Framework, it's a good start but I wonder if...

Curved corners in the IE's... CSS 3? Conditionals? Images? JS?

Curved corners in the IE's... I'm using a CSS 3 border-radus class called .curved on all my things I want with cool curved corners. The new CSS works in all the normal browsers, however IE is being a right dips**t. Whats the best practice for adding rounded corners nowadays. Shell I target anything with .curved in JS and do it all in jq...

HTML5 / CSS3 display:inline

I am looking to make a horizontally layed website but I am having issues with the display: inline rule. It seems to be tailored towards inline navigational unordered lists, completely overwriting the height and width set for the articles (and or the sections) in the CSS. Here is the html: <div id="container"> <section id="about" cl...

Optimize website for touch devices

On a touch device like iPhone/iPad/Android it can be difficult to hit a small button with your finger. There is no cross-browser way to detect touch devices with CSS media queries that I know of. So I check if the browser has support for javascript touch events. Until now, other browsers haven't supported them, but the latest Google Chro...