is it possible the proportions within an iframe? e.g. 100%, 50%, 25%, ...
I would like to implement a "magnifying glass" for a webpage or iframe. It does not have to be implemented in Javascript within a website, but even a desktop solution would be great.
Is this a possibility? or would it be incredibly complicated?
Any ideas? Help would be amazing =)
In Firefox you can use the -moz-transform CSS property to zoom, using the scale() value. Note that this doesn't change the amount of space that the element takes up on the page.
Related
Im doing a very slow transition of a background image (a view of space that slides slowly to the left). My problem is while it looks beautiful on Firefox, it looks horrible on Chrome. I get a "jittery" effect due to Chrome's lack of subpixel rendering, and the image just snaps to the next pixel. I cannot speed the image up because it will destroy the effect Im trying to achieve. I have tried using TranslateZ() tricks, I have tried every CSS3 effect I could think of to make it look better, Ive tried Kinetic.js, Ive even tried Babylon.js hoping that WebGL would fix my problem.
At this point Im at a loss and I might just have to give Chrome users a static background and cater more to the Firefox users in regards to the neat little things I can do for the UI UX, and then just put a disclaimer on my site saying that the page is best viewed in FF.
I REALLY dont want to do this. Is there ANY work around at all?
You can force subpixel rendering by applying a small transformation:
#container {
transform: rotate(-0.0000000001deg);
-webkit-transform: rotate(-0.0000000001deg);
}
But instead of using JS to make the animation work, why not use CSS3 animations?
If you use transform: translate() browsers will use subpixel-rendering by default.
Also since the performance is better you shouldn't get your jittery/wave motion.
More info on performance here: http://www.paulirish.com/2012/why-moving-elements-with-translate-is-better-than-posabs-topleft/
I've put together a simple demo here: http://jsfiddle.net/yrwA9/6/
(For the sake of simplicity I only used the -webkit- vendor prefixes)
I would like to know if it's possible to replace a text's color by a background picture.
I don't think that can be done using CSS only, but I'm looking for any other way to do that without using png pictures for the text.
The idea is to keep the background image visible on the font only.
Its really not that easy...
Safari and Chrome offer the property -webkit-mask-image which accomplishes exactly what you want but is not supported by any web browser other than Safari and Chrome... read about it here.
However, there is this alternate "trick"...
Pure CSS Text Gradient
I don't exactly recommend it but I guess you can't really go wrong, the only problem is when you have other elements on the same line as the text, because this gradient will cut right through the page... If these are suitable, writing the JavaScript would be fairly easy but the CSS Text Background Image in it self is quite the question.
1) Using css3 -webkit-background-clip: text; - But only works in chrome & safari
#p:hover{
background:transparent url(http://www.astrosurf.com/~buil/iris/new540/gradient1.jpg);
-webkit-text-fill-color: transparent;
-webkit-background-clip: text;
}
http://jsfiddle.net/KHECk/2/
2) Using absolute position. It will work in all browsers. But have to check with your requirement. Not work with all kind of images.
http://jsfiddle.net/KHECk/9/
3) You can use SVG also to generate this effect
http://www.boogdesign.com/examples/svg/pattern-fill.svg
My problem is that I use a html to pdf generator (acts_as_flying_saucer) that support CSS2 and javascript but not css3 so I can't use the transform: rotate(-90deg) (of course with different engines like webkit and stuff).
I tried PDFKit and Wicked_pdf but they didn't have full CSS2 support whereas I needed the position: fixed to set my footers on all pages to the bottom of the page.
SO my question is if there is a way to get vertical text with either CSS2 and / or Javascript /JQuery? CSS3 is out of the question unfortunately. :(
In IE the writing-mode is available.
<span style="writing-mode: tb-rl;">CSS2?</span>
See more info: http://msdn.microsoft.com/en-us/library/ms535153%28v=vs.85%29.aspx
No it's not possible without rotate. I don't know just crazy idea using canvas.
http://jsfiddle.net/LBsuQ/
I'm trying to find an animated progress bar with a transparent background. I would prefer to achieve it using JQuery, Javascript and/or CSS. Is this possible? I'd like something much like this: http://www.fcm.travel/progress_bar.gif Has anyone come across such a thing?
The other questions I've seen on here show static bars, nothing animated much like the example.
You can make anything transparent with CSS. The following makes 75% opacity (25% transparent)
style="opacity: .75; filter: alpha(opacity=75)"
(The extra filter rule is for IE)
Edit: If you care that it works as often as possible on older browsers, you would add the old -webkit- and -moz- rules
style="opacity: .75; filter: alpha(opacity=75); -moz-opacity: .75; -webkit-opacity: .75"
In the event the browser does not support opacity settings, it would automatically default back to 100% opacity which is not transparent or translucent at all
I'm not sure what you mean by transparent, but jquery ui has a progress bar: http://jqueryui.com/demos/progressbar/#animated
Technically, Animated PNG would be neat for this. However the support for it isn't really that wide last time I checked.
So what you could do, seeing you are open for JavaScript solutions, is create a spritemap image based on 24 bit PNG's so it has nice transparancy, that contains every state for the animation. Then with JavaScript and a decent enough timer/interval, simply change the background position for the image so it looks like it's showing a live animation.
I've just made something that would interest You few days ago, take a look at this progress bar
I want to give user the option to rotate the content of my webpage, including images, text and divs. Is this possible?
PS:
I want to rotate the entire webpage. Not just a container div.
You could use CSS3
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
http://jsfiddle.net/KdNNy/1/
Doesn't work on all browsers though. This example is only for firefox and chrome/safari. Opera should have it as well. Maybe even IE
EDIT
And just in case anyone thinks "oh he's just rotating a DIV!", check this
http://jsbin.com/utupu5/ (full page)
the only way I have heard of to make this achieved is embeding your HTML in a SVG foreign content element.
If you're using jQuery you can use the jRumble plugin to achieve this
The relevant website can be found here