css/less editor which shows colors - css

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

Related

Change console color in Mozilla Firefox Web Developer theme

Does anybody know how I can style the Firefox built-in Web Developer (devtools) theme? I am using the Dark theme, and need to make a small change in the way line numbers/column numbers are shown in the console output.
The default color, which is a shade of orange, to my eyes is totally unreadable.
I searched the web but all I get is stuff about theming of code that is displayed and analyzed by Web Developer.
Btw., I have to use the dark theme because the lighter themes are even more of a strain on my eyes.
I think this might be what you're looking for. It's the main CSS file for the dev tools. The dark theme is defined here and the used orange is defined here.
I'm not sure if that color can be changing without rebuilding Firefox or creating a browser extension for that.

gulp Icon-font task that creates emoji's, possible?

I'm trying to do a script that generates a font from SVG's, which works (more or less the same code as provided on https://www.npmjs.com/package/gulp-iconfont for usage)
So that's good so now my real question comes, is it possible to use that gulp package to generate two colored emoji's?, if so can i get a link to read more about it or a sample?
Font icons are one colour - because they are treated as text by the web browser. This is done so that CSS rules like color: red; can be applied.
You can make two-colour SVGs, and use them directly in the DOM with an <img> tag. However, support for older browsers (IE 8 and below) is limited. You'll need some kind of fallback (a PNG image works quite well).
You might consider making use of negative space to give the effect of having two colours. However, I can't find any examples (only did a quick search) of this being used within emojis.
I hope this helps.

mac osx css desktop background

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

Dojo's Support towards CSS3

Does Dojo have any work around to support CSS3
Gradient
Box shadow
Rounded Corner
cross browser support. if not what you guys will suggest with an app build on Dojo to acheive the above.
It does for most browsers except IE (AFAIK), using the claro theme makes it easy as it's built on top of the lesscss framework and mixins are provided to make gradiends, box-shadows and Rounded corners... See http://download.dojotoolkit.org/release-1.8.3/dojo-release-1.8.3/dijit/themes/themeTester.html?theme=claro to check what it looks like in the different browsers you target...
You can easily extend those lesscss mixins to add shims for IE with whatever tricks you need (PIE for example. See http://css3pie.com/)
To get you started quickly, have a look at these files :
dijit/themes/claro/variables.less : that's where you put your theme's custom variables (colors, etc.)
dijit/themes/claro/compile.js : that's the script you launch to recompile your theme after you made modifications to your .less files. This requires you install nodejs. It's documented in the README file in the same directory.
Of course, it's better not to touch any of the claro theme's files directly as they may be overriden if you update dojo, but the compile.js script is a good starting point for creating your own theme-building script based on your own needs and structure.

Which free CSS editor has most customizable options/settings for CSS code view formatting?

Which free CSS editor has most customizable options/settings for CSS code view formatting?
for Windows.
Should be able to set automatic css code to any of these type of formatting.
http://css-tricks.com/different-ways-to-format-css/
erm, it's CSS, its hardly the most complex of languages, its barely a language. Something like notepad++ (not the notepad built into windows btw) will be able to 'simplify' CSS. You may also find it handy to use Firefox or Chrome as you can edit bits of CSS LIVE, this means you can very quickly see if you the differences of overflow:auto or overflow:scrollfor example.

Resources