I'm playing with inner shadow fx effect. I'm trying to get shadow appearing only on top of VBox. Can anybody give me a hint
-fx-effect: innershadow(gaussian, #787878, 10, 0, 0,2 );
I had a problem similiar to yours. I wanted to add a shadow on every edges without the top. Look into my post: JavaFX: Style undecorated Window with InnerShadow but without top
There you can find the solution given by Kalaschni: You can rebuild your shadow and add it to the border. In your case it looks like:
-fx-border-color:
linear-gradient(to bottom, rgba(0, 0, 0, 0.2), transparent);
-fx-border-style: solid;
-fx-border-width:
5px 0 0 0;
Instead of px you may use em, too (-fx-border-width: 0.417em 0 0 0;).
Related
I have the following table:
and this css for the table border:
border-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #B3B3B3 20%) 0 0 0 1;
i want the border ends where the last list item bullet ends. Can i achieve this with the border-image property? Or is this possible at all? By the way the height of the list items may vary, not every item has the exact same height.
So this should be the result:
If you would be able to know the height of the either the ul or at least the last li, then a css only solution is definitely possible; otherwise, it gets tricky.
The linear-gradient function takes four values (see https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient#Values), one of which is the color-stop-list. If you set one stop to end and another to begin at the same point (either a percentage or a length, such as pixels), then you get a solid line at that stop with the defined or default angle.
So, you can get the gradient to stop at a fixed pixel point as follows:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, #b3b3b3 20%, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))
Here, I am changing from the main color to a color with opacity: 0 at a point 25px from the full height of the box (since we are using to bottom). You can try to eyeball this for you project, or use JavaScript via Element.getBoundingClientRect().height (see https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect) on the last li to calculate the position of the list-item-type based on how you define that in your css.
To answer the question in your last comment, use the same logic and set a stop point 20px in:
linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 20px, #b3b3b3 20px, #b3b3b3 calc(100% - 25px), rgba(0,0,0,0) calc(100% - 25px))
Having said this you may consider handling the border on each individual li rather than on the ul, which would make it much easier to handle without JavaScript. You would then only need to supply linear-gradient values on the ul>li:first-child and ul>li:last-child using the principles above. Just keep in mind that if you use margin-top or margin-bottom on any li in the list, you will see gaps in your border.
I created an undecorated window with own title etc. For this one I added a style:
.pane-basicwindow{
-fx-border-color: gray;
-fx-border-style: solid;
-fx-border-width: 1;
-fx-effect: innershadow(three-pass-box, rgba(100, 100, 100, 1), 10, 0, 0, 0);}
With the help of this I created an innershadow. But I want to have the innershadow just on left, right and bottom side. Consequently the top side should be without shadow. I know that if I change the last value of the innershadow, I can move the position of the shadow upwards. For example like this
-fx-effect: innershadow(three-pass-box, rgba(100, 100, 100, 1), 10, 0, 0, -4);
But in this case the shadow on bottom side also moves upwards so that this one is bigger than the one one right/left side.
So my question is: What have to be done so that the shadows on left, right and bottom side have the same size while the innershadow on top is invisible?
I checked a lot of other questions here but couldn't find an answer for my case. I also played a little bit with outsets but couldn't find a result, too. Does anybody has an idea?
You can "simply" rebuild the shadow and just add it to the borders you like, something like this:
.pane-basicwindow {
-fx-border-color:
linear-gradient(to right, rgba(0, 0, 0, 0.2), transparent),
linear-gradient(to top, rgba(0, 0, 0, 0.2), transparent),
linear-gradient(to left, rgba(0, 0, 0, 0.2), transparent);
-fx-border-style: solid;
-fx-border-width:
0 0 0 0.417em,
0 0 0.417em 0,
0 0.417em 0 0;
}
Can I have an inset shadow along the bottom of a div only? I've been playing with the box-shadow property in CSS3 for a while and cant figure out how to go about doing this.
I can get it to show on the inside along the top of the div but cant figure out how to get it to the bottom. I haven't been able to find any topics relating to this.. is it possible?
box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.4);
Use negative distances to more the shadow to the left or up (therefore having them on the right and bottom edges for inset shadows).
Given a photo like so:
How can I apply an inner stroke as seen below which in photoshop is done with an inner shadow? Suggestions?
There’s an inset property on various browsers’ box-shadow attributes that makes it behave much like Photoshop’s “inner shadow”. You’ll need to create an element on top of your image with the same size and appropriate corner rounding attributes (border-radius, -webkit-border-radius, -moz-border-radius), then apply the shadow to it something like this:
-webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
-moz-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.25);
(note edits; I fiddled with it a bit and it turns out the shadow gets drawn beneath any actual content of the element, so you’ll either need to apply the shadow to an element that’ll be layered on top of the image or put the image in the background of the element that has the shadow applied to it)
(further edit: a working JSfiddle example.)
Im creating a website that has three columns of content.....
navigation float: left;
main content centered
right column float: right;
Is it possible to drop shadow all three of these areas.
I tried and it didn't work wondering if the divs prohibit the end result?
There are various ways of doing background shadows
1) To give background url as drop shadow image for the div and give some margin-left:5px which makes show like a drop shadow.
2) to get four images like topright , right ,bottomright,bottom image and position them one by one after the divs.
choose whatever is easy for you and it should work perfect. See the below linke for some exampel
http://www.alistapart.com/articles/cssdropshadows/
we implemented drop shadows at the following location for images
http://www.art.com/gallery/id--b1823/animals-posters.htm?ui=E1E1ADDF1A034D5D9A89DB0A8E318263
with firebug you can see how we implemented , its the second approach.
let me know if you have more questoins.
Of course you can apply drop-shadow to all of these at the same time, one solution if your ok with the browser support listed here http://caniuse.com/css-boxshadow is to simple just use CSS3 box shadow.
just simple target all three selectors of your containers like so.
.container-left, .container-middle, .container-right { }
then apply box shadow like so (dont forget browser prefixes)
and I'm using RGBA so we get to set the Alpha transparency as well, but you could use HSLA also.
.container-left, .container-middle, .container-right {
-webkit-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
-moz-box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
box-shadow: 0 0 9px rgba(20, 0, 0, 0.53);
}
Hope this was helpful.