CSS (Cascading Style Sheets) is a declarative language used to code style sheets which determine the visual appearance of text and images, as well as form and interface elements in documents created with markup languages like HTML and XHTML.
26
votes
16answers
89k 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?
17
votes
12answers
1k 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 ...
13
votes
10answers
1k views
What real advantages do web templates such as Bootstrap or HTML5 boilerplate have for a designer?
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 ...
10
votes
2answers
2k 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 ...
9
votes
3answers
236 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 ...
6
votes
4answers
535 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 ...
5
votes
2answers
980 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 ...
5
votes
2answers
124 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 ...
4
votes
4answers
157 views
Creating 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.
...
4
votes
2answers
403 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
9k 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 ...
4
votes
1answer
75 views
How do you build a webpage with a main text body and 2 columns underneath? [closed]
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
1answer
399 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
4answers
1k 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 ...
4
votes
1answer
43 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
1k 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
253 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
541 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
595 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
849 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 ...
3
votes
2answers
80 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
2answers
2k 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.
...
3
votes
3answers
445 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
2answers
342 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 ...
3
votes
1answer
700 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
260 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?
2
votes
5answers
207 views
Recommendation to learn css [closed]
How would you recommend to proceed to learn css?
Is there a great book, or online tutorial?
2
votes
2answers
68 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
5answers
2k 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 ...
2
votes
4answers
153 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?
2
votes
3answers
113 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 ...
2
votes
2answers
71 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 ...
2
votes
4answers
87 views
Positioning a DIV before the previous DIV [closed]
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 ...
2
votes
2answers
102 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.
...
2
votes
2answers
157 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 ...
2
votes
3answers
113 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 ...
2
votes
3answers
203 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 ...
2
votes
1answer
71 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 ...
2
votes
2answers
365 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 ...
2
votes
4answers
3k 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
4answers
840 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?
1
vote
3answers
909 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 ...
1
vote
3answers
693 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
68 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 ...
1
vote
1answer
62 views
In Dreamweaver (or HMTL and CSS in general) how can you style the ® Registered logo to be smaller and floating upwards?
On the web, using ® will make the Registered logo almost as big as the rest of the text. How can you modify the size of it to match how it would appear in print?
1
vote
2answers
161 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
137 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.
...
1
vote
1answer
314 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 ...
1
vote
2answers
319 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
3answers
142 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 ...
