Questions about cascading style sheets, commonly refered to as CSS. Ask anything related to implementing styles, effects or graphic-design-specific tasks. For questions about implementing structural elements or anything completely unrelated to the aesthetic look, please go to Stack Overflow.

learn more… | top users | synonyms

0
votes
2answers
173 views

Advice on typography and background image

I have a blog and i would like to ask anyone CSS savvy for advice on some changes. http://fornuftfu.se/category/blogg/ Better Typography for the blog articles Is the design too dull? Would a ...
1
vote
3answers
242 views

Element naming conventions / inspiration [closed]

I work in front end markup so I'm constantly templating site. Does anyone know of good resources to learn some good conventions or inspiration for element names? I like names that relate to print ...
1
vote
1answer
184 views

Creating a new stage in Adobe Edge Preview 0.10.0.134.17040

I recently started working with Adobe Edge, and need to create an additional stage for a more complex animation. How can this be done?
5
votes
1answer
1k views

Gradient Banding in Chrome

I've been trying use linear-gradient CSS to avoid using an image for a gradient but unfortunately it renders poorly in Chrome with visible banding. I've created a codepen example to illustrate the ...
2
votes
2answers
176 views

Is there a way to get the equivalent of a color in different blending modes?

I have to make a button with some shadows using HTML/CSS and I've been provided with a PSD file, which has a shape of the button and some effects applied to it. One of the effects is an inner shadow. ...
0
votes
1answer
267 views

Images not displaying properly in Firefox

I am having an issue with Firefox rendering a few of the .png's that I have loaded into a Wordpress blog that I am preparing for a client. The images look fine in IE 8 & 9, and chrome, but it ...
0
votes
1answer
4k views

How do I convert leading and kerning expressed to CSS styles

I have been given a design / style guide for a website that has the fonts expressed in point (pt) measurements, and additional leading and kerning adjustments - e.g. 40pt font, 60pt leading, -30pt ...
0
votes
1answer
2k views

Color palettes - RAL to hex or RGB

I'm looking for a way to transform the RAL color palette to hex or RGB so I can use the colors in CSS (all/any of them). Is there an XML file someone can point me to, or a database somewhere, that's ...
2
votes
3answers
300 views

Fireworks slices for Dreamweaver

I am designing a website and am planning on slicing up my template in Fireworks and then exporting it to Dreamweaver. When this is done it does of course go into a table. I have a title and nav bar ...
2
votes
1answer
146 views

Spacing nav menu type

When designing a horizontal menu for a website in photoshop (like the img attahced) whats the best way to space them ? In html/css i would just use float:right; margin-left:20px; but in photoshop the ...
2
votes
2answers
131 views

Is there any way to lock down Photoshop to prevent designers from creating styles that cannot be rendered in CSS?

Photoshop is a much more powerful design tool than CSS, and given free reign to design at will, designers will often tweak things like font settings to a degree that cannot be recreated on the web. ...
5
votes
4answers
190 views

How can I create a generic display that looks appealing with a wide variety of images?

I feel like this looks ugly. The box shadow above the image blends really well with some images - generally with images that have a lot of color or are white - but with others it looks horrible. ...
0
votes
1answer
258 views

DIfference between IE and FF. Colors [closed]

I have a problem with my CSS code. Buttons look differently in IE7 and FF Here are my buttons: Here is my code: .list-common-wrapper .button-unfixed .button-unfixed-normal[disabled] ...
1
vote
3answers
2k views

Photoshop kern and css kern ratio?

I am trying to determine the how much line spacing to set for the amount of kern used in photoshop. I can eye-ball the spacing but does anyone know the exact ratio between the two. ex. Set text kern ...
1
vote
2answers
614 views

Creating Rolodex-Style Flipping Numbers Sprite in Photoshop?

So Apple recently had a countdown to their 1 billionth app download and it used a rolodex flipping type of effect. This actually turned out to be running on a sprite image which is composed of ...
2
votes
6answers
270 views

Is there a name for buttons with a thick shadow underneath?

