css zoom
Arioch
it seems to be auto-generated and contains of elements p
inside it there are few elements "a img" for issued numbers of magazine
and "img" for not yet released.
i can't say why img was used instead of simple coloured text, yet it is
how it is.
i can easily фвв
<style type="text/css">
<!-- p img {display: none} -->
<!-- p a img {display: block} -->
</style>
But can i rather do something like
<style type="text/css">
<!-- p img {zoom: 50%} -->
<!-- p a img {zoom: normal} -->
</style>
???
Can i do CSS-based transformation of images to give a clue it is not ready
yet?
Maybe CSS allows to make image grayscale?
--
Написано в почтовом клиенте браузера Opera: http://www.opera.com/mail/
Eik
wrote:
> But can i rather do something like
> <style type="text/css">
> <!-- p img {zoom: 50%} -->
> <!-- p a img {zoom: normal} -->
> </style>
You could try this in a user stylesheet:
p>img {-o-transform:scale(0.5)}
That would aonly affect images directly inside a <p>. Images inside <a>
inside <p> would not be affected.
> Can i do CSS-based transformation of images to give a clue it is not
> ready yet?
You mean as they're loading? I suppose you could try writing a user
javascript that applies a class to all images and then use the 'onload'
event of each image to trigger a funtion to remove that class again. But i
seem to recall the onload event was unreliable on images years ago when
you did things like use the back button or go to another page where the
images come from the cache. I don't know where things stand today.
Another thing you could do is set background colours or even embedded
images/gradients for all IMG elements. The backgrounds will show through
until the image loads. CSS gradients only work from Opera 10.1. You can
embed an image (PNG, JPG, etc) as a Base64 encoded string in the
stylesheet itself:
img
{
background-color:#f00;
background-image:url(data:image/png;base64,UIN84UJ48F8E-rest-of-image-data...);
background-image:-o-linear-gradient(-45deg, #f00, #fff, #00f);
}
> Maybe CSS allows to make image grayscale?
I don't think CSS can do that, though Javascript can using the <canvas>
element, but it's a bit advanced for something like this. It would require
a long script that went through every pixel of every image and then
calculated/set the monochrome values.
Arioch
сообщал:
>> But can i rather do something like
>> <style type="text/css">
>> <!-- p img {zoom: 50%} -->
>> <!-- p a img {zoom: normal} -->
>> </style>
>
> You could try this in a user stylesheet:
>
> p>img {-o-transform:scale(0.5)}
>
> That would aonly affect images directly inside a <p>. Images inside <a>
> inside <p> would not be affected.
thanks, i wish this would at last be standardised as well, maybe
independantly on X and Y axises :-)
what about ">" selector, yes, it is possible, but AFAIR is only appeared
in CSS2
So i choosed to put two simple " " selectors.
Eik
wrote:
> what about ">" selector, yes, it is possible, but AFAIR is only appeared
> in CSS2
It was part of CSS1, it's just that the only browser to support it for
many years was Opera 3.x!
They all support it now (the important ones, at least), even IE from
version 7.