I want to make a green button. I did this:
self.detectButton.setStyleSheet("background: #00ff00")
Here it was before the styling:
And after:
As you can see, the color changed, but the rounded corners were lost.
What's the proper way to style the color so the corners are not lost?
Secondarily, is there any way to get a theme-generic "ok" button color? This won't look the same on other platforms.
Do not use stylesheets if you want completely consistent results on all platforms. The reasons for this are explained in this answer.
If you only need to set the background colour, use the widget's palette:
palette = self.detectButton.palette()
palette.setColor(QtGui.QPalette.Button, QtGui.QColor('#00ff00'))
self.detectButton.setPalette(palette)
It seems unlikely that there's a systematic way to generate colours that work equally well on all platforms. Probably the best you can do is try to tweak one of the system colours that are accessible via the palette color roles.
EDIT:
It seems I was wrong to assume that the palette method is a reliable cross-platform solution. The Qt docs for QPalette has the following:
Warning: Some styles do not use the palette for all drawing, for
instance, if they make use of native theme engines. This is the case
for both the Windows XP, Windows Vista, and the OS X styles.
So it seems there isn't even a completely consistent, cross-platform way to do something as simple as changing the background colour.
I'm not familiar with Python, but I am assuming it removed all the other styles when you manually set that one.
I wonder if something like the following would work?
self.detectButton.setStyleSheet("background: #00ff00; border:1px solid #ccc; border-radius: 3px;")
It may have different syntax for multiple styles though.
Related
I am working on a project where we have designers that work in Adobe RGB and are used to seeing the more vibrant colors from that spectrum in Illustrator. However we have been building an application that will allow them to do their work in a web browser using a THREE JS 3D workspace.
Because we have been creating the color swatches using CSS background color and applying RGBA to the meshes in THREE we have been displaying everything in sRGB, and now the designers are complaining the colors don't seem right in the browser.
I know that current versions of Chrome support color management for images but I can't find any information about CSS or Three JS. Does anyone know if it's even possible to control the color profiles for these areas, or are we just going to have to live with sRGB?
We have the very same problem, i found no way to control the CSS Colors. I think this will maybe change with the mediaQuery keyword, but I did also not found out if it will affect CSS colors.
http://furbo.org/color/ResponsiveColor/
We only need a special set of colors so now we store them in a texture and make a lookup, but I guess this is no solution for you.
Is your destination the web? Then Adobe RGB is not presently supported, and is not recommended.
The Standard for the Web is sRGB
The W3 defined the standard for web content as sRGB. In the future, CSS4 will support other colorspaces. Right now? Stick with sRGB.
Chrome, and most browsers do not support any color management for CSS. Safari is the only one I know that does, at least without tweaking some internal experimental options on the others.
When possible, I suggest working in the destination space (though possibly working at a higher bit depth) then there will not be these kinds of "surprises". In the interim, you might try converting the existing work from AdobeRGB to sRGB using "perceptual intent" or "relative colorimetric".
Also, you can find the docs for CSS here:
https://www.w3.org/TR/css3-roadmap/
It is not possible now, but it will be possible in the future when draft specification from W3C will come into browsers... (https://drafts.csswg.org/css-color/)
It is now already possible in latest Safari of MacOS BigSur. There is even a special test here.
Console in Safari also has Color managed color picker.
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
I need to draw a custom shape and fill it with a solid colour or a pattern. I have already achieved the shape and been able to change the fill colour with a 2d html5 canvas and javascript.
However I abandoned the canvas approach as it's a web app for phones and I found have several canvases on one page ran really slowly on older phones in particular.
Can anyone advise on an alternative approach that would work, keeping in mind speed is important? I have been considering:
Drawing with css, but it seems like a lot of markup and messing around to create a relatively simple shape.
SVG - didn't know this existed until last night. This example http://www.w3schools.com/svg/tryit.asp?filename=trysvg_polygon4 seems a lot like canvas, does it have any performance implications?
Overlay some sort of webkit css mask, like this http://www.webkit.org/blog/181/css-masks/ but with a background colour or pattern. Seems like it might be problematic if the page has a background image not a solid colour.
Apologies for the long winded post, I just don't know the best approach to this after canvas proved to be out of the question. I would love to be pointed in the right direction.
Thanks
Check out Raphaël, it's based on SVG and is supported by the following browsers:
Firefox 3.0+, Safari 3.0+, Chrome 5.0+, Opera 9.5+ and Internet Explorer 6.0+.
http://raphaeljs.com/
With SVG you can use CSS to style the fill, which makes it really easy to set the fill to either a pattern or a solid color.
Here's an example of patterns in svg.
So I need some custom colors on a layout, but I'm looking for a better way of doing it other than just slapping a giant picture with (background: url(something.jpg)) in the layout.
Mostly I'm thinking of getting a color palette (i.e. from Adobe Kuler, colourlovers, etc.), getting a 5x5 sample of each color and sticking them in an array for CSS sprites or just as separate files and accessing them through: .color-one {transparent url(./one.gif) repeat} and just reusing that whenever I'd like to use the color.
Are there any drawbacks to doing it this way? And if there are should I just stick with web-safe colors or is there a better way of doing this?
You don't need graphics to represent background colors. You are going the long way around if you use images for that. Just use colors, as graphicsdivine suggests.
Only use background images if you need to do gradients and the like. That's really where they shine.
As to your second question, no, you don't need to stick with "web-safe" colors anymore. If someone in 2010 still only can display 256 colors, well, your site won't be their biggest problem.
.color-one{background-color: #f00}
.color-two{background-color: #0f0}
You have to set the colors as background-color anyway to serve readers which don't load images. So I see no use in those images.
And remember: the smaller an image is the more has the browser to compute to calculate all positions. Repeated background images should not be smaller than 20×20px.
Why don't set background-color?
(And your suggestion wouldn't work with sprites, the renderer will also use the other parts of the image)
Mac OSX Finder has a search feature that darkens everything but the part that matches.
(source: justaddwater.dk)
Is there a way to emulate it via CSS? I was thinking about adding a semi-transparent black div with opacity 50. But how then do I cut a hole in it?? and possibly make the edge fuzzy?
Any suggestions?
Check out the Expose jquery plugin from the jQuery TOOLS collection. I think it will accomplish exactly what you are looking for. They even have a demo of styling the mask with a background image.
Due to the irregular shapes, you're probably looking for an image. And due to the need for varying levels of transparency, you probably want a .png that would just be stuck over the selected item.
Good question, one way would be to have a "selected" png that had the glowing circle cover the selected one, and a different just dark png cover everything else.
EDIT: But you would probably want to use a library like jquery rather than coding everything from scrath your self, as to not reinvent the wheel and save TONS of time :D
maybe a PNG image will work, a square with hole