I have been seeing a lot of these buttons lately. I think it's a recent trend. I would just like to know the name for it so I can explore them further. In this sprite image, the buttons on the bottom ...
3
votes
7answers
2k views

PSD fonts and Html Page fonts

I am a web developer. What happens is that the Client sends a PSD (Photoshop designs) to the company. Then the designer needs to create a HTML page from the PSDs What happen every time is that the ...
0
votes
1answer
282 views

Design tips for a web design by a beginning developer

I'm currently in the process of making a design for a web application. Although I'm very interested in design, I'm actually a programmer, and I don't have a lot of experience with design. That's why ...
2
votes
2answers
1k views

Photoshop To CSS: How do you translate Fill to CSS

I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill. I am able to translate the backgroundcolor and opacity part to this, but without the 50% fill the ...
1
vote
1answer
441 views

How do I breakdown a PSD Background To Tileable layered elements

I'd like to create a scaleable multi-resolution web effect similar to iBooks and started by building on this tutorial. The problem is with the background image: As you can see it has two masks on ...
0
votes
2answers
218 views

GUI for web design?

I have a friend who has like 250 hyperlinked flowcharts. He wants to put them into a web app. The thing is, it needs to be simple HTML. There are some websites out there for flowchart HTML, but the ...
1
vote
2answers
266 views

How do you achieve the margin:auto effect in Fireworks/Photoshop?

In Fireworks and for an image similar to this: what's the best way to horizontally distribute objects in their parent container so that they have equal margins? The same effect can be achieved with ...
0
votes
2answers
700 views

Having trouble making a CSS3 background

I wanted to make a rather simple double-CSS3 gradient background, which would look like the one in use on my website now. I can't, however, conjure up the code to get both gradients working at once. ...
4
votes
2answers
949 views

Looking for suggestions for making type more readable with a drop shadow

I want to show a menu with indented items on top of a black background. I tried a lot of colors but can't find the right ones. I'm using css property text-shadow: text-shadow: 1px 1px #191919 , -1px ...
0
votes
1answer
215 views

How can I achieve a better 3D lifting effect of a logo for a website?

This is my current approach, only the shadow moves. http://tinkerbin.com/uekpe227 This is a second approach, both the shadow and the letters move. http://tinkerbin.com/LjiGDKa7 And in the last ...
0
votes
2answers
74 views

Which UI treament of a large photo is more successful?

I am about to launch a beer app on Facebook, and while it's a minor detail, I am deciding between two ways to display the photo: Option 1: http://cl.ly/082D0I3A1u0S0W0S1x2w Padding is less ...
2
votes
2answers
350 views

Whatever happened to opensourceampersand.com

It's gone, which is a real shame, I should've made more use of it. Where's the best place to go to get free ampersands that I can then embed using @font-face in CSS?
1
vote
2answers
363 views

Recipes for HTML/CSS [duplicate]

Possible Duplicate: How to create this 3-columns fluid layout? I'm new to HTML/CSS and I'm having a hell of a time getting things to lay out like I'd expect them to! It would be really ...
3
votes
3answers
899 views

CSS - Using different fonts within a typeface?

After exploring typography more I've learnt the different between a typeface and a font :) I'd like to know how I can call the fonts 'Arial Black' or 'Arial Narrow' within CSS? The font-family ...
0
votes
1answer
104 views

What are the available css frameworks? [closed]

I have been trying to find a nice css framework so I can put it as my main design style and re-use it in my web developments without having to think about the style that much. So far I have found ...
2
votes
1answer
307 views

Dealing with a huge top-level navigation menu requirement

What are ways to deal with a large number of top-level navigation items? I am working on a site that requires 50 items at the top-level navigation. The items are all at the same level: they cannot ...
0
votes
1answer
132 views

Shadow for medium sized text

there are many examples of text-shadow effects on the web but only for very large text or particular background/foreground colours. I've tried creating an engraved effect or a 3D effect (I really ...
6
votes
3answers
1k views

Vertical rhythm/baseline grid in Web Design

