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

How to Disable Image Smoothing in HTML Emails

I'm trying to use pixel art in an html email. To correctly upscale pixel art in the browser I've had success using: img{ image-rendering: optimizeSpeed; image-rendering: ...
10
votes
2answers
2k 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
754 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 ...
0
votes
0answers
21 views

CSS Image Sizing Being Removed from Email Signatures in Email Chain [closed]

I recently created an email signature for all of the employees at my company and the CEO was adamant that it have the company logo and graphic links to all of our social media accounts. Following the ...
0
votes
0answers
14 views

Help w/ simple SVG with CSS Animations [migrated]

I am new to this group. I am learning to create and use SVG's, so far it has been pretty straightforward. I am having two issues that keep setting me back. (1) Animations only seem to work in FF. ...
1
vote
1answer
821 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
781 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
50 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 ...
-4
votes
2answers
55 views

How to use photoshop or illustrator or CSS to draw this?

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
0answers
25 views

Dreamweaver import only workflow

I want to create a work environment on Dreamweaver where changes made to the code files outside of Dreamweaver will be updated inside Dreamweaver, but any changes I make inside Dreamweaver will not be ...
-1
votes
2answers
192 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 ...
7
votes
7answers
7k 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 ...
0
votes
1answer
60 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; ...
2
votes
0answers
315 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, ...
2
votes
4answers
154 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 ...
1
vote
1answer
160 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
votes
1answer
74 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: ...
7
votes
3answers
6k 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 ...
6
votes
5answers
830 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 ...
5
votes
3answers
7k 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
72 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
4answers
15k 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
2k 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 ...
2
votes
1answer
505 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
123 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 ...
25
votes
12answers
2k 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
321 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
151 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
262 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 ...
2
votes
4answers
361 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
81 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
442 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 ...
9
votes
4answers
11k 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
33 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
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
292 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
295 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 ...
1
vote
1answer
1k 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 ...
10
votes
3answers
11k 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
3answers
956 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
4k 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, ...
3
votes
2answers
2k 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
4k 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
6k 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
86 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
12k 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
154 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
115 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
490 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 ...