Hot answers tagged

63 votes
Accepted

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

There are a lot of ways to animate things on the web. There are even more ways to create animations then export to web animations. There are huge benefits to designing animations in something like ...
user avatar
  • 12.9k
35 votes
Accepted

Why would I ever NOT use percentage for sizes?

I, like you and many other people starting to learn CSS, used to think the same thing. However, as I continued to build websites I realized that using percents only leads to uglier websites. There are ...
user avatar
  • 12.9k
24 votes
Accepted

Is programming a website for mobile first really necessary?

From a purely design standpoint, starting with the mobile version first does make sense. The hardest part of the design process is always pruning, never adding. So the smaller the screen real estate ...
user avatar
  • 4,272
17 votes

Why would I ever NOT use percentage for sizes?

Percentages are sometimes too flexible. If you define everything in percentages then the site will scale uniformly. But its very unlikely for a user of a 27-42 inch monitor wants you to scale text by ...
user avatar
  • 55.3k
16 votes
Accepted

Why does browser add bluish and brownish colors to a solid font color?

It is called subpixel rendering, or subpixel anti aliasing. Microsoft does something similar for most windows applications. Your screen consists of colors that are next to each other. If you do a ...
user avatar
  • 55.3k
15 votes
Accepted

How to convert between Android DP and CSS px?

I think the accepted is wrong. The css px is actually Device Independent Pixel(dip), and it is a common pattern to use px as dp in css.
user avatar
  • 166
13 votes

What is the PSD to HTML best practices with HTML5?

I would not continue trying to learn how to slice up a PSD for HTML. This practice is outdated and you're only going to be hurting yourself down the road. In regards to "current standards" people ...
user avatar
12 votes

Is it possible to determine how many columns a web design grid has?

There are a few issues here. Not everyone uses a grid system and even if they do there's no guarantee the grids are consistent. Maybe your example uses a four column grid with a wider left column. ...
user avatar
  • 39.9k
11 votes
Accepted

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

When drawing a citcle in Inkscape then this will be its path : To convert this path to Bezier lines just select the object, then choose Path > Object to Path: We can now insert nodes, break paths or ...
user avatar
  • 12.1k
11 votes
Accepted

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

Skeuomorphism is really the opposite of flat design. Google's "Material Design" is merely their branding name for their specific interpretations of flat design. It's still flat design though. "FLat ...
user avatar
  • 198k
11 votes

Is there a "generate CSS/HTML" feature or plugin in Sketch app

This might not be quite the answer you're looking for, but I find it better than handing mediocre, auto-generated styles to the engineers. Selective markup I'm sure you've discovered Sketch's ...
user avatar
  • 17.4k
11 votes

Is programming a website for mobile first really necessary?

Mobile first is best practice -- it's not law, and if you understand why you "should" be using it, you can make an informed decision as to why you don't want to use it on a particular project, and ...
user avatar
11 votes
Accepted

Convert svg linear-gradient to CSS linear-gradient (Adobe XD)

I needed to convert <linearGradient> from many SVG files to CSS, and I made this: https://codepen.io/JosephusPaye/pen/vbaxBa?editors=0010. Paste an SVG source and it'll extract all the <...
user avatar
10 votes

Specify CSS class names on SVG paths using Illustrator

Looks like the link Ian Dunn posted might be your ticket. Here's an excerpt from that page: In the SVG export options, I select Style Elements, and I select the Include Unused Graphic Styles option. ...
user avatar
  • 1,068
10 votes

How can I create simple spheres using CSS?

Demo css .demo-container { height:300px; overflow:hidden; display:block; position:relative; /* CSS3 Gradient */ background: rgb(125,126,125); background: url(data:image/svg+xml;...
user avatar
  • 508
10 votes
Accepted

How can I create simple spheres using CSS?

I didn't love the answers and comments already provided; too much code for a simple sphere in html - css. You can simply do: <div class = "sphere">Test</div> The CSS: body { ...
user avatar
10 votes
Accepted

Changing icons or graphics based on user geographic location/language?

Is is possible? Yes. Technology-wise, you would do the same thing you'd do for language localisation (see this related SE question for the specificities). Localization refers to the adaptation of ...
user avatar
  • 26.1k
8 votes

How to convert between Android DP and CSS px?

I believe the full answer to your question can be found here: https://stackoverflow.com/questions/2025282/difference-between-px-dp-dip-and-sp-in-android To convert dp to px you need to take account ...
user avatar
  • 89
8 votes
Accepted

Make image vertically seamless?

Open image in Photoshop Go to Filters > Other > Offset Adjust vertical offset so that the image seam is in the middle of the image Use the liquify tool to seamlessly connect the ribbons together ...
user avatar
  • 464
8 votes

Email signature hell--How to include a logo image and have it stay sharp?

If I were you I'd abandon the Idea. Hires handling is the least of your problems, because there is simply no support within E-Mails. But the problems start earlier. Most email clients strip out ...
user avatar
  • 1,608
8 votes

How do you create a client website design mockup/image?

You have two main options as workflow (although as DA01 pointed out, these are just a few of many possible ones): Create the mockups in Photoshop or similar software, and then manually re-create them ...
user avatar
  • 26.1k
8 votes
Accepted

professional design of an extremely slim vertical menu

Consider using established UI patterns like the burger menu icon or an arrow to show that there is a draw or menu. The icon is enough for people to know there is navigation / settings to be clicked. ...
user avatar
8 votes
Accepted

Some sites have some Unicode characters show in multi-color without apparent CSS in Chrome V8 and FF: how is this done?

The rendering of UTF emojis is platform / vendor specific. There is no CSS or other tricks involved. Different vendors (Apple, Google, Microsoft, Mozilla, Samsung etc.) simply chose to provide ...
user avatar
7 votes
Accepted

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

Considering you are targeting only the latest browsers (at the moment of writing Chrome 37.x, Firefox 32.x, Internet Explorer 11 should cover main latest rendering engines), you can accomplish cross-...
user avatar
  • 317
7 votes
Accepted

CSS snap point design guidelines

The primary balance you have to be especially careful of when using a technique like scroll points is a balance of control. You don't want to unnecessarily take away or curb a user's control if you ...
user avatar
  • 12.9k
7 votes

Setting font-weight vs bold font-family in CSS, which is more correct?

Let's say we've loaded a Bold font variant like so: @font-face { font-family: 'Raleway Bold'; font-style: normal; font-weight: 700; src: url(path/to/font/raleway-bold.woff2) format('woff2'); }...
user avatar
  • 4,272
7 votes
Accepted

Inkscape: after bitmap trace, break shapes into own paths (for css animation)

Trace the bitmap, delete the bitmap, and select the trace. Path > Break Apart Select one of the eye circles, and hold down Shift while you select the head. Both paths are now selected. Path > ...
user avatar
  • 73.7k
6 votes

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

To load the Google or any other external fornts in SVG file, we have to add the style tag in defs tag as follows: <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" ...
user avatar
6 votes

Specify CSS class names on SVG paths using Illustrator

I just ran into this issue to and found the following solution (for Illustrator CC): Apply named "Graphical Styles" to the paths you want to name and export the SVG with Internal CSS. For example, a ...
user avatar
  • 161
6 votes

Responsive web design is based on screen resolution or screen size?

Responsive design is based on neither screen resolution nor screen size. Instead, responsive design is based on the content and how it's made which allows it to fit all sizes and resolutions. The ...
user avatar
  • 12.9k

Only top scored, non community-wiki answers of a minimum length are eligible