Tagged Questions
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:
...