Text over images

[Starmo]

Hi Guys,

First time here, still getting to grips with Xara, so far very good.

Two queries, Whats the best way to get text looking clear over images, tried loads of different ways, but not there yet.

This brings me to the next point, how can I get an image to fade out, I see an option for fade in only. I am thinking I can make my text clearer if the image faded down while showing.

Thanks

[Acorn]

Hi Guys,
First time here, still getting to grips with Xara, so far very good.
Two queries, Whats the best way to get text looking clear over images, tried loads of different ways, but not there yet.
This brings me to the next point, how can I get an image to fade out, I see an option for fade in only. I am thinking I can make my text clearer if the image faded down while showing.
Thanks

Starmo, welcome to TalkGraphics.

For the text, I assume it is there all the time.
I usually have a strong, contrasting colour and then apply a Flat Transparency with Bleach around 5%.

You can always try haring the image over a white box and the text sandwiched in-between.
Then on the image have a Flat Multiply 0% transparency.

For your second, place a box over your photo and set it to fade in. The slowest you get is 5 seconds.
It needs to have the same background as the items behind the image.
For complex canvases, I have used a bitmap copy of the background for the fade in box.

The alternative it to add a CSS3 fade-out effect to the image.

The following is a quick hack.

Give your image a Name - I called mine "fred" (Utilities > Names).
Add a small box to your page.
In its Web Properties > Placeholder > HTML code (head), add this:

<style>
#fred {
-webkit-animation: fadein 10s; /* Safari, Chrome and Opera > 12.1 */
-moz-animation: fadein 10s; /* Firefox < 16 */
-ms-animation: fadein 10s; /* Internet Explorer */
-o-animation: fadein 10s; /* Opera < 12.1 */
animation: fadein 10s;
}

@keyframes fadein {
from { opacity: 1; }
to { opacity: 0; }
}

/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 1; }
to { opacity: 0; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 1; }
to { opacity: 0; }
}

/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 1; }
to { opacity: 0; }
}

/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 1; }
to { opacity: 0; }
}

</style>

The top part is where you set the time (here is 10s for 10 seconds); change all the values you see to the time you want.
The image (fred0 will fade out on page load in 10 seconds.

Acorn

[gwpriester]

Welcome to TalkGraphics Starmo

If you want text to be part of an image, such as a title or information over a photo, then place the text directly over the photo and Xara will export the photo with the text (editable and searchable) over the image. Or you can group the text with the image and Xara will create a bitmap but add the text to the Alt text tag in the HTML document so it is still searchable.

Acorn - Excellent solution.

[Starmo]

Thanks Acorn, I should have mentioned exactly what I am trying to do, but I may try your suggestion instead!
I did want a slideshow of images (5) and then text coming over the images, I wanted the slideshow to fade slightly making the text easy to see.

I have so my questions at the moment as I navigate around, I am moving over from Webplus, and its amazing how you get used to doing things, then in a new program very often its the simple things you spend half an hour trying to do.
From what I have seen so far its very good, but after being an expert with the other program, I feel like a novice again!

[Acorn]

Thanks Acorn, I should have mentioned exactly what I am trying to do, but I may try your suggestion instead!
I did want a slideshow of images (5) and then text coming over the images, I wanted the slideshow to fade slightly making the text easy to see.

I have so my questions at the moment as I navigate around, I am moving over from Webplus, and its amazing how you get used to doing things, then in a new program very often its the simple things you spend half an hour trying to do.
From what I have seen so far its very good, but after being an expert with the other program, I feel like a novice again!

Don't worry, your insights into other approaches will benefit us all,
Acorn

[Acorn]

Acorn - Excellent solution.

Thanks Gary, I hope that Xara will take on board the fact we need to enter exact times and not just use a slider, have consistency in the various sliders and add the Fade Out and counter-rotation effects that will set Xara effects on a pedestal,
Acorn

[Starmo]

Acorn, your code works a treat and will use it on the site. it also helped to explain to me how adding html into placeholders works!

I have a question regarding the slideshow widgets, I downloaded one from Xara that has text running along the bottom of each image in the slide, however I don't seem to be able to edit the size of the font or indeed move it about, so am I right in saying with these widgets you are limited in what you can do? Guess I was expecting to be able to customize at will.

Widgets of course are entirely new to me...

[Egg Bramhill]

I hope that Xara will take on board the fact we need to enter exact times and not just use a slider, have consistency in the various sliders and add the Fade Out and counter-rotation effects that will set Xara effects on a pedestal.

+1

[gwpriester]

I have suggested the lack of precise timing and the limited time option to Xara and I suspect we will see some improvements in the coming months.

Not to mention the slider in the Scroll Animation has no indication of + or -