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

4
votes
2answers
145 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 ...
2
votes
1answer
559 views

Where can I find a good repository of semi-transparent tiles for web?

I have been looking frequently for a site, a service that provides a repository of semi-transparent tiling backgrounds. I've found some grain generators, but I would like some more things that I could ...
-1
votes
1answer
71 views

What can I use to capture a screenshot of an entire web page? [duplicate]

I tried to capture the whole webpage using this screenshot tool but I am unable to capture the images. This is the url of the webpage: http://dabblet.com/gist/f1450f041e18287ce211
1
vote
0answers
949 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 ...
1
vote
3answers
323 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
3answers
147 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
2answers
148 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
1answer
95 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
0
votes
1answer
119 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 ...
2
votes
2answers
451 views

How to do a perfect circle with the bezier tool in Inkscape?

I need to create a perfect circle with the bezier tool and not with the circle tool. The purpose of this is to later animate my svg with css.
7
votes
3answers
4k 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 ...
1
vote
1answer
128 views

Photoshop copy css for transformed text that respects aspect ratio

I'm really exited about the copy css feature. It helps me, a web developer, to get most of the font styles, gradients and rounded corners out of a psd in no time. I have however an problem. ...
1
vote
1answer
309 views

What kind of table / definition list should I use for a CSS concert program listing?

I'm looking for some advice on how to render a classical concert program listing on a web site. I can define the composer & title using either <dl> or <table> tags: <table ...
4
votes
4answers
5k 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
115 views

Photoshop to CSS, just got Retina [duplicate]

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
109 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
99 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". ...
-6
votes
1answer
2k 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?
1
vote
1answer
6k 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
759 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
473 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
728 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 ® (&#174; or &reg;) 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?
2
votes
3answers
366 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 ...
1
vote
1answer
227 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
515 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 ...
0
votes
1answer
67 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 ...
2
votes
4answers
2k 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 ...
2
votes
2answers
4k 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 ...
5
votes
4answers
212 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. ...
3
votes
4answers
528 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?
-1
votes
3answers
729 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
425 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 ...
0
votes
1answer
88 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
2answers
422 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 ...
10
votes
4answers
991 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 ...
19
votes
10answers
14k 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 ...
2
votes
1answer
200 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
2k 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
3
votes
2answers
279 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 ...
-1
votes
1answer
62 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 ...
1
vote
1answer
6k 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 ...
2
votes
2answers
65 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?
2
votes
3answers
395 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 ...
3
votes
2answers
239 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, ...
4
votes
4answers
308 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 ...
5
votes
1answer
140 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 /> ...
2
votes
2answers
2k views

Photoshop To CSS: How do you translate Fill to CSS

I have a content box in photoshop with the background color #bc0018 with a 65% opacity and 50% fill. I am able to translate the backgroundcolor and opacity part to this, but without the 50% fill the ...
2
votes
4answers
272 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 ...
0
votes
1answer
119 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
151 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 ...