I recently read some articles about the importance of good vertical rhythm/using a baseline grid for good typography in web design. I decided to try using a baseline grid, like the 960 grid pictured ...
10
votes
4answers
859 views

With the invention of CSS3, should a web designer use Photoshop?

I see that many designers create beautiful web design works in Photoshop, but now with the arrival of CSS3, when they want to change that to HTML & CSS, they simply start from scratch and create ...
2
votes
2answers
216 views

How good is the fonts.com webfont solution compared to the current @font-face standard?

I guess the title says it all. I've been successfully working with @font-face (with near-perfect cross-browser support, if you use all the hacks). However, a client really wants to use Helvetica, and ...
4
votes
4answers
3k views

Gutters - Padding and Margin for Columns with Background or Border

What are the recommended design guidelines for gutters when a column (or box, or any layout module) has its shape clearly visible because it has its own background or border? Typically one would put ...
22
votes
11answers
2k views

Do web designers need to know how to code?

As a front end web developer I work with many different designers and sometimes find it frustrating working with design comps where no thought was put into how to accomplish the design in basic CSS ...
2
votes
5answers
5k views

Fluid Images: How to set width and height?

I'm trying to build a fluid layout, for which I am styling big images with: .fluid_img { height: auto; width: auto; max-width: 100%; } This works fine, the problem is that I can no longer use ...
6
votes
3answers
4k views

what is the largest glyph width in Arial?

Im designing a DIV container that will contain some rows of text. Every row can contain 0 to 35 chars. I need to specify a fixed width for the div, but I cannot predict how "wide" the string can be. ...
2
votes
3answers
242 views

Clickable stickers sticking out of a notebook

I'm trying to make clickable buttons that look like they're stickers sticking out of a notebook. Here's how it looks like: What's the best way to do this? Should each of them be PNG images with ...
1
vote
4answers
1k views

How to create this 3-columns fluid layout?

I am trying to create a 3-columns fluid layout, as described by attached picture, but I cannot reach the desired results. Do you have some hints that can help me?
3
votes
2answers
735 views

Golden ratio, with or without padding/margin?

Lets say I have 1000 px wide 2 column layout with 100 px gutter space (margin) and 50px on the left and right.. How do I apply the golden ratio to this layout? Method One c1+c2=800px; c1/c2=1.618; ...
2
votes
4answers
8k views

Change the color of an image in a website

I have this image in my website, is a png: I want to know if there is any way with HTML5, javascript or css to change the color of the image. Or at least make the image change to white (invert ...
3
votes
4answers
368 views

What would be a cool yet simple way to style an “!” with just CSS?

I want to create a cool looking yet simple exclamation mark with just CSS. Anyone have any cool ideas?
3
votes
2answers
364 views

How did they design the Flash logo?

I am just interested to know how was the Flash logo shown bellow designed? How can something similar can be created using GIMP? sorry I can't afford Photoshop. [edit] In addition to GIMP, is it ...
3
votes
4answers
820 views

A common reset for IE, Gecko and Webkit browsers

I am developing a website that emphasizes a lot on CSS. I wish to pre-inform everyone that I am not a professional with the task. The problem I face designing the UI is that Gecko and Webkit browsers ...
2
votes
5answers
228 views

Recommendation to learn css [closed]

How would you recommend to proceed to learn css? Is there a great book, or online tutorial?
5
votes
2answers
134 views

Minor CSS issue

I am new to the designing/programming world so I am sure the issue is easy to solve. I am trying to add the moz-box-shadow effect to my header. But as soon as I add that component, the header which is ...
1
vote
3answers
1k views

Tools to get HTML/CSS easily from PSD?

I have the PSD designs for my website and now want to create the site using these designs. I am not very good with css though I know HTML, javascript well. Is there any tool, site, software that can ...
5
votes
4answers
15k views

Clean, simple CSS styles for text and table-heavy sites

I just want some basic, clean-looking CSS styles to apply to a site of mine that's a web application with lots of forms and tables. Anyone have a theme or a set of CSS or a site I can look at to ...