When creating graphics in GIMP I often make several versions of graphics (like game characters with different outfits) using indexed color mode in the .png file where I develop the images so I can change the appearance of the graphics by just changing out the color values in the palette.
Now imagine being able to use this indexed color map concept at runtime.
I was wondering if CSS3 may contain functionality for real-time indexed color mapping. One where you can change the appearance of a displayed image on the fly by simply changing the color values in an indexed palette.
Right now I am using Mojave's version of Safari on my macbook.
Related
Is it possible to use Foundation Icon Fonts or Font Awesome icons as the markers on the map for MapboxGL, basically embedding HTML like
"<i class="fi-marker"></i>"
into the "marker-symbol" field? Also, is there a "icon-color" or "marker-color" field for changing the color of the marker in that case? That would make it very easy to customize the color of the marker.
For mapboxgl's own marker symbols, I couldn't find a way to custom color them, I've seen "default_marker" (blue) and "secondary_marker" (red), but I want to use more colors to distinguish between certain locations.
It is not currently possible to create HTML markers on a GL map. The map is rendered in WebGL and there is no easy way to embed HTML within WebGL.
You can use custom icons in symbol layers but they cannot be recolored as if by icon-color or marker-color. You will need to generate all colored images ahead of time.
CSS2 had a nice way to implement system desktop colors. However in the link there is a note that this is deprecated and
If you want to emulate the look of a user interface related element or
control, please use the ‘appearance’ property instead of attempting to
mimic a user interface element through a combination of system colors.
But from the example the appearance property is useful to render form elements like checkbox or button.
How am I supposed to use appearance to emulate say table using system colors? To omit the color specification works for borders, but not for backgrounds.
Sometimes I'd like to create simple webs that displays dark if the user has dark system desktop settings. It can be done specifying no color at all in CSS. But If I want say slightly darker (or lighter on dark desktops) background on headings, how to do it in CSS3? (In CSS2 I could use i.e. ButtonFace color.)
Supposing that I have a polygon image PNG file like this (No border, the shape is filled with one color, no gradient, and background of the image is transparent) http://www.enchantedlearning.com/crafts/books/shapes/gifs/4.GIF
I'm thinking of using that polygon image as a background image and it will be changed (to another image with different color) when the user hovers on it.
But I also want the color of the background image to be customizable. So, I'm thinking if there is any possibility to draw the polygon instead of using image files so that the color will be customizable (I don't think it's a good idea to create one file for one color and so on so forth).
What is the best solution for this case? Using png or drawing it by css?
Is there a tool/website to convert my png to css code?
Make the white areas transparent (colour to alpha in GIMP)
Convert the image to a data URI (it's optional but it will make your site load faster)
Use the url in (2) as the background-image and use any background-color you want.
Use this to convert an image: http://codepen.io/blazeeboy/pen/bCaLE
I think it's much better to use converted images because browsers load them faster.
I think CSS is the wrong thing to use for this. Yes, it is possible to create a lot of shapes using CSS, but there are limitations, and in any case, drawing shapes with CSS is a bit of a hack, even when it's just a simple triangle.
Rather than CSS, I would suggest SVG is the appropriate tools for this job.
SVG is a graphics format for vector graphics that can be embedded in a site, and can be created or altered via Javascript directly within the site. Changing the colour and shape of a simple polygon is about as easy as it gets with SVG.
The other advantage of using SVG is that because it's a vector graphic, it's scalable, so you could display it at any size.
The only down-side of SVG is that it isn't supported by old versions of IE (IE8 and earlier). However, these browsers do support an alternative language called VML, and several good Javascript libraries exist which will work with either, thus allowing you complete cross-browser compatibility. The one I'd recommend is Raphael.js.
So a tiny (and very easy) bit of Javascript code instead of a very messy bit of CSS. Seems like a winner to me.
Maybe u could use this: https://javier.xyz/img2css/, the principle is to use box-shadow,it's fine if the picture is small, so u should consider performance
Overview
I'm looking for advice / solutions on standardizing color profiles on comps so colors of HTML/CSS gradients/blends match effects achieved in a comp. I often get PSDs using the sRGB color profile so when I color pick something to recreate a gradient / icon / or background the HEX color and resulting CSS/HTML gradient does not match the original sRGB gradient provided in the comp. Typically I just discard the embedded color profile for a Monitor RGB color profile that better matches PSD colors to end result CSS colors. Here's an example showing differences between color profiles.
Details
So here's the predicament: A designer wants to standardize PSDs to use an embedded sRGB color profile because exported images (JPEG / PNG) retain that sRGB color profile to display correctly when loaded in a browser. So photos / textures / things that I can't recreate in CSS will export as JPEG/PNG with the better sRGB profile (which is an understandable request).
As a front-end developer I often recreate elements displayed in a comp using CSS and HTML (no images) and this requires me to match HEX colors properly between what's in the PSD and what's rendered on the website. So, I would prefer to standardize with a Monitor RGB color profile so that everyone uses something closer to what's actually rendered in the browser.
Just curious how everyone else approaches this problem? There's often cases where I use a mixture of CSS and PNGs to achieve an effect (especially effects that need to change dynamically (size/hue/shading...) so exporting an image with sRGB and overlaying it with CSS gradients / shadows ends up being a mixture of sRGB / Monitor RBG and hence subtly different from the comp.
Answer Format
Hopefully I've properly asked this question - suitable answers would just give a perspective on how you deal with the problem - OR (better) if theres an SCSS sRGB() function or some other algorithm to convert an RGB / HEX color to sRGB then I will throw it into a SASS mixin.
Here's how we ensure color consistency in Photoshop: correct color-picking and consistency in saved-for-web images.
Setting Up Photoshop Color Space
The first thing we all have to do is to ensure we are working under the correct color profiles. To do this follow these steps:
Go to Edit > Color Settings or Shift + Command + K or Shift + Control + K in windows.
From the Settings drop down select North America Web/Internet
Commit your changes by hitting OK.
Go to View > Proof Setup and select Internet Standard RGB (sRGB)
Hit Command + Y or Control + Y in windows to enable Proof Colors, alternatively you can just go to View > Proof Colors
Exporting (Save for Web)
When exporting via Save for Web ensure that Convert to sRGB is checked.
You are done, you should now enjoy color accuracy across all of your files and in HTML and images will be ensured to display consistently across devices and browsers.
I have a multi-platform Qt application with a custom palette that we have already set up to produce the look that we want. The palette was set on the top level widget and so this was inherited by all of the child widgets.
I then wanted to dynamically change the text colour of some QPushButtons. Searching around for the best way to do this, I began reading about Style Sheets which I didn't know that much about previously. These seemed to be a good option for changing the look of the push buttons and they did this. However, as soon as I set the text colour using a style sheet, the widget palette jumped to the default. It soon became obvious that style sheets are not compatible with custom palettes and it wasn't possible to mix the two. Most of the info that I found suggested that style sheets should be used rather than custom palettes because, among other things, style sheets offer guarantees across platforms and looks which palette fiddling does not.
From this, it seemed like a good idea to convert my custom palette into a style sheet and set it on the top level widget. Then I would easily be able to change just some parameters of certain child widgets using sub-style-sheets. The problem is that the palette contains many colours that we have set that do not appear to have a style sheet equivalent. Eg, Light, Midlight and Dark. Without being able to set these colours I wasn't able to produce the same look using style sheets as I previously had with the customised palette.
I would like to know if there is a simple way to convert a customised palette into a style sheet or whether there is some documentation to describe the equivalent style sheet settings for each palette colour. I have done searches on google, stackoverflow and the Qt reference docs but have come up short.
Thanks for any info.
ps. I solved my original problem by dynamically modifying the ButtonText attribute of the palette for the QPushButtons. But I would still rather use style sheets instead if possible without changing the main look of my application.
QColor.name() is the hex string for that color. If you want to convert to a stylesheet, just run through all the roles in your palette and print the .name() of that color. You can then find the corresponding stylesheet properties and pseudo states to set the hex colors to.
One thing you may find frustrating from switching from palettes to stylesheets is that CSS
does not allow the use of variables, so you'll have to use the hex string everywhere, rather than just defining named colors and using those.