Is it possible to use pure CSS instead of an image as the desktop background?
simplfied example
body {
background: #000;
}
result: desktop background goes black
I don't think it's possible: first of all that CSS code should be interpreted by the OS itself, like a browser which I don't think it happens. The CSS code is parsed and interpreted by the browser. If you want black background using an automation script (i think that was the ideea behind your question) i suggest to create a script that can manipulate OS settings (e.g.: no background picture, solid color black). I'm not very good at OSX programming, but it may be some API's that you can use.
If you want to use black background (#000) go to:
System Preferences > Desktop & Screen Saver > (Under Apple Choose) Solid Colors > (The Click) Custom Color...
and there you can pick any solid color
as for using css inside html file i know it was perfectly possible on Microsoft Windows (i tried it i few years ago to put an html file as background and put the css inside it) but in Mac i've never seen any option to do that,
but it is possible with third party programs
Try Web Desktop i don't know if it works as it is very old
WebDesktop
you can also refer to this page to find your answer
Super User
Related
The regular background color of my CTA-button is #6BBD45 with #fff font color. However, when viewed on my iPhone in dark mode it becomes much darker (duh...) – background color #2d601d, font color #222126 – hence completely using its vivid, attention-drawing effect.
Is there a line in CSS that I could use to force Mailchimp to render the original colors? Ideally, I am looking for a solution that works across all devices and email clients.
I know that there are potential workarounds, such as creating visuals in Adobe XD or the like and then adding the button or even the entire section as an image file. However, I am looking for a sustainable solution that saves me time and troubles in the long run.
Thank you!
Unfortunately, this not something Mailchimp can do much about. Each email client with a dark mode has a different way to apply a forced dark mode. You didn't mention which email client nor which system you took your screenshot in so I'll go through the main three.
Apple Mail
In the case of Apple Mail, you can usually maintain your initial colors by adding the following to the <head> of your email:
<meta name="supported-color-schemes" content="light" />
<style>
:root {
color-scheme: light;
}
</style>
(The <meta> tag is for Apple Mail 12 while the CSS version is for newer versions.)
Apple Mail may still enforce its dark mode though. So what you can try it to set a slightly different shade of grey instead of pure white. For example, use #fffffe instead of #ffffff.
Outlook
On iOS, Android and on Outlook.com, the forced dark mode is applied by setting new color inline in CSS. The previous color is saved in custom proprietary data-ogsc or data-ogsb attributes. While you won't be able to force your text to white here, you can still try to tweak things by setting a different background-color to your button for example.
<style>
[data-ogsb] .button {
color: #5eba7d;
}
</style>
Gmail
In iOS and Android, Gmail forces its dark mode and there ain’t really much we can do about it. There’s a solution involving CSS Blend Modes. But it’s complex and only works with white text on any background. (Which would work in your case.)
Is there a css editor (for Windows) which would show colors? Or more generally, editor that would always display a 6-characters hexadecimal values with a color background.
e.g. like this:
div.myclass {
color: #ff8861; <- the background (or foreground, doesn't matter) of #ff8861 has orange color in the editor
}
[Edit 1]: not a wysiwyg, just a rich text editor showing colors and syntax
[Edit 2]: ideally, it should also support LESS syntax
Try Crunch! - It's a LESS CSS editor that color codes, compiles and compresses. It's written in Adobe Air, so it's cross-platform. http://crunchapp.net/
Update - Visual Studio 2012 has a fantastic LESS editor, as a plug-in that you can install easily via the extensions manager. I believe that in VS2012, the extension is provided by Microsoft, and integrates with DotLess, and gives you a variety of options for when your LESS file is compiled (at compile, build or run times).
If you're interested in using Visual Studio, ReSharper 6 (in beta when that blog post was written, but released now) will show a thick underline in the specified color.
If you want something lighter-weight (or less expensive) than Visual Studio, the same folks who wrote ReSharper also make standalone IDEs. WebStorm 3 (currently in beta) shows color chips in the editor gutter. (Released versions may do this too; I can't find screenshots online.) Here's a screenshot I took from the beta; note the little gold square:
I use Coda:
http://panic.com/coda/
It can display colors when editing CSS.
http://KineticWing.com can shows colors inside less files. It highlights text in color. I mean #fff will appear as white text. It can handle #fff and #ffffff patterns.
Can work on windows/linux
I was searching for that for a long time.
My solution is using Netbeans CSS Styles editor
in the top menu click on Window -> Web -> CSS Styles
From 2 years my only one truth editor become vs code - perfect for JavaScript, to visualization CSS colors plugin: COLORIZE
.idioma_es #logosFooter, .idioma_es #logosFooter li a {
background: url(../nImg/microsites/logos/logos_footer.png) no-repeat scroll left top transparent;
behavior: url(../../nJs/iepngfix.htc);
}
Result in Firefox:
Result in Internet Explorer 6 (Based on IE Tester for Windows):
the path of the .htc file is correct !
Any idea what i'm missing?
Don't test this with IETester. It's not completely reliable.
You should use a virtual machine, but you can quickly test a page with http://ipinfo.info/netrenderer/.
After Googling a little, I might have been a little unfair to IETester (though I still don't trust it).
http://www.my-debugbar.com/wiki/IETester/HomePage
Known problems and limitations :
CSS Filters are not working correctly in user mode : A solution is to launch IETester as admin user and CSS Filters will work.
You can try PIE - http://css3pie.com, that is working in IE6 too.
IE6 does not support the alpha channel for background images apart from in specific circumstances. There is no general fix, as there is for foreground images.
Look here: http://24ways.org/2007/supersleight-transparent-png-in-ie6
Check the first bit of text under 'The pitfalls' heading
I have a png with transparent background that doesn't work in IE 6. I have gotten round the problem by replacing the few img tags using that image with a DIV, and in CSS I use:
#div {filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png")}
the problem I have with this is that I then lose alt and title attributes which doesn't make the site very accessible. If I use the above CSS with an img tag I see the correct image but it has the big 'X' over it that IE shows when it can't display an image.
Any suggestions on how I can get IE to behave by showing the transparency correctly in an IMG tag?
One way you can continue to use the DIV tags, but still be accessable is to place a second SPAN tag within the DIV element and put the value for the ALT inside that, then style it to not be off the page... for example...
div.image {
filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src="./Images/img.png");
}
div.image span {
position : absolute;
top : -9999px;
}
Then the HTML would look like this...
<div class="image" title="The title for the image" >
<span>The ALT Text</span>
</div>
The title tag will still work on the DIV so you should be okay on that part.
I don't think you can simply hide the text (as in display:none;) because I think screen readers will respect that rule (as in not read it)
you could use javascript to enable transparency in ie6. there are many examples you can find. here is a link to one i have used.
http://jquery.andreaseberhard.de/pngFix/
another option is to use htc for ie6 - see here for solution:
http://www.twinhelix.com/css/iepngfix/
only requires an extra line added to your css file - sorry still may require javascript - not too sure.
I used a small javascript tool for solving this problem a couple of month ago. It's named Unit PNG FIX and it's very easy to use.
While someone here gave a JS implementation for this, this solution will be also executed for FF and other browsers. There are better ideas, for example using MS technology :)
One of them uses something called HTC (hypertext component, if I am not mistaking). It's something like... a CSS for behavior. It's really an XML file which lets you attach some functions to a CSS selector. Again, an MS only technology.
In short, visit this site:
http://www.twinhelix.com/css/iepngfix/
I am using this withing a drupal module and I am very happy. If you are wondering, this is the module: http://drupal.org/project/pngbehave
Note: this does not work under IE tester: http://www.my-debugbar.com/wiki/IETester/HomePage
I am using a Windows 2000 with IE6 (running under vmware, if you have to know) to test IE6 sites.
IE6 supports PNG-8 transparency, but not PNG-24. One of my favorite tools to "fix" IE6 is IE8.js.
I'm trying to use the MusiSync font to embed a sharp and flat symbol in a line of text. In order to keep these symbols from being tiny I have to make their point size twice the size of the rest of the text. Unfortunately, this messes up the line height in Internet Explorer and I cannot find a way to control it. You can download the MusiSync font at:
http://www.icogitate.com/~ergosum/fonts/musicfonts.htm
My attempt to use this font in a web page can be found at:
http://www.williamsportwebdeveloper.com/MusiSync.htm
I opened up Photoshop and used the font you link to. There is a huge amount of white-space above each glyph in the font itself. The font is poorly designed.
If you set your style to this, you'll see the issue:
.style2 {
font-family: MusiSync;
font-size: 24pt;
border:1px solid #000000;
}
The problem appears in FireFiox 3 as well, its just manifesting itself a little differently.
You may be able to hack your way around this somehow, but it's going to be ugly. Unless you're using a lot of different font sizes, you may be better of using images.
Seeing that you are trying to use a very uncommon font, why not implement sIFR?
It will (possibly) solve some of your line height issues as well.
Read up here.
sIFR is an excellent choice for non-standard fonts.
You embed the font in a flash movie (don't worry most of the work is done for you) and add a bit of code to your page and the sIFR javascript will replace classes/id/tags etc with a flash movie containing the text/font that you're aiming for:
From http://www.mikeindustries.com/blog/sifr/
A normal (X)HTML page is loaded into the browser.
A javascript function is run which first checks that Flash is installed and then looks for whatever tags, ids, or classes you designate.
If Flash isn’t installed (or obviously if javascript is turned off), the (X)HTML page displays as normal and nothing further occurs. If Flash is installed, javascript traverses through the source of your page measuring each element you’ve designated as something you’d like “sIFRed”.
Once measured, the script creates Flash movies of the same dimensions and overlays them on top of the original elements, pumping the original browser text in as a Flash variable.
Actionscript inside of each Flash file then draws that text in your chosen typeface at a 6 point size and scales it up until it fits snugly inside the Flash movie.
An excellent cross browser platform indepent solution for non-standard fonts.