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

0
votes
1answer
140 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 ...
1
vote
1answer
62 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 ...
5
votes
4answers
19k 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 ...
4
votes
2answers
2k 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.
1
vote
2answers
98 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
votes
1answer
113 views

How can I style this following form to Inline form? [closed]

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 ...
0
votes
2answers
184 views

In an HTML element, is margin-bottom measured from the baseline?

I'm doing an internal style guide for a big company and want to make sure I get the spacing perfect. If I add margin-bottom to a text element, does it measure from the baseline of the text or the ...
0
votes
1answer
57 views

What are the best tools/processes for web design refinements / adding polish? [closed]

I'm working on a particular part of a web page right now and have a mocked-up design to work from. I've always been able to get everything blocked out in HTML and roughly looking how I like in CSS no ...
2
votes
0answers
79 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 ...
-1
votes
2answers
124 views

Critique: Can anyone tell me how I can improve my website? [closed]

I am a bit rubbish at CSS and have mainly based my website off another website, in hope it would look different, although it didn't. I just want comments and tips how to change things but still keep ...
1
vote
1answer
292 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 ...
0
votes
2answers
54 views

Improving webpage appearance

I have built out a donate page for our website. The buttons are somewhat similar to the LiveStrong donate buttons. Something about the page looks cheap and unappealing. I have some ideas, but I am ...
2
votes
2answers
199 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. ...
3
votes
2answers
972 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, ...
-3
votes
3answers
117 views

How to use photoshop or illustrator or CSS to draw this? [closed]

In Powerpoint, it's easy to create this effect. [Gradient fill] -> [Rectangular] If it is possible, can CSS do this? If not, I was wondering how I can do this in photoshop or illustrator with only ...
0
votes
2answers
746 views

Using Opacity of a Div without affecting The color of the Paragraph inside the Div

I have created a div with background color black, and written a p inside it with white. When I am using opacity in the div, the color of the p is also getting changed into gray. Is there any way to ...
2
votes
2answers
71 views

Considerations for styling of overlay message topbar?

I've created an overlay top bar that slides over the top of the page for confirmation messages. I did a fiddle with it. Now I wonder if the light yellow background is appropriate thinking of the rest ...
0
votes
1answer
60 views

Is this possible with html & css [closed]

can this be done? If so what way would you take to accomplish it.
7
votes
3answers
37k 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 ...
4
votes
5answers
10k 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 ...
5
votes
2answers
15k 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 ...
0
votes
2answers
323 views

PSD to HTML&CSS - my margins are wrong

I am having trouble with replicating exact margins from the PSD in CSS. Whenever I measure a margin with a select tool I get, for example, 32px. Then I put this in my CSS code: div { margin-top:32px; ...
0
votes
1answer
816 views

How to crop a round image with transparent background?

I am currently working on a site. I want to create custom radio buttons. The background of the website is an image. So I want the radio button to seamlessly integrate with this background image. I ...
3
votes
3answers
16k views

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

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 ...
0
votes
1answer
516 views

How does “background:cover” CSS property works? [closed]

I'm currently "fighting" with an issue with parts of a website that I need to be fully covered by a picture. Thus, I tried the background:cover CSS property. Well, to be complete, I didn't actually ...
1
vote
1answer
2k 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
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 ...
0
votes
2answers
186 views

How can I condense a Source Sans Pro font so the characters almost touch when 30px size?

I have a web site that is using the Adobe Source Sans Pro font. On the website I would like to create a logo using this or a similar font but I would like to have it so there is almost no spacing ...
-1
votes
2answers
629 views

Recreate a 3D rotating prism effect in a web browser

I'm trying to find a way how to do this 3D Transition when box hover my self. I know when I look to it that it's made using CSS 3D & parallax effects. Is there an already made jQuery plugin or ...
0
votes
1answer
5k views

Centering text vertically with CSS

How can I vertically center text in an element? For example, from this: to this: I know I can specify the height property on the text and then use position: absolute; top: 0; bottom: 0; margin:...
3
votes
4answers
783 views

Is line height related to the typeface used in css?

I am trying to figure out how line-height in css works. I am setting body line-height to 1.5em ( 24px ). And I am using a link tag with font-size 24px. I am expecting the total height of the inline ...
2
votes
1answer
495 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 font-...
-1
votes
1answer
195 views

Cant Change Font Face in CSS [closed]

I am making a Responsive Webpage Using BootStrap. That Have "helvetica neue" Font By Default. But It Doesnt Suit to my Web Page. So I Had used Custom Google Fonts. For Import: http://fonts....
6
votes
5answers
1k 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 ...
6
votes
3answers
19k views

How do I use a custom font in an SVG image on my site?

I created a custom Facebook icon using Inkscape and saved it as an svg. It uses the same font as the title of my page, which uses the font "ubuntutitling-bold-webfont", which I have referenced as a ....
0
votes
1answer
83 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 ...
1
vote
4answers
41k 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
1answer
3k views

Can InDesign paragraph styles be exported out as XML or CSS for review?

I've been spending more time in InDesign's paragraph styles I've found where a document can be created with set styles and used as a template but Im trying to figure out how I can review that InDesign ...
6
votes
3answers
261 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 ...
27
votes
12answers
3k views

Do web designers need to know how to code?

As a web developer, both front-end and back end architect, I work with many different designers and sometimes find it frustrating working with design comps where no thought was put into how to ...
5
votes
4answers
663 views

How can I left-align the text in a table of divs so that the rows are evenly distributed?

I'm trying to arrange some names. I changed them out before posting using generatedata.com but the real ones are in alphabetical order from left to right each row. I'm trying to figure out how to get ...
1
vote
2answers
166 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 ...
4
votes
3answers
581 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 <body&...
2
votes
4answers
465 views

How do so many app menus get that finished textured look?

I don't know how to describe it but how do you create that nice textured look with css? Seen in the background: Also seen a bit on the left hand dark navigation of: Thanks for your help ...
2
votes
1answer
184 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 ...
0
votes
4answers
812 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 ...
11
votes
4answers
22k 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 ...
1
vote
1answer
44 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
2answers
4k 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 ...
8
votes
1answer
746 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 ...