36
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 ...
- 13.3k
25
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 ...
- 4,367
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 ...
- 57.6k
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 ...
- 57.6k
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.
...
- 40.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 ...
- 1,057
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 <...
- 126
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 ...
- 26.3k
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 ...
- 26.3k
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.
...
- 1,853
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 ...
- 1,128
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 ...
- 13.3k
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');
}...
- 4,367
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 > ...
- 83.5k
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 ...
- 161
6
votes
Why does browser add bluish and brownish colors to a solid font color?
This is called subpixel rendering. The different colours are only visible because the image has been blown up. It will be easier to give an example of white on black.
Imagine a one pixel thick white ...
- 192
6
votes
Emulating global 3D light on a functional web page
The only ways to do this are to:
Use "actual" 3D rendering (like WebGL) for the UI which isn't usually recommended for UI because it's harder to make UIs with just WebGL, especially making ...
- 13.3k
5
votes
How do you create a client website design mockup/image?
For all the graphic designers who do web design too.
Web design is a specialized branch. It is not an "aditional" one. The same as print design for flat bed press, logo design, motion graphics, etc. ...
- 36.2k
5
votes
PSD to HTML/CSS ON PHP/MYSQL SCRIPT
I think you’re misunderstanding what PSD means.
PSD files are Photoshop files. They can be opened in Photoshop, and not much else. You cannot integrate them directly into web pages, since browsers ...
- 2,964
5
votes
Accepted
Does changing a "regular" font with font-weight in CSS make it actually bold? (i.e. another font file)
Web-fonts
There are 2 ways you can go about defining web-fonts with @font-face. The first, and probably most common (I believe most generators, Font Squirrel for example, will output this) is to ...
- 40.4k
5
votes
How can I use AdellePE Bold font in css?
First and foremost: any font name that has a space should be enclosed in either single quotes ' or double quotes " in CSS.
Be aware that a font you use this way in CSS will depend on the end user ...
- 25.1k
5
votes
Accepted
Cut square diagonally with inside content with CSS
You'll need to separate the content and triangle to different elements.
I would have a main container to define the box everything is going to sit in, use a pseudo-element to create the triangle, then ...
- 40.4k
5
votes
Website to extract fonts and colors from other sites
I don't have an information about that website, but I have found some plugins, that may you help find fonts and colors on websites.
Firefox addon, called Font Finder => LINK
You just need to click ...
- 603
4
votes
Accepted
Possible to create 3d rotating foods?
You're right that a CSS 3D transform probably isn't what you're after, since it's difficult to make anything except a flat plane rotate.
WebGL is becoming more common now, and there's a great ...
- 724
4
votes
Is programming a website for mobile first really necessary?
The origin of "mobile first"
The idea of "mobile first" in regards to Responsive Design comes from a time when the browsers for mobile devices were a lot less capable than what you would find on a ...
- 488
4
votes
Sketch Text background
I don't see the need for a plugin for that:
Create a text-layer (T) and set the width to auto.
Then add a rectangle (R), set a background color and give the rectangle the same width & height ...
- 383
4
votes
How to use Indian currency symbol in HTML?
You can use decimal or hexadecimal values such as below.
Make you your meta charset is correctly set (UTF-8 should do I guess)
Decimal: ₹
Hexadecimal: ₹
CSS code: \20B9
...
- 4,583
4
votes
font-family: "ITC Avant Garde Gothic" not working in CSS
First of all, there is no such thing as 0.1 pixels. A pixel is an undividable unit (except in some special cases). Some modern browsers do support sub-pixel rendering, especially for fonts, but this ...
- 4,367
4
votes
How to create a fade effect with CSS on background with an image on top of it?
To create that look you can set the image as the background of a div and then create a "black to clear to black" gradient in the div so it appears on top of the image.
.slideBanner{
background-image: ...
- 4,199
Only top scored, non community-wiki answers of a minimum length are eligible