css3

CSS3 transitions to dynamically created elements

I'm trying to animate a dynamically created html element with CSS3 transitions. I want the animation to start just before the element is created. For these i create a class that set the original position of the element and then I set the target position by the jquery css() method But the new element it just apears in the target posit...

Why Chrome does not show CSS3 ::-webkit-scrollbar scrollbar for iframe?

Why Chrome does not show CSS3 ::-webkit-scrollbar scrollbar for iframe? Demo http://jsfiddle.net/laukstein/C9s3P/ <iframe scrolling="yes" style="overflow-x:hidden; overflow-y:scroll; width:150px; height:50px;" src="http://en.wikipedia.org/wiki/Web_browser"&gt;&lt;/iframe&gt; CSS ::-webkit-scrollbar{ width:0.8em; height:0.8em...

CSS design for large form - Design Advice

I have a large form that consists of all the input (text, checkbox, radio, etc...), I have them grouped together in a fieldset tag and a legend for each feildset. Each input has a label associated with it as well. My question is what is the best approach to display the information on one screen and take advantage of the horizontal real e...

How does @font-face work?

I am aware that using @font-face allows the browser to download a custom font and use it in a web page just like any system font. What I want to know is if the browser encodes the font or uses it without exposing it? Thanks ...

Remove spacing between CSS3 columns

I'm trying to get an effect where it looks like: C---------------------------------------) | Address 1 | Phone Numbers | | Address 2 | Times place is open | (---------------------------------------) But the spacing with the following makes it (-------------------------------------------) | Address 1 | Phon...

How does css3pie work?

What is happening behind the scenes with css3pie that makes it so IE can use css3 features? ...

Does CSS3 support using both an image and a gradient for the background of a single <div>?

I know you can do multiple backgrounds on a single <div> in CSS3, but is it possible to mix an image-referencing background (i.e. url(...)) with a gradient generating background (e.g. -moz-linear-gradient(...))? If so, what is the syntax? If not, what is a best-practice to achieve the same result? Thanks. ...

Can you add noise to a CSS3 gradient?

Is it possible to add noise to a gradient in CSS? Here is my code for a radial gradient: body { color: #575757; font: 14px/21px Arial, Helvetica, sans-serif; background-color: #2f3b4b; background: -moz-radial-gradient(center 45deg, circle closest-corner, #2f3b4b 0%, #3e4f63 100%); background: -webkit-gradient(radial...

Using the CSS3 :not selector with IE - using Prototype

I need to add a CSS style to a content <div>, which is present on all pages of my site. However, I do not want to use the new style on the homepage. All the pages on the site have a similar structure: a header <div> with navigation bar, followed by a content <div> with the page's contents. Best I could think of is to add a wrapper div ...

How to align input and select form elements in one row

How can I align the input and select form elements in my test case, so that their horizontal borders are aligned and all text including labels is aligned to the baseline? I want to have a label and an input form element along with another label and a select form element in one row. Therefore I want to have horizontal borders of select a...

Rounded Corners Optimization

Now that CSS3 includes styles to add rounded corners to images automatically, does this mean that adding rounded corners to images without CSS should be discarded? I would assume that shaving off some of the image would load the page faster then shaving off some of the CSS, but at the same time, that would all depend on how fast the bro...

How would I convert a HTML5 / CSS3 document to PDF?

We're currently generating reports for our web application using html5 / css3, and they look good on screen, but obviously when the user hits print who knows what is going to come out of the printer. So, what I would like to know is what is the best way to convert these reports to PDF for download / printing while maintaining the same vi...

Is it possible to develop a web site for a touch based browser without using HTML5 or CSS3?

I'm developing the CSS file for the mobile version of the website my group are working on for our web design coursework, and I was wondering if it was possible to design a site for touch based browsers using the currently ratified specification of HTML and CSS, as the other member are doing for the desktop variant, or am I going to have ...

Any way to attach specific CSS styles to specific groups?

I have li already styled in a stylesheet. I need it to stay a specific style. It is styled without using a class, so for example .selectors{width:50px;} li{ padding:10px; } Now i have run into a problem. I am trying to style the li again, without any classes like what i have in the example code. For example .opti...

css border radius furry edges in earier version of safari

Hi, I am getting a wierd furry edge in earlier versions of Safari when using border-radius. I am using Panic Coda (I don’t know what rendering version they use) but it’s fine in my other version of Safari, which is version 5. The style: background: url(/images/arrows.png) no-repeat center right, -webkit-gradient(linear, 0% 0%, 0% 100...

iPhone form elements in HTML

I'm planning on recreating some fo the iPhone form elements in HTML/CSS but I'm assuming this already exists. I tried googling it but didn't find anything. Anybody seem something like this already in existence? ...

The biggest misunderstanding of how css works?

I have been working with css for years and continually found everybody has a different opinion of how to use it to layout components, often people give up and resort to html tables (not that this is a good thing). So I pose the question; what is the biggest misunderstanding with how CSS works? ...

Creating CSS3 round corners in Opera.

i understand how to create CSS3 round corners in FF & webkit however how would one create them in opera purely with CSS3. ...

firefox img rounded borders without using div background

It's a known bug that -moz-border-radius doesnt work on images in firefox. What's a way to get this functionality without resorting to putting the image as a background on a rounded div? ...

css3 border-image's transparent png issue

I'm using border-image with a PNG image that has a transparent section. The issue is that the div has background-color set the black. When I apply border-radius, the transparent section of the pattern shows the black of the div and not the background of the element containing the div. How do I get border-radius to ignore the color of th...