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
49 views

Do and don't do with styling <html> and <body> tags

When I look at some CSS style for a web page, I typically first look at styling the <html> and <body> tags and then I look at other sub-elements. The styling of <html> and ...
9
votes
4answers
7k 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 ...
6
votes
2answers
235 views

What's the best way to animate an illustration for the web?

I have a couple of illustrations done in Illustrator and I am planing to animate it for a website that I am working on, I've heard of Create.js toolkit with flash, but is it the best way to go or is ...
1
vote
1answer
20 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?
6
votes
3answers
39 views

What should I consider when incorporating cross-browser compatibility into my designs?

Typically when I construct a website design, I'll focus on one browser (Chrome) and build it out to completion before opening another browser. Once complete, I'll then test it in other browsers while ...
0
votes
0answers
12 views

How would I create a dynamic 'hit zone' that changes when resizing or moving the original image?> [migrated]

I have a large .png of a model's face. I need to draw an irregularly shaped - call it a polygon - around her lips, so that when the cursor hits that zone, I show lipstick, and similar zones around her ...
6
votes
2answers
2k 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 ...
6
votes
1answer
39 views

What are the relative advantages of flat design, material design and skeuomorphism?

I've been looking at Google's guidelines for this thing called "material design", and I've been following it some. However, I also see a lot of sites using flat design: Twitter, Codecademy, and Gitter ...
0
votes
1answer
55 views

How to support the font ITC Avant Garde or replacement for web?

I'm coding the redesign (css+html) for a webapp in India where my artist designied a mockup for me to code. I now wonder how I can adjust a font "ITC Avant Garde" to make it look as close to the ...
0
votes
0answers
29 views

How do you put in percentage based margin to a CSS grid? [migrated]

I'm trying to learn how to build a grid system - and so far this is what I've got. What I want to know is, how would I create actual gaps between the colums? If I put in a margin, everything goes out ...
1
vote
1answer
70 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 ...
9
votes
3answers
4k 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 ...
0
votes
1answer
46 views

WCAG luminance contrasts - current practice, what is it?

I tried to ask this question in another group, but got a hint this group might be more appropriate. I just wrote a little tool to check luminance contrast (WCAG) on a web page. Testing this I was ...
0
votes
5answers
221 views

Webpage image zooming or quality lose issue on mobile

I'm making a responsive site and my logo loses quality when I'm opening the site on mobile (iPhone, Android) http://kadmos.li/web/ji/stck.html My logo size is 266x68px and I'm not resizing it on any ...
2
votes
0answers
69 views

Long Shadow Effect in SVG for Web

Basically I'm wondering if anyone has any ideas on how to efficiently get a long shadow effect with an SVG: Example Image My three ideas on how this might be possible: Hella detailed gradient map, ...
0
votes
3answers
139 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 ...
6
votes
5answers
3k 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, ...
0
votes
2answers
4k 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 ...
3
votes
2answers
649 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
3answers
408 views

How do I make it so my website footer is always at the bottom of the page (but not sticky)?

I'm fairly good at getting stuff to work nicely as I come from a coding background, but I'm lacking in the design/visual department. I'm building a website for a friend and one of the things he wants ...
9
votes
2answers
2k views

How can I create simple spheres using CSS?

Is it possible to create a simple sphere using CSS? I'm thinking of something like a 3D sphere.
-2
votes
4answers
506 views

How to convert PSD file to Html

I am learning Photoshop, does Photoshop generates Html and Css files, I am a web designer and I am figuring out to convert the .PSD file to Html Css. Regards,
-1
votes
3answers
76 views

How is mozilla.org homepage design acheived? [closed]

https://www.mozilla.org/en-US/ Can anyone comment how the below is acheived? 1) the sliding image album in the homepage 2) Shadow behind thumbnails in https://www.mozilla.org/en-US/products/ If it ...
5
votes
3answers
2k 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 ...
0
votes
1answer
96 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
87 views

What is a technical way to describe this style of website?

I want to look up tutotirals for a few things but dont even know what to search for. What is the correct way to describe the following? The bar that is collected by the top of the screen and follows ...
5
votes
5answers
467 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 ...
-4
votes
1answer
90 views

border radius CSS for this shape

I want this border shape with pure css for my website pagination
3
votes
1answer
615 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 ...
2
votes
2answers
142 views

How to create an inline horizontal navigation with mixed text and icon links that's easy to adjust, tweak and improve?

I'm cutting CSS and facing a problem, if I try to change the line-height, padding, margin of any of the last 2 items of the menu, other items will be affected. Here is the screenshot of my current ...
0
votes
1answer
49 views

A weird issue on a page I'm designing [closed]

I've designing a page for a site of mine, but I'm getting a strange issue with the following code. <section id="struttura" class="inner"> <div class="content"> .... </div> ...
4
votes
2answers
114 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 ...
1
vote
1answer
384 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
52 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
852 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
141 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
114 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
84 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
70 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
0answers
554 views

Specify CSS class names on SVG paths using Illustrator

Is there a way to edit SVG files in Illustrator where you can specify a CSS class for each path? I already know in Illustrator that if you give the layer name an actual name, Illustrator will use ...
0
votes
1answer
107 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
156 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.
6
votes
5answers
5k 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 ...
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 ...
1
vote
1answer
90 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
245 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 ...
6
votes
4answers
601 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 ...
4
votes
4answers
1k 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
78 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
73 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 ...