I have a button in javafx and its pseudoclass .button:pressed is supposed to have a drop and an inner shadow. What I'm trying is
.button:pressed {
-fx-effect: dropshadow( gaussian , rgba(0,0,0,0.7) , 10,0,0,1 );
-fx-effect: innershadow( gaussian , rgba(0,0,0,0.7) , 20,0,0,0 );
}
However, only the second effect seems to be applied to the button (actually, the effect whichever comes second will be applied). I've looked here: http://www.canoo.com/blog/2012/07/10/javafx-recipes-css-vs-code/?lang=de, but I don't see a difference to my approach.
Is there a way to apply two shadows to one button?
Thank you.
It's currently not possible in Java 7 nor in Java 8 to chain effects or apply multiple effects via CSS. See the Oracle CSS Documentation.
The site you reference mentions it as well:
Well at the moment it is not possible to chain effects in CSS which
means we only could apply one of the needed effects which would lead
to the following result for the code above…
Can't mix types (drop & inner), not even comma separated... I've tried, sorry.
Im not sure if I get the Key of your Question.
The commants looks obviously right ...
Might it depends on the given dropshadow parameters.
To understand the parameters you can use the oracle-documentation.
To find another rgba color you can use these rgba color chooser tool.
Even If I havent a directly awnser for you, I hope the links help you to get a better overview about the css comment dropshadow.
cheerse
Tobi
Related
i was looking for a way to display plain text ( 2d or 3d ) in a threeJS Scene , and apply some css effects to them , i looked around for a while and i came across this . probably what i wanted ..
now the problem is that when i aplly a animate.css ( well knows css animation library ) class to html element , the position of my CSS3D Object is reseted and fliped ( can't explain why )
'http://jsfiddle.net/kd9Tc/4/'
note :
-i think this code example illustrates pretty well what i am trying to do , apply css text effects in webGL Scene ( i need all the camera movement and tweening ) .
i tried THREE.TextGeometry first , but i wanted the text to be in a language other than english and converting the font properly let to nowhere ( displayd ' ?????? ' in all my tests ) and beside that , i've been using css transforms for a while now and i'm pretty comfortable with them , and working with them is much easier for me .
overall the main reason i'm using threeJS is camera movement capability .
i'm glad that i used threeJS beacuse it open's the door to many other features as well , but yet , i'm not sure i;m using ther right tool here :-?
thanks
When you apply a CSS transform on an element drawn by ThreeJS' CSS3DRenderer, it overrides an initial translation and rotation originally set by the renderer itself.
After looking at your fiddle and then looking at the CSS3DRenderer in GitHub I can assess that the renderer does some toying around with the CSS translation and rotation of the elements within, before drawing them, in order to show what you'd expect out of the box (versus what's logical taking into account the way TheeJS handles its coordinates).
Here are the specific lines which I'm referring to. (ThreeJS GitHub)
In order to apply CSS transforms effectively across CSS3DRenderer be sure to not override the translation and rotation transforms. Simply put, take the following into account as the relative origin to every transform:
translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg)
For example this:
-webkit-transform: none;
transform: none;
Would become this:
-webkit-transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
transform: translate3d(-50%, -50%, 0) rotateX(180deg) rotateY(180deg);
Here's a modified version of your fiddle which now works somewhat as expected.
(I didn't take the time to correct the X-axis translates, but you should get the gist of what I'm saying.)
Another way of working around this problem would be to somehow extend the CSS3DRenderer so that it corrects the rotate transforms on the fly instead of only at instantiation.
Why is the renderer doing this?
My best guess is that when the renderer was coded, they were expecting transforms to be applied via JavaScript and not CSS.
If you're truly more comfortable with CSS transforms I'd say go right ahead with what you are using. On the other hand if you feel a little more adventurous I'd suggest using TweenJS for animations with ThreeJS. They play quite well together. I use them on my website (link on my profile).
P.S.
#KianP Kudos on the fiddle you've put up. I can honestly say you are working on some pretty interesting stuff and you're using a set of tools that I wouldn't have thought of using together (Animate.css and ThreeJS) but seem to work quite well (Taking into account you correct the positioning as explained above).
So, I'm looking to do a background image in CSS using a sprite sheet. And just to be clear, no I am not going for this effect. I have a full sprite sheet, and I would like to take a 16px by 16px square on the sheet and set it as the background that will be repeated.
At some point in the future, I hope to be able to do this via spacial dimensions using media fragments in the URL parameter, but since this isn't supported yet I'm looking for an alternative. Is there any way to get this same effect via modern CSS techniques or hacks?
Some notes:
I don't need to support old browsers, just the latest FF or Chrome will do.
I would prefer pure CSS solutions. I can and will create a JS/Canvas solution with data:URI's if I need to but considering how many elements I may need this for, I would prefer to not have to do that if I can get better results via pure CSS.
Need to repeat in both x and y directions
Looking for solution that takes advantage of a single image in memory/cache so that I don't have to load the sprite-sheet for every sprite I want to insert
Here's a pure CSS solution that works in Firefox only, but seems to meet all your requirements.
body{ background-image: -moz-image-rect(
url('http://placekitten.com/500/500'),
0,100,100,0
); }
Example at http://jsfiddle.net/47CMr/2/
There is only one method that falls under your conditions (the hardest one is the need to repeat): using the border-image.
The dabblet with the demo: http://dabblet.com/gist/1635890
The point is: you can mark the part that you want to use using the border-image-slice part of the border-image property. The syntax is a bit tricky, but using it you could create different repeating paterns from border-images. Also, when the needed parts are not on the edge, or when you need to repeat the image both on X and Y, you'll need a clip property, so you'll need a block to be absolute positioned. All these things work even in Opera.
But, there is one bad, bad thing: the rendering of central part of border-image is a kelly hell: there is a difference not only between webkit and mozilla, but even between the Safari and Chrome, so I added a lot of hacks there.
In conclusion: the goal can be achieved, but with a hell of a hacks.
So, I'd advice you to use the data:uri, 'cause there are no other ways to do this in webkits and Fx both (in Fx-only you could use the -moz-image-rect as mentioned above).
I noticed that every browser renders the border-style: inset; property differently, so I had two questions:
Why do the browsers render it differently? How can there be so many different algorithms for this? Most of all, some browsers look wrong with it!
Since I can't rely on the inset attribute working, I was wondering what the proper "algorithm" is? I typically go 16 lighter on top/left and 16 darker on bottom/right (ie. #666666 is the background, so #767676 is the top/left and #565656 is the bottom/right)
I need to know what to use (generally speaking) because I'm having trouble making my styles inset, and I clearly can't use the inset properly so I have to manually change the colors. Sometimes, however, it just doesn't look right (if it's too dark). There has to be a good algorithm out there for this?
I've looked for web resources on the issue (such as a "what colors your borders need to be to make this look inset!" tool) or anything that could help, and found nothing.
Think of it this way: If someone were making something in a paint program and didn't have an inset effects button, what colors would all four of their borders be, given the main color is _____?
There HAS to be a general algorithm for this that I can't find...
Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)
Quote: "1. Why do the browsers render it differently?"
I'm sure each browser does it differently because they think theirs looks best. IE probably does it to look good in Windows. Safari is making theirs consistent with the look of Mac OS. Firefox in keeping with that browser's other elements, etc. (and like stated by thirtydot, it has not been standardized.)
Quote: "2. Since I can't rely on the inset attribute working, I was wondering what the proper 'algorithm' is?"
You could try to reverse engineer it if it's that important. Setup a test page and call it up in a browser. Use an eye-dropper/color-picker utility to pick off the various colors. With enough samples, you should be able to find a pattern for that one browser.
Quote: "There HAS to be a general algorithm for this that I can't find..."
Not if every browser does it differently. Each will have their own algorithm.
EDIT to address OP's follow-up:
Quote: "Edit: I want to point back to my example of using a paint program that needed an inset style. Can someone give me an example of what they'd use for this? (Is this part of the question better directs on the designers stack?)"
You seem to be looking for one specific answer where one does not exist. I cannot give you an example of what I'd use since modern graphics programs (Photoshop) will do this for me and then give me enough options that, when combined, literally provide millions of results; border color, highlight color, shadow color, depth, angle, thickness, profile, etc. Ask 20 people what they think is the "perfect" inset and you'll get 20 different answers (opinions really) and then we're back to the reason it looks different in each browser (see #1 above). So yes, in the context of "programming" questions, this last part of your OP is probably off-topic.
Additional Random Thoughts:
Why is border-style not Standardized? IMHO, I'm thinking this property is simply not used enough to warrant any major effort to Standardize or perhaps there is much disagreement on this in the Standards community. I imagine that all the CSS properties requiring Standardization are prioritized in some fashion (popularity, usefulness?) and this one just didn't yet make the cut or bring everyone together. Personally, I think a property like this is tied too closely to ever-changing trends. i.e. - 10 years ago, we used to see to see lots of tables with very thick "embossed" borders. These days, many designs use few borders or very thin borders, if any. Again, this is only a matter of taste and opinion.
I have an answer to this:
Why do the browsers render it differently? How can there be so many
different algorithms for this? Most of
all, some browsers look wrong with it!
See: http://www.w3.org/TR/CSS21/box.html#border-style-properties
The color of borders drawn for values
of 'groove', 'ridge', 'inset', and
'outset' depends on the element's
border color properties, but UAs may
choose their own algorithm to
calculate the actual colors used. For
instance, if the 'border-color' has
the value 'silver', then a UA could
use a gradient of colors from white to
dark gray to indicate a sloping
border.
That's the reason implementations differ - because it wasn't standardized.
I would say for lighter side add 20% to each of the rgb values, and for the dark side remove 20% from each RGB value..
I have some CSS for displaying a reflection on an element which uses -webkit-gradient to fade out:
.foo { -webkit-box-reflect: below 0 -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), to(rgba(255, 255, 255, 0.5)), color-stop(0.7, transparent)); }
On browsers which support -webkit-box-reflect such as chrome, this displays a reflection of the element which gradually fades out as expected.
On browsers which don't support it at all, no reflection is show.
However, on Android's browser, a reflection is shown, but doesn't fade out.
Is there any way of getting Android to either:
fade out the reflection, or
not show the reflection at all.
I know I could use javascript to detect the browser and change the style accordingly, but I'd much prefer a CSS-only solution.
Without an example file or link, it is a little difficult to see what you need.
I also played with some reflection stuff a few months ago and didn't find anything that could do what you describe. I have some steps to get you what you want, outside of code. I recommend the item you wish to reflect be a PNG on a transparent background, to start.
The steps:
1.Take the image into your favorite image manipulation program (ex. Photoshop)
Double or extend the image canvas the necessary amount to include the reflection in the appropriate direction
Duplicate the layer (Photoshop-Layer/Duplicate Layer)
Reflect the image. (Photoshop-Layer/Image Rotation/Flip Canvas (your direction))
Move the duplicated layer such that it appears as a mirror using the Move tool
Select the Marquis tool, and set the edge blur to about 50% of your original image width.
Drag your cursor over the "reflected" layer, don't worry if it says the selection lines won't be visible, unless it says nothing was selected. If it says nothing was selected, reduce your edge blur to about 25% and try again.
Once you have a selection, be it visible or not, delete the selected area. This should give you a "reflected" look.
If desired, add a background on a layer below everything else.
Save your image as a jpg if you don't have a transparent background or a png if you do. Use it in place of the image you were reflecting and fading with code. This will be mostly browser compatible.
CSS isn't designed to handle stuff like that. In other words: no, it's not possible.
I'm having similar problems trying to do things with background gradients in the Android browser, and it appears completely unsupported
Unfortunately the above answer is right, there isn't a way to split your declaration up in a nice progressively enhanced way. You could use JavaScript/modernizr as you mentioned, and at least set a support class(es) so you don't actually have to flip the style within code.
You could try reproducing this effect with a HTML canvas element, using drawImage with your image and transforming it. Although canvas can be slow in mobile webkit.
Good luck
do gradients work at all in the android browser?
if they do, make sure you're using the correct version. There's an old webkit format you may need to use.
If not, just use modernizr to hide it on places that don't support gradients.
I never forgot and always use shorthand for margin and padding because it runs clockwise, but how do you remember the others?
Do you use CSS shorthand wherever possible?
What are the best ways to remember different shorthands?
Update:
I also found 2 good shorthand Cheat-sheet.
Png - http://www.catchmyfame.com/wp-content/uploads/2009/07/CSS-Shorthand-Cheat-Sheet.png
PDF - http://www.eddiewelker.com/wp-content/uploads/2007/09/csscheatsheet.pdf
Here’s a decent CSS shorthand cheat sheet (PDF).
I personally am not good at memorizing such things, so I use the specific attributes, background-position background-image background-repeat etc. instead of the shorthand.
I find it's less error prone, and makes for more maintainable code: You can search & replace specific settings project-wide, which is impossible when using shorthand.
Use an editor that understands the shorthand syntax and gives you some degree of auto complete on them. I too don't need one that tells me margin goes top, right, bottom, left, but it is useful to have one that tells me the options for background for example.
Visual Studio does this - it won't be the right choice for everyone obviously, but if Visual Studio does it I'm sure there must be many others that do too.
I've previously had only the difficulty to remember the order to declare the a pseudoselectors link, visited, hover and active (it actually matters!). Here I use the LoVe HAte mnemonic for.
ctrl+T for new tab
ctrl+K for Google search bar
"css font shorthand" and
done!