Here is example it's only forking in html and not in css
How to fix this problem?
It's dificult to find information on internet because i am the only one who have this problem
In your case, the image shows you are outside of a css ruleset so there are many fewer emmet abbreviations that will work there. Your image shows what happens with a prefix of pos - it suggests things like :placeholder-shown, etc. that do appear as part of a css selector. If you are expecting the rest of the emmet abbreviations, like bg for background-color, use it IN a ruleset.
There seems to be some confusion from commenters (some since deleted) that emmet does not work in a css file - it does and has for some time.
i know quite quell processing.org, in java. and i like it. from a little bit i have done some work with html, javascript, css, jquery, d3.js. i wan surprised how nicly and easily i can style my stuffs: with css. and i incredibly love it. do the code, and style the visual output. forget bad headache trying to code some nice draw elements, manage different color, font, margin and floats between gui elements.
now, just for give it a try, i'm figure how to syle a processing.org font?
ps i'm using processing.js from pure js code as described here
Declare your own css #font-face rule, with some font-family name like "ABCXYZ" and then in the sketch code use a var pfont = createFont("ABCXYZ",[size]); call to set up your font and then apply it like any other using textFont(pfont)
I want to put a red rectangular <div> element over my webpage so that it would look not only transparent, but also like blended in Photoshop’s Multiply mode.
The <div> would have position: fixed, so the content below it would change quickly.
Is that possible with any HTML5 / CSS3 / canvas / SVG trick?
I have created a separate, lightweight, open-source library for perform Photoshop-style blend modes from one HTML Canvas context to another: context-blender. Here's the sample usage:
// Might be an 'offscreen' canvas
var over = someCanvas.getContext('2d');
var under = anotherCanvas.getContext('2d');
over.blendOnto( under, 'screen', {destX:30,destY:15} );
See the README for more information, including the currently-supported blend modes.
You could use this to perform multiply from one canvas to another, but not over standard HTML elements.
No (not natively) but it's coming soon: http://blogs.adobe.com/webplatform/2012/04/04/bringing-blending-to-the-web/
You can also look at this demo: http://media.chikuyonok.ru/canvas-blending/ to see how to do this with canvas.
Check the source for blending modes' formulae and how to apply them (formulae are much more readable than in pixastic or context-blender).
This isn't HTML5, but it's as close as I can find for what you're asking.
Javascript blending modes (OpenGL).
I don't think "blend modes" like Photoshop could be emulated with just pure HTML, unless the language took a sharp turn in another direction. But it would be great to see some easier way of doing this.
I am also very interested in doing that. Many layouts that I coded for visual designers could have used that. Aside from the other posts in this thread, there is a way to do this, currently only in Firefox 4, without using OpenGl or Canvas. It's trough the use of SVG filters. Aparrently it's on nighties from Webkit and Chrome also, but I couldn't see anything working yet.
Here are some demos and explanations:
(demo) http://people.mozilla.org/~roc/filter.xhtml
https://developer.mozilla.org/en/applying_svg_effects_to_html_content
https://developer.mozilla.org/web-tech/2008/09/15/svg-effects-for-html-content/
http://weblogs.mozillazine.org/roc/archives/2008/06/applying_svg_ef.html
IMHO something anyware close to blend modes are too much hard to achieve right now. It's very hard to find any references on feConvolveMatrix, feSpecularLighting, or feColorMatrix, and the examples are just impossible to figure out for me. They could work but I don't know how.
I wish something like EffectGames suggested:
div.sprite {
position: absolute;
z-index: 2;
composite: add;
}
This would be a way better approach. Maybe some ninja there skiled in mathematics could make us a lib to do that.
EDIT: There is an easier SVG spec to do exactly blend modes. But no browser that I tested have this working (FF4, IE9, Opera11, Webkit Nightly): http://dev.w3.org/SVG/modules/compositing/master/SVGCompositingPrimer.html - But I also don't know if this will be possible to use in HTML-DOM elements.
This is the closest I have seen, and yes, all assets have to be in the canvas. Note that Internet Explorer starts supporting canvas in version 9 which is not out yet, so if you have to support IE<9 you'll have to use a workaround.
It's landed in Chrome Canary so should reach release soon. http://blogs.adobe.com/webplatform/2013/04/23/all-blend-modes-for-css-fragment-shaders-have-landed/
You can already use it with just simple CSS (no Canvas). Example:
mix-blend-mode: 'multiply'
Internet Explorer may not support it, but the other browsers do.
https://developer.mozilla.org/en-US/docs/Web/CSS/mix-blend-mode
Depending on the images involved and the exact effect you are after, you might be able to do some creative layering of images and CSS gradients to achieve the desired affect:
http://jonathonhill.net/2012-04-23/blending-css-gradients-like-photoshop/
I have implemented most popular blend modes known from gimp/photoshop using canvas in http://canvasquery.com/ however it is not suitable for relatime.
This will change with introduction of native blend modes in canvas
https://dvcs.w3.org/hg/FXTF/rawfile/tip/compositing/index.html#blendingseparable
In my .gwt.xml file I have uncommented the following:
<inherits name='com.google.gwt.user.theme.chrome.Chrome'/>
When I run my application I do not see any stylesheet applied. Using Firefox there are a large number of warnings associated with Chrome.css. These mostly say that it doesn't recognize 'zoom' and 'cursor' so it is dropping the declaration. This seems to indicate that it is trying to use the theme but I see no evidence of it. The background remains white and the fonts seem to be the defaults.
Is there another step I need to take for stylesheets to be applied?
Stupid mistake. I tried the dark theme which is more dramatic and discovered they were being applied. They Chrome and Standard just don't look like much on the standard widgets.
Is there any way to find unused CSS in a website?
I'm trying to clean up a project I just inherited.
Dust-me Selectors is a Firefox plugin that finds unused selectors.
I just ran into this and remembered your question: http://github.com/geuis/helium-css
Chrome 59 has built-in coverage display for CSS and JavaScript since 2017-04: https://developers.google.com/web/updates/2017/04/devtools-release-notes#coverage
You can enable it by opening the dev tools, then the command menu (Cmd+Shift+P on Mac or Ctrl+Shift+P on Windows and Linux), and then type "show coverage".
There is so much that can be said about best-practice methods for CSS. I'll try to stick to the main points.
Use a CSS reset.
Try to remove really general CSS statements like h1 {} and #container em {}. You're much better off using h1.section-title and #container em.important {}, because that way if you choose to use h1 or em a different way somewhere in your document, you don't have to worry about overriding any existing code.
Don't be too specific in your CSS selectors if you don't have to. You really only need to have high degrees of specificity if being in a specific section changes how the element is going to be displayed. Otherwise, to make your code for your block class reusable, #container .content .block ... could be reduced to .block ... in many cases.
Look for commonalities in your CSS and see if you can create reusable classes. If you have similar blocks class="favorites" and class="popular", turn it into class="block block-favorites" and class="block block-popular", and put the commonalities into .block.
Get in the habit of making areas in your CSS have an auto-width (can be done implicitly) so that they grow to the width of your containers. This makes it incredibly easier to move sections from a narrow portion of your website to a wide portion of your website without having to change any code.
Commenting your code and breaking it down into sections usually helps make code more readable.
You'd be surprised how much cleaner your code looks when you implement more powerful CSS selectors. Most of them are cross-browser compatible (Internet Explorer 7 and later).
Some valuable resources: When can I use... - Quirks Mode on CSS Selectors - w3 on CSS Selectors
Answer moved from:
Best Practices for Cleaning up Existing CSS/unused styles
To add to #cweiske suggestion, Google Chrome has a no nonsense way of uncovering where your "unused" and "never will be used" selectors are.
I have posted a screen capture of how to launch the CSS Coverage tool with step by step markers.
It is a reliable way to figure out where you really are not using stuff.