For questions about stylesheets and how they are used with graphic design (for strictly coding questions please use StackOverflow!)

learn more… | top users | synonyms

1
vote
1answer
13 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
2
votes
2answers
50 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 ...
0
votes
1answer
22 views

Photoshop to CSS, just got Retina

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 settings it to 28px in Photoshop to get what it ...
0
votes
1answer
27 views

sprite css not hovering correctly

I have a sprite that add a couple of images added. I'm not sure if it is the case of the positioning of the actually images in the sprite or just a case of inexperience on my part. If you go to the ...
0
votes
3answers
40 views

What should be included in a PSD to convert it into HTML?CSS code

I'm working for the first time on "PSD to HTML" job for a client(i usually do logos and banner work). As this is my first time, i'm quite confused about "What should exactly be in the PSD file". ...
0
votes
1answer
49 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 ...
9
votes
3answers
562 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 ...
1
vote
1answer
220 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
64 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 ...
3
votes
2answers
267 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 ...
1
vote
1answer
126 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.
0
votes
1answer
29 views

How to access the system color scheme from CSS? [closed]

I would like for the content of a Web page to follow the color scheme of the user's system. For example, if they are using a GTK- or QT-based Web browser, the background of the Web site would match ...
1
vote
4answers
239 views

How can I create SVG clipping masks?

I want to take a circle that has a blue border and a picture inside, and clip the picture so it fits inside the circle nicely. I'd prefer to use very small files, perhaps cut down in sprites. Once I ...
1
vote
1answer
147 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
votes
3answers
180 views

Trouble zebra striping a table with children with CSS

I have a problem where I can't decide how best to zebra stripe my tree with css. The problem arises because when you click on a node in the tree, its children will become hidden, but still count ...
0
votes
1answer
150 views

Examples of block-layout UI design?

By block-layout, I mean style like these: Medium,Readwrite,Kicktarter There aren't too many on gallery sites(for example, Flat UI Design). Most of them are for product promotion, making a big ...
1
vote
2answers
184 views

Is it possible to create a green poker table felt pattern with CSS?

I would like to render/generate a CSS pattern that looks something like green poker table felt or AstroTurf. Is this possible? Alternatively, would an image-based pattern be a better solution? If ...
0
votes
1answer
76 views

How can I style this following form to Inline form?

SEE the link: http://samuelgeorgeo.com/cc/NEWDESIGN/ I have a site based on Twitter Bootstrap. I have two main elements on the page, the bottom one is a horizontal form. I would like the bottom div ...
2
votes
1answer
74 views

Can I re-color my artwork programmatically?

I have a rather interesting issue. I have columns in my web app that look similar to these guys: I've been able to slice them up and build these guys out...but now I have an added requirement of ...
0
votes
2answers
438 views

How Can I create a irregular shape in CSS without an image? [closed]

I would like to create a irregular shape in CSS like one below . I want to avoid putting image as background completely . Please help me in this regard..Thanks Bijeesh
-1
votes
1answer
53 views

What Icon Style Would Be Better [closed]

I am creating an educational app that looks similar to an iPhone app using the default web stack composed of HTML5, CSS3, and JavaScript. I am wondering if it would be more user friendly/motivational ...
2
votes
2answers
202 views

What font face is Apple.com using for the title in their Mac Pro subsite/page?

If you visit apple's little subpage for the upcoming Mac Pro (http://www.apple.com/mac-pro/), they are using a wonderfully thin yet crisp and legible font for all the title (all rendered as image ...
6
votes
3answers
1k 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, ...
2
votes
2answers
46 views

How do I reverse a css export in Adobe Fireworks?

I have exported a fireworks .fw.png file to a .png and a .css file. I have lost the .fw.png files and the .css file has 200+ objects. Is there anyway to recreate the slices from the CSS code?
8
votes
4answers
2k 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 ...
2
votes
3answers
113 views

“Darkening” a colour so that it's equivalent to the original when made transparent

When you make a colour partly transparent, it lightens (assuming it's on a white background), naturally. I would like to counter this behaviour by "darkening" a colour, so that when I make it ...
0
votes
1answer
435 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 ...
7
votes
3answers
2k views

Is it possible to have a kind of “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 ...
-2
votes
3answers
410 views

What are the advantages of using divs over tables?

I have a table-less website. I mean I use div instead of table,tr and td. Is there a difference in loading time for table or table-less sites? Which one do you recommended? Also, is it a good idea ...
3
votes
2answers
139 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, ...
0
votes
1answer
93 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? ...
2
votes
4answers
146 views

Can I use CSS spritesheets to give a div a re-sizable background?

I'm trying to give a div a background according to a spritesheet, meaning that it'll define the parts from the sprite sheet and use those accordingly in the div. This is my sprite sheet image: Now ...
4
votes
1answer
118 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
2answers
244 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) ...
0
votes
1answer
547 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) ...
1
vote
2answers
180 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
104 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
401 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 ...
6
votes
4answers
2k 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
165 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?
3
votes
2answers
159 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 ...
4
votes
2answers
16k views

How do you save an Animated GIF file using Photoshop?

I am making a .gif file in Photoshop CS5. While saving this animation, I used the steps = File > Save for web & devices > Preset= GIF 128 Dithered > GIF > Save. After saving the .gif ...
6
votes
3answers
792 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 ...
5
votes
6answers
3k 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
1answer
97 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
189 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 ...
0
votes
3answers
212 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: ...
2
votes
3answers
270 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 ...
-6
votes
1answer
1k views

How to make a site attractive? [closed]

What are the basics of an attractive web design? What should I be looking for and what sources should I use to educate myself on the matter?
0
votes
3answers
144 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 ...