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
1answer
120 views

Graphic/web design approach to deal between UI design and front-end development

I have to search for a UI designer/front end developer to build my website out of a set of wireframes. I noticed this process is very fragmented due to complexity. What would be the best approach? ...
4
votes
1answer
153 views

Is there any negative adverse effect to optimizing images for retina screens, if the images aren't exactly double size?

For example: Say I have an image that is going to be displayed at 1000px wide. I want to optimize my site for retina displays, but the largest resolution image I have to put here is only 1900pixel ...
0
votes
3answers
280 views

Svg transparencies don't work as CSS background

I made a translucent svg. It was a 50% opacity round metal texture. When I put it above any other color it makes it look like real metal. It was made using Illustrator and had 2 of its effects: ...
4
votes
2answers
414 views

Steps between Wireframe / UI design for web development

Based on my sketch/wireframe prepared for a UI designer (links below): Link: http://postimg.org/image/npt5zlvu7/ 1) Would I be able to approach a UI designer with the wireframe/sketch above? 2) ...
6
votes
3answers
5k 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. ...
0
votes
1answer
2k views

12 or 16 column grid for a full width website? [duplicate]

So I'm looking for the right answer for my grid system: 1) Should I use 12 or 16 column grid for a full width website similar to these websites: http://xfinitytv.comcast.net http://www.vevo.com 2) ...
2
votes
2answers
306 views

How does the grid system work for a full width page?

How does the grid system work for those websites that expand to the full size of the browser (no matter how you resize) while working with a base 12 grid system (such as 960.gs)? For example, take a ...
3
votes
2answers
175 views

Adjusting diacritic in italicized combining character?

I'm trying to render an italicized lowercase omega (ω) with an inverted breve ( ̑ ) in a webpage using Times New Roman. I'm using the combining character approach: ̑ ( ̑ ) and ...
0
votes
1answer
1k views

How can I use CSS to make something look “pushed”?

I'm building a new website in Dreamweaver CS5 and I've made a default spry menu bar. Now I want that the menu bar has an 3D look. When you click the button on the menu bar, I would like an effect that ...
2
votes
6answers
332 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 ...
6
votes
4answers
4k views

What is the ideal number of font sizes to use for a website?

I'd like to know how many font sizes can you use for a website. Someone said to me it's better not to use more than 3 different font sizes (e.g. 16px for heading, 11px for text and 13 px for smaller ...
1
vote
1answer
250 views

Adding curved drop shadows using Gimp

I was going through a few website designs and I really liked this pointed corner drop shadow: How can I add similar shadow effect using The Gimp or simple CSS?
6
votes
3answers
2k 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 ...
6
votes
3answers
1k views

How to give a site a mockup look?

Edit to clarify Thank you for the existing answers. I am afraid that you misunderstood my question. I don't want to create mockups (I have some, but they are not suited for my current purpose). I want ...
2
votes
1answer
114 views

What's the meaning of saying CSS sprites are “for graphics that are just single blocks”?

I was reading this to understand sprites http://css-tricks.com/css-sprites/ The author says "Sprites are for graphics that are just single blocks. " What does this mean? One thing I have read is to ...
3
votes
2answers
411 views

How to make a “highlighter” effect for text background in CSS?

How would I go about highlighting an inline part of a paragraph decorated with a "highlighted" effect as if it were marked by a real highlighter on paper. <p> The dog <em>jumped ...
2
votes
3answers
406 views

How to design a modern/slightly futuristic-looking application

I was hoping to get some advice from some more experienced UI developers. I have been presented with a unique challenge by my customer, and I feel like I am failing. Specifically, they want a UI that ...
0
votes
1answer
221 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 ...
-3
votes
1answer
529 views

How to create a vertically asymmetrical grid in Photoshop

I'm working on a site. The width will be fixed, but the length will vary. What would be the best way to create a grid like the following in Photoshop?:
2
votes
5answers
7k 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
4answers
4k 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 ...
0
votes
3answers
352 views

What is a difference in Css frameworks vs preprocessors

I am somewhat confused as a graphic designer. What is that distinguish them. I know what both provide to some extent. Like I read about LESS and liked it. I guess i want to know what is a difference ...
-1
votes
1answer
988 views

Right css code to align(center) the div tag? [closed]

I googled this question and searched for an hour, every one specify their own likes, but i want to know the correct code to align the div in center position.
2
votes
5answers
236 views

Recommendation to learn css [closed]

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

Text wrapping fill-last-line-first

I have a peculiar design for a web page that I have to implement from an already made design, and some of the text wrappings are filled bottom-up (in my case it's for bottom-left aligned thin text ...
2
votes
2answers
440 views

How can you get decorative dots or dashes between links in the sitemap hierarchy, using either CSS or images?

In the footer of my clients site, I want to give the users total clarity about where things are on the website so that they can quickly navigate there. So I will implement what looks like a nested ...
2
votes
2answers
286 views

Layout with Tables - Hierarchy

In this fiddle there's a markup and style I'm doing for a website: http://jsfiddle.net/UvJmP/ I am trying to represent data in this way: D2's table data is contained in D1 D3's table data is ...
4
votes
1answer
108 views

Are custom graphics/images a necessity for professional looking web design?

I learned css snd html, thinking that making a site that looks good and professional would be a simple matter of basic layout and some fiddling with colours/text. However on beginning the css portion ...
0
votes
1answer
4k views

Does Firefox support .ttc fonts? [closed]

I have the following css: @font-face { font-family: 'font name'; src: url('../font/fontname.ttc'); } In Chrome it is working but in the firefox the font style doesn't apply, font get too bold not ...
2
votes
3answers
517 views

How to extract the black and white components of an image to superimpose it over colored backgrounds

Say I want to create a glowing button for a website. I would like to have the possibility to dynamically change the color of that button by changing the color of it's background. For this I need to ...
-3
votes
3answers
168 views

What is that flash can do but css3 cant do [closed]

I am not asking to prove what is better, and since this is a forum for graphic Designers..i would like to have a list of limits and possibilities. For example, in flash if i wanted to make the whole ...
3
votes
2answers
510 views

How to recreate this background in photoshop for use in a mobile app? [duplicate]

Possible Duplicate: How do so many app menus get that finished textured look? I'm still a beginner, but I really like this texture and have been trying for hours to recreate it. Question: ...
1
vote
2answers
930 views

How to get arced drop shadows with center glow effect in Photoshop?

I was just browsing the plugins.joshlobe.com and the thing that caught my eye was interesting use of drop shadows. I am talking about the drop shadow in the linked image with a center glow kind of ...
2
votes
4answers
12k 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 ...
1
vote
3answers
3k 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 ...
10
votes
3answers
1k views

Should underline clash with text descenders?

CSS3’s text-decoration module includes a text-underline-position property, which specifies whether the underline should be positioned below the whole text:            or just below baseline, letting ...
2
votes
2answers
251 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 ...
5
votes
2answers
9k views

How to control word-spacing in justified text with CSS?

I have 2 blocks of text that are pretty small (just under a paragraph each) and they really look better justified but the problem is that text-align: justify; sometimes adds really large spaces and ...
4
votes
2answers
1k views

How can I slice parallelogram shapes to HTML/CSS?

I have to slice website design to HTML/CSS. Main navigation menu looks like below: I am beginner webdeveloper and I don't know how to slice this design into compatible and cross-browser code. How ...
4
votes
2answers
1k 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 ...
1
vote
2answers
288 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 ...
1
vote
1answer
257 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?
4
votes
1answer
1k views

Museo Font get distorted in browser

I am facing some problems with font rendering in different browsers. I tried to add a custom font and font get distorted in browser like firefox, chrome, IE ...
2
votes
2answers
833 views

Why does Google want a vertical scrollbar on search page when it's not necessary

On Google's search page there is a visible vertical scroll bar even when it is not necessary. This can be avoided by deleting the following style from body selector overflow-y: scroll; When this ...
1
vote
2answers
965 views

How to create buttons with editable text that are re sizable (to accommodate longer/shorter text) on all browsers [closed]

I often find that I need to change the text on buttons. I'd like to create some CSS based editable buttons with mouse over effects. And the whole button should be clickable (not just the text). I ...
1
vote
2answers
612 views

CSS LetterPress Effect

I can't seem to get the color values/names correct so that I can get a Letter Press Effect on the text To create the appearance of text that has been stamped, choose a text colour that is darker ...
0
votes
2answers
237 views

How can I improve my website design? [closed]

I'm launching a company and currently working on the website. Here is the link: http://goo.gl/HKbIK As I'm not a professional webdesigner your comments / feedback / suggestions of improvements would ...
0
votes
2answers
199 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
266 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 ...
2
votes
2answers
186 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. ...