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

38
votes
16answers
165k views

Web Safe Alternative to Myriad Pro Font?

Is there any font that I can use in my font stack that is more or less similar to Myriad Pro and web safe?
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 ...
16
votes
10answers
11k views

Do web frameworks such as Bootstrap or HTML5 boilerplate offer anything to a designer (not developer)?

Note, this is about design much more than development. I build sites from scratch with completely hand written CSS and HTML. I've known about pre-build css templates such as Bootstrap or HTML5 ...
12
votes
2answers
4k views

Creating CSS sprites from Photoshop

I have a PSD with a web design. Every time I tweak the design, I need to manually copy different portions of the image, with different layer visibilities (for transparency) into CSS sprites. How ...
10
votes
4answers
876 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 ...
10
votes
3answers
762 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 ...
9
votes
3answers
2k views

Text not very readable on different image backgrounds

I've come here seeking for a bit of design help or advice on how I could possibly improve the following: Like the title says, I'm having a website banner with multiple text displayed on different ...
8
votes
4answers
6k views

How can I create this irregularly-shaped border with pure CSS (no images)?

I am trying to avoid using a background image (or any image-based solution) to effectively create this: Note: the red arrow is just pointing at the border in question. The arrow should not be ...
7
votes
3answers
3k views

Is it possible to create a kind of horizontal “invert mask” in CSS?

I have two blocks (div elements) with one black on the top background-color: black and one white on the bottom. Is it possible to have a piece of text that straddles the two zones with inverted ...
6
votes
4answers
3k 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 ...
6
votes
5answers
4k views

Is there a visual web editor based on bootstrap?

Bootstrap is a great framework, and I want know if there is a tool that gives you the possibility of dragging html components, re-sizing and moving them, changing colours, all while generating the ...
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 ...
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. ...
6
votes
4answers
471 views

Convert image into mask

I have a green background picture with some shadows. I would like to use it as a mask so I can place it on background with any color (e.g. red or pink) and get the same style of shadows. I tried ...
6
votes
3answers
2k views

How to export font information for a specific PSD file for use in writing CSS

I'm doing front-end dev, so this question comes from that perspective. When I receive a .psd I manually go through each font in the design, click on it, then use the character panel to get the font, ...
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 ...
6
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 ...
5
votes
5answers
447 views

How to make it obvious that an option is unavailable, and can be deleted?

Here is the question I have asked on StackOverflow that somehow did not get the response I hoped for. I am trying it now here, as I am looking for a visually appealing solution. Ideally using a ...
5
votes
3answers
1k views

Email signature hell--How to include a logo image and have it stay sharp?

I found a couple useful threads on this forum with respect to the issues posed by (displaying) images in email signatures-- here, for example-- and I've searched all over the web, but still have not ...
5
votes
4answers
193 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. ...
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 ...
5
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 ...
5
votes
2answers
135 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 ...
5
votes
1answer
127 views

How do you build a webpage with a main text body and 2 columns underneath?

I have a body of text that I am trying to layout in a visually pleasing way but I can not figure it out. The goal is to have this layout (see psuedocode): <container> <main /> ...
4
votes
2answers
6k 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
91 views

CSS-only Polygonal Border

For example, how could I recreate the "Ask Question" button in pure CSS without images? There is this method here but I'm looking for a normal no-fill stroke-only border. I've been able to do it ...
4
votes
2answers
313 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) ...
4
votes
2answers
980 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 ...
4
votes
4answers
587 views

Do I need to create my images at twice the pixel dimensions on a retina display?

I just got a new Macbook Pro with Retina and I'm confused about how to attack my PSD's. If I'm designing a site which has 14px font size, should I be creating it at 28px in Photoshop to see what it ...
4
votes
1answer
797 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 ...
4
votes
2answers
976 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
1answer
134 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 ...
4
votes
1answer
97 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 ...
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 ...
3
votes
2answers
365 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
2answers
199 views

How to visually display css blocks for debugging

After lots of confusion and wasted effort I once learned that css also had this lines concept that everything else followed regardless of it being text or not. And that each line can be varied, be of ...
3
votes
2answers
739 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; ...
3
votes
4answers
829 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 ...
3
votes
2answers
166 views

Implement non-symmetrical background image to a site

I am trying to add the following 3D image as background to the content of a wordpress website: Click for full resolution Website I would like the header part to stay the same size on all pages, ...
3
votes
2answers
250 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 ...
3
votes
2answers
255 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 ...
3
votes
4answers
379 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
397 views

CSS: Fade input image on focus is too dark

How can I simply make the background fade a bit while typing WITHOUT affecting the text opacity?. Without fading if you type over the top of the image it is hard to read. The reason I have not faded ...
3
votes
2answers
123 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: &#785; ( ̑ ) and ...
3
votes
4answers
203 views

Positioning a DIV before the previous DIV

I'm not savvy when it comes to HTML/CSS. I use Typepad for my blog, and that limits me a lot. There are four divs. <div id="container-inner"> <div id="nav"></div> <div ...
3
votes
2answers
436 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: ...
3
votes
3answers
917 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 ...
3
votes
1answer
100 views

How to convert between Android DP and CSS px?

I see this is probably a noob question, but it truly confuses me. I'm reading documents from the Google Material Design, along with some of its implementations in css. The specification is written in ...
3
votes
2answers
232 views

Optimizing hero/intro photos on mobile and XXL displays

I have a few questions regarding trendy super-large photo headers. I've seen them called "hero" images, but just so we're clear, I'm talking about designs like this one: A large photo is used as a ...
2
votes
2answers
353 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?