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

2
votes
2answers
956 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
1answer
262 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
4answers
17k 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 ...
2
votes
1answer
150 views

How do I convert a diagonal line pattern in my *.psd to a Photoshop pattern? [duplicate]

In my psd from designer I have a background like in the red rectangle. This pattern doesn't show up in any Photoshop patterns. (maybe it's inner psd container) How could I fetch a small rectangle ...
2
votes
3answers
653 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 ...
2
votes
3answers
424 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
0answers
45 views

InDesign Faux Italic Font for EPUB

I'm producing an EPUB with Adobe InDesign. Most of the fonts I'm using have Italic and Bold versions. I simply select the correct font in InDesign, and it is set up as a @font-face in the CSS when I ...
2
votes
1answer
3k views

SVG images showing up blurry in Safari in any size smaller than 20 px

I am doing a mobile demo for the Ipad that we are demoing in Safari. I am using icons to get away from having to scale my images 3x. Problem is that any icons that I am using that are smaller than ...
1
vote
4answers
2k 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
2k views

What is the PSD to HTML best practices with HTML5?

I'm getting quite confused with all the different methods of converting from psd to html 5. I'm trying to practice converting PSDs to HTML so i get enough experience. There are a ton of complicated ...
1
vote
3answers
2k 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
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 ...
1
vote
3answers
165 views

New 'Scroll' Structured Websites

What's this design style used by so many new websites called? If anyone wants to edit this post to use a different link feel free. I'm just wondering how the CSS and such works for websites that ...
1
vote
1answer
8k views

How create this glass effect in Photoshop

I came across the this image. I want to make a glass effect like the below image using CSS or Photoshop. Can someone say how it is done?
1
vote
1answer
370 views

How can I produce this irregular gradient using css?

I am looking for a way to reproduce this gradient using css: Is it possible? I don't know how the png gradient has been done.
1
vote
1answer
1k views

In Dreamweaver (or HTML and CSS in general) how can you style the ® Registered mark to be smaller and floating upwards?

On the web, using ® (® or ®) will make the Registered mark 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
80 views

Can't figure out why my opacity overlay isn't showing 100%

TL:DR Just look at the image attached (very bottom). :) More details: Read it all, because I probably need more help than I realize. :) I created this and everything is nice and simple the way I ...
1
vote
2answers
1k 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
1answer
8k 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 ...
1
vote
1answer
611 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
3answers
1k views

How can I set the height of my website to be the same height as the visible browser window, with no vertical scrolling?

I want to design a portfolio website, and I don't want it to scroll vertically. What are the dimensions for this kind of website, like the standard browser height? How can I create a website that's ...
1
vote
1answer
1k views

Convert sprite images to retina display

Hi all am having set of icons as sprites for and in retina displays the icons are looks like very blur i read some documents for retina display use image as 200%(using photoshop) now the question is ...
1
vote
3answers
292 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
2answers
159 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 ...
1
vote
3answers
346 views

How to create a PDF template and export as HTML/CSS?

I need a tool that allows me to design how a PDF file would look like in a web page. Something simple the image below, I would like to design using some visual tool, export to HTML/CSS and then just ...
1
vote
1answer
42 views

Converting from CSS3 to SVG

So, I was working on my site and an accidental mistake did a nice 3D effect to my new Logo, is there any way to convert or import a CSS3 code to illustrator so I can have it as .SVG?
1
vote
1answer
4k views

How to export a gradient overlay to CSS3 styles (in Photoshop CC)?

I have two buttons in my .psd template. They are with a gradient overlay. Is it possible in Photoshop to export gradients as CSS styles? Please, see a pictures. Buttons with gradient: Info of ...
1
vote
2answers
251 views

What file format for browser-friendly animation, e.g., on Dropbox homepage?

I noticed that the left half of Dropbox's homepage includes an animation (a fairly slow-paced one), with: gradually-revealed complex drawing, such as a "handwriting" animation cross-compatibility ...
1
vote
4answers
34k views

Best image size for responsive css background image

I am looking for a particular px size (WxH) image that would be the best dimensions to use if you wanted to call a single image that could be called as the background image for a mobile device using ...
1
vote
1answer
284 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?
1
vote
2answers
1k 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 ...
1
vote
2answers
776 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 ...
1
vote
1answer
333 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?
1
vote
1answer
49 views

Images for a mobile

So I've been doing a bit of reading but I'm very confused. I'm quite new to mobile and I've mostly used css to achieve the look on my mobile app. The only image that's being used in the app is a logo ...
1
vote
1answer
419 views

What's more important, baseline font-size or baseline line-height when creating grids based on a modular scale?

I'm trying to understand grids based on modular scales and how to use them in web design. From what I understand, there's two ways to decide a baseline value for your scale...using your baseline ...
1
vote
2answers
2k views

How to create a responsive sprite sheet animation in css?

i've been trying to do this for hours but so far i haven't made any progress. I have a site with a few animations in it, some will be activated on click and some on hover. something similar to the ...
1
vote
1answer
144 views

Distorted png when opening in PS

I have a Facebook icon PNG that I want to edit to create a sprite. But the image is distorted upon opening. Saving it gives the same distorted image. Result of opening in PS CS4 v 11.02
1
vote
1answer
704 views

Is it possible to use media queries for responsive emails?

Today and yesterday I had nightmares... One thing is that I personally have a Windows phone. That didn't help surely. But I was reading up on iPhone settings and Android settings and there was no ...
1
vote
1answer
1k views

How to work with image sprites in Photoshop?

I use CSS sprites to reduce server load and thus make the page load faster. This is very effective but I find managing these compound images difficult. I decided to use Photoshop slices to keep track ...
1
vote
2answers
933 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 ...
1
vote
2answers
316 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
185 views

How do I hyperlink .oam-Animations Muse? [closed]

I have an .oam Animation made in Adobe Edge embedded in Adobe Muse. It animates on mouseenter and mouseleave using JavaScript. How can I hyperlink it using Adobe Muse. I want to use HTML so the link ...
1
vote
0answers
1k views

Coding Google material design “chip” (contact thumbnail) in CSS [closed]

I am creating a website and i will be using an element like the contact "chips" in Google Material design. What would the HTML/CSS code be for this? I have tried certain bits of code but I can't ...
0
votes
3answers
545 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 ...
0
votes
1answer
238 views

Make image vertically seamless?

Any idea how make this image vertical seamless..I tried lot in ps..but no result.. or..tell me..where can I found this type of images(one side designed and seamless)?
0
votes
1answer
2k 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 ...
0
votes
1answer
236 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
1answer
71 views

PSD to HTML/CSS ON PHP/MYSQL SCRIPT

I have an auction script that uses PHP/MYSQL. I'm not satisfied with the look and feel but like the the overall function. I was planning on having a graphic designer come up with PSD files to give the ...
0
votes
1answer
143 views

How does color affect kerning and leading in CSS?

I received permission to make some changes to the company's website. All I've done so far is change Font Color and Background Color. Doing so though made drastic changes in leading (line-height) and ...
0
votes
1answer
39 views

Possible to create 3d rotating foods?

I've been looking around but it's very tough to find information on how to create 3D rotating objects on the web. I am interested in creating 3D rotating pieces of food like fruits, etc. What is the ...