css3

Firefox: Generating icon on :hover:after state? (CSS)

Hello, slight problem. I have a 20 x 20px delete icon which I want to show overlaying a 112 x 112px image when it is hovered over. The image also has some descriptive text below, so using Safari I pulled it back up using relative positioning. The code I threw together goes something like this: <html> <head> <title>Gallery Test</title> <...

What CSS3 features does Internet Explorer 8 support?

I was trying to find a definitive article on the IE blog but found nothing. I'm building an internal website where the majority of users are using Safari 4 and Firefox 3. Some PC users are using IE8 so I'd like to know what I should watch out for when I'm using CSS3. ...

dynamically change color to lighter or darker by percentage CSS (javascript)

we have big application on the site and we have few links, which are lets say blue color like the blue links on this site. now i want to make some other links, but with lighter color, obviously i can just do simply by the hex code adding in the css file, but our site let user decide what colors they want for there customized profile/sit...

separate CSS for IE and firefox

What's the best way to have separate CSS for IE and other browsers? I'm thinking of just targeting IE, Firefox and Safari users. Especially now with CSS3 support in most browsers but IE. The various ways to do this that I've come across are loading separate stylesheets conditionally using <!--[if IE]> underscore hack and various other...

need a javascript or jquery library to convert xpath to selectable CSS3 format in jquery

how can i convert xpath like /html/body/div[3]/ul/li[1]/a[5] html > body > div[3] > ul > li[1] > a[5] i believe, index is not supported with CSS3 selectors....so how to deal with this ? ...

Blacking out content leaving one page div visable

Hiya, So i am looking to do something like what the apple inspector tool does, but with CSS for a project i am working on. So, the idea is on a certain page of the site, the site is shaded out (much like a lightbox or thickbox) but certain Divs, & other elements are still visible. This is similar to what Safari does when you inspect an...

Hidden Features/Properties/Attribute/Tags of CSS3 and HTML

In CSS and HTML world there are always features (Properties/Attribute/Tags) that would be useful in fringe scenarios, but for that very reason most people don't know them. I am asking for features that are not typically taught by the text books about CSS, CSS3 and HTML5. What are the ones that you know? [UPDATE] Which browsers adopt HT...

Javascript lights out (css manipulation), like in YouTube

How do I use javascript to black out all content except a single html element? This is Chrome-specific app so CSS3 can be used. ...

CSS transform matrices

I'm using the following CSS rules to do a transformation on a simple H2 element, only text inside it: -moz-transform: matrix(0, -1, 1, 0, 130px, 118px); -webkit-transform: matrix(0, -1, 1, 0, 130px, 118px); It works as expected in Firefox; i doesn't work at all in Safari/Windows and Chrome/Windows: the H2 stays where it is. Am I doing...

Passing mouse clicks through an overlaying element <div>

Is it possible to pass mouse clicks through an overlaying element: - <div style="z-index: 100; background: url('../images/rain.24.png'); width: 100%; height: 100%; top: 0; bottom: 0; left: 0; right: 0;">&nbsp;</div> ...pass mouse clicks beneath it to underlaying elements (e.g. a web page with images, links, etc)? Thinking of another ...

Horizontal menu with overflow-x:auto

Is it possible to have a horizontal menu that can scroll overflowed menuitems horizontally, but also display the vertical overflow when a submenu is to appear? ...

What browsers support Alpha channel in colors?

Since I'm always sticking to CSS 2, it was a (pleasant) surprise for me today to find out that CSS 3 supports alpha channels in colors. That allows for a nice range of effects. But - which browsers (and from what version) support this? Is it safe to use this today, or are we better off by still making a 1x1px png image and adding the IE6...

I'm overhauling my blog and … is HTML5 OK?

I'm overhauling my blog (http://gilesvangruisen.com/) and I'm going to be pushing new technologies as much as possible. I'm a web designer/developer and the browser percentage is as follows: 42% Firefox 39% Safari 7% Chrome 7% IE Is it OK to use the HTML5 doctype for my "rethunk" site? I thank you. -Giles :) ...

Display a round pourcent indicator with CSS only

Hi all ! I want to create a small round static pourcent indicator in CSS but I can't find the solution. The squared indicator at left is ok, but so ungly, I want it round ! I have tried with rounded corner (cf indicators at the right of the screenshot), and I wonder if there is possibility to add a rounded mask to hide the corners (c...

Is there a way to use a different image for each side of a CSS3 border-image?

On Firefox and Safari, I can use an image for the border with the following CSS: -moz-border-image: url(shadow_left.png) 0 7 0 7 round round; -webkit-border-image: url(shadow_left.png) 0 7 0 7 round round; However, I can't figure out a way to use a different image for left and right. Is there any way of doing so which is supported by ...

Replace Helvetica Neue with a different font in firefox.

Is there a way to replace the font 'Helvetica Neue' with 'Verdana' in firefox via the userchrome.css, usercontent.css, or user.js? I find this font extremely hard to read without zooming the content. Thanks. ...

CSS rule based on content

Hi SO, I would like to apply a different style to all anchors containing a specific word. Can it be done in pure CSS? It's ok if it's CSS3-only. Thanks ...

Stacking CSS3 Structural pseudo-classes

While practicing different scenarios in which CSS3 pseudo-classes and selectors might come in handy, I ran across something I just can't figure out! Here's the situation. I want to modify the :first-of-type::first-letter of the first non-empty paragraph for a block of text. I'm not sure that pseudo-classes can be stacked though. Here's ...

CSS3 Resize in Webkit/Safari

I'm attempting to use CSS3's resize to make an absolutely positioned div resizable in Safari and Firefox Beta. No matter what I do I can't seem to make it work – are there situations that resize cannot be used? ...

Custom font and a CMS

I'm building a web site for an artist who has had a custom font made from his handwriting. He'd like to use this font extensively throughout the site - not for all body copy because it'd be difficult to read, but for headings, navigation, callouts, things like that. I've got the file - it's a TrueType font file. We're going to be using...