Skip to main content
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 ...
Zach Saucier's user avatar
  • 13.4k
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 ...
joojaa's user avatar
  • 58.1k
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. ...
Cai's user avatar
  • 40.7k
12 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 <...
Josephus Paye's 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 ...
KlaasNotFound's user avatar
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'); }...
PieBie's user avatar
  • 4,386
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 ...
Zach Saucier's user avatar
  • 13.4k
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 > ...
Billy Kerr's user avatar
  • 87.2k
6 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 ...
Cai's user avatar
  • 40.7k
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 ...
goldins's user avatar
  • 161
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 ...
Zach Saucier's user avatar
  • 13.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 ...
Vincent's user avatar
  • 25.3k
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 ...
Cai's user avatar
  • 40.7k
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 ...
Sylwester Pilarz's user avatar
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 ...
cimmanon's user avatar
  • 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 ...
ofhouse's user avatar
  • 403
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: &#8377; Hexadecimal: &#x20B9; CSS code: \20B9 ...
Vinny's user avatar
  • 4,593
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 ...
PieBie's user avatar
  • 4,386
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: ...
Webster's user avatar
  • 4,189
4 votes

How to create a fade effect with CSS on background with an image on top of it?

You can actually chain backgrounds in CSS, separated by a comma. First one is the lowest, second one is on top of that, et. So all you need to do is set the image first and then the gradient. You can ...
PieBie's user avatar
  • 4,386
4 votes

Website to extract fonts and colors from other sites

A colleague of mine just found the Page. hurray It's: http://stylifyme.com/ You can also see the Project here: https://github.com/micmro/Stylify-Me
LilliFee's user avatar
4 votes

Why would I ever NOT use percentage for sizes?

I am aware of responsive design, but that seems to me to be saying that there are X different screen sizes, then proceeding to use px on each of them, having the same scaling problems on X different ...
Chris Haas's user avatar
4 votes
Accepted

What process has been used to derive these "tints"?

A tint of an RGB colour would be calculated by merging it with white, at various opacities. There is a formula for this, courtesy of User: JBE on Stack Overflow, and this answer here. newR = currentR +...
Billy Kerr's user avatar
  • 87.2k
4 votes

Use SVG `transform` doesn't work in `<style>` on Inkscape

As far as I know, Inkscape's transform attribute is not held within the <style> tag, but is appended to the SVG element directly itself. It doesn't seem to be possible to see the effect of a CSS ...
Billy Kerr's user avatar
  • 87.2k
3 votes
Accepted

Using Google Fonts with only CSS access?

If you're on Google Fonts and you select any font, under "Embed" it gives you two ways of importing it: "Standard" (which loads it in the HTML via a <link /> tag), and "@import". You want to use ...
Zach Saucier's user avatar
  • 13.4k
3 votes
Accepted

Best way to save JPG images to scale up in web (Css) without losing quality in Photoshop?

There is no way to scale up an image without losing quality. In that case, you should scale your image down. So instead of saving it as 300x300, save it as 600x600. Search for good optimization / ...
Luciano's user avatar
  • 8,045
3 votes
Accepted

Should Widgets Follow the Vertical Rhythm?

They should. Theres no logical reason to exclude anything from your vertical rhythm. Traditionally vertical rhythm isn't something that has been given much importance in web design (nowhere near as ...
Cai's user avatar
  • 40.7k
3 votes
Accepted

CSS: Is there any way to select an item to be hidden besides tag, class, or ID?

You can use attributes as selectors in CSS. [attr] Selects an element with an attribute name of attr. [attr=value] Selects an element with an attribute name of attr and whose value is exactly "value"...
Cai's user avatar
  • 40.7k
3 votes

Is it acceptable as a web developer to know very elementary JavaScript and rely on frameworks such as Materialize?

As a web developer you really should know at least the basics of JavaScript. You can achieve a lot of visual effects purely with CSS but there is a lot you can do with JavaScript that simply can't be ...
Cai's user avatar
  • 40.7k

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