I found http://www.magmypic.com/, the concept is super nice, but flash is SO OUT... i like and think if it's possible to do it in html5. Do you know library that can do it, or site that show how-to
thanks in advance
I don't think you need 'HTML5' so do something similar, the first step is placing an image as a background of a div and using CSS3 'background-position' and 'background-size' take care of moving and scaling the image. Then just slap transparent PNG on top for the magazine text. You could also use CSS3 instead of a PNG to make the magazine graphics with #font-face and something like google web fonts or font squirrel for custom fonts.
Related
I made a stacked svg sprite and I want to show the svg's in a img tag and I want to use it in my css files.
I'm embedding the images like this:
<img src="http://markputs.nl/sprite/sitesprite.svg#audio">
and http://markputs.nl/sprite/sitesprite.svg is the svg.
(sorry that I need to link to the svg but I think it might be important to have the entire file)
I found some old topics at this site where the issue could be resolved by serving the svg as an actual svg but I'm already serving it as an actual svg (file type).
I have no idea how to fix this, is there someone that can help me in the right direction? It's working on all major browsers except ios browsers..
I am trying to build an email template. However I have a background image that is not showing up in the Outlook Web i.e. in the webmail. :( :(
I can not seem to figure out how to get that working for webmail. Does anyone know how to?
Thanks in advance
background-image is not supported in outlook.com or outlook 2007/10/13.
Source: The Ultimate Guide to CSS
I suggest using something like Bulletproof background images that provide a fallback color. Otherwise, if you have to have a background image, you will need to slice the text with background images and use img tags.
After lots of googling and hours wasted, realized that OWA does not support background image in normal mode. But when opened in full view, the image shows up. Beats me !
I'm working on a website with bootstrap which is basically made of an orange background and some transparent black containers.
http://i.stack.imgur.com/n9G5O.png
As you can see, the font displayed in the transparent boxes looks bad. I'm using Tahoma, but this happens with every font i try.
Is there any way to improve such text?
Thanks in advance!
Tahoma is a Windows-Font, so it will probably use Arial on other Browsers.
It also seems like the screenshot you provided came from Internet Explorer, which has a very bad render engine for text. (try chrome/firefox/safari)
I also read somewhere that you could try enabling ClearType in the Windows-Settings, but there is no way to enforce that from the browser level.
You could also have javascript cufon change every character into an image/canvas and enforce it that way, but that will suck performance and might not be the best solution either.
Usually you will end up using images (png) as menu buttons, if you want to support IE.
I've fixed image size. And I want to achieve rounded corners through html/css.
Options I'm thinking about is to overlay image with four corner png. Using img:after and content. But unfortunately img:after is purely supported across browsers, let alone compatibility with IE 6.7.
Is there any simple clean way to achieve this?
In theory I could also create div with corner background and make it go absolute over the image... but that would break save as functionality.......
any ideas?
Well, there's always CSS3 rounded corners border radius which has very good support in every modern browser, then the CSS3PIE polyfill for older versions of IE.
If you can live with the fact that browsers that don't support border-radius will show plain old square images, you could use this jQuery script to automatically wrap your images in div's and give them corners:
http://www.smoothdivscroll.com/roundedimagecorners/
(View the source to get the js and see how it's used)
Here's an article that I've written that explains the background to this script:
http://www.swedishfika.com/2010/03/19/rounded-corners-on-images-with-css3-2/
Regards,
Thomas
To make border round in IE there is little work around for that. Please have a look at this link
Is there any image modification tool out there that will work on webkit?
Something like the one on this page
http://developer.yahoo.com/yui/examples/imagecropper/simple_crop.html
Except that when you interact, you interact with the image in a given space and the mask is fixed (i.e pinching the image, rotating the image etc)
Thanks,
Tee
The jQuery image crop plugin should work with Webkit and does cropping. I don't know of a free plugin that can do image rotation at the same time.
WebKit supports html5 canvas and canvas supports image manipulation. You could make an app to do this. I recommend looking here