43
votes
4answers
21k views

How to make CSS3 rounded corners hide overflow in Chrome/Opera

I need round corners on a parent div to mask content from its childen. "overflow: hidden" works in simple situations, but breaks in webkit based browsers and Opera when the parent is positioned ...
7
votes
6answers
27k views

How to style “input file” with CSS3 / Javascript?

I would like to style <input type="file" /> using CSS3. Alternatively, I would like user to press on a div (that I will style) and this will open the Browse window. Is that possible to do that ...
101
votes
5answers
91k views

How to draw vertical text with CSS cross-browser? [closed]

I want to rotate a single word of text by 90 degrees cross-browser (>= ie6, >= ff2, webkit). How can this be done?
43
votes
11answers
64k views

How to remove the arrow from a <select> tag in Firefox

Hey all, I'm trying to style a <select> tag using CSS3 (I know, custom styles for form elements is a bad idea in general). I'm getting the results I desire in Webkit (Chrome / Safari), but ...
28
votes
11answers
19k views

Is there a way to curve / arc text using CSS3 / Canvas

I'm trying to curve text this effect using CSS3, HTML Canvas, or even SVG (see image below for example)? Is this possible? If so, how can I achieve this effect? Update: To clarify: The text that will ...
166
votes
6answers
5k views

Is it possible to make a div 50px less than 100% in CSS3?

Is it possible to make a div 50px less than 100% in pure CSS? I want the <div> to be only 50px less than 100%. I don't want any JavaScript.
65
votes
6answers
50k views

Creating a CSS3 box-shadow on all sides but one

I've got a tabbed navigation bar where I'd like the open tab to have a shadow to set it apart from the other tabs. I'd also like the whole tab section to have a single shadow (see bottom horizontal ...
43
votes
5answers
22k views

Can you use CSS3 to transition from height:0 to the variable height of content?

Can you use CSS3 to transition from height:0 to the variable height of content?
9
votes
4answers
4k views

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; ...
36
votes
6answers
4k views

Generate repeating hexagonal pattern with CSS3

So, I need to make a repeating hexagonal pattern, using CSS. If images are needed, I can go there, but I'd prefer to just use CSS if possible. Here's an idea of what I'm trying to create: ...
52
votes
6answers
24k views

Turn off iPhone/Safari input element rounding

My website renders well on the iPhone/Safari browser, with one exception: My text input fields have a weird rounded style which doesn't look good at all with the rest of my website. Is there a way to ...
12
votes
6answers
10k views

CSS: A way to maintain aspect ratio when resizing a DIV?

I want to resize a DIV container as the window width changes via % width. Are there any new CSS3 rules that would allow the height to change according to the change of width, maintaining the original ...
20
votes
4answers
3k views

float:left; vs display:inline; vs display:inline-block; vs display:table-cell;

My Question(s) Are any of these methods preferred by a professional web designer? Are any of these methods prefereed by a web browser when drawing the website? Is this all just personal preference? ...
21
votes
3answers
21k views

Vertically centering a div inside another div

I want to center a div which is added inside another div. <div id="outerDiv"> <div id="innerDiv"> </div> </div> This is the CSS I am currently using. #outerDiv{ ...
48
votes
10answers
24k views

box-shadow on IE9 doesn't render using correct CSS, works on Firefox, Chrome

I'm trying to simulate a floating modal box type thing but having an issue with IE9 and its box shadow implementation. Here's a summary of the code I'm using which can duplicate the issue: ...

1 2 3 4 5 22
15 30 50 per page