I have a web site that makes use of CSS box shadows. To make the web site look good in more browsers, I want to make use of semi-transparent PNGs instead. And to avoid having to redraw elements in a graphics program, I would like to know:
Is there a way to extract
semi-transparent elements from a web
page and store them in
semi-transparent PNGs?
One solution that I could try if I hadn't borrowed my Mac to a friend: print to PDF from Safari. If I'm lucky, then the PDF has all the elements stacked in layers.
You can render DOM elements to canvas via SVG and XHTML embedded in <foreignObject>.
Related
I'm using Leaflet + CartoDB; I've also used Leaflet + Mapbox; and there may also be some Leaflet + GoogleMaps in my future.
My customer asked me this question: where do the Leaflet layers get painted onto the tiles? Is that done by Leaflet? Or by the Tile engine?
Does this change if I'm using a "regular" map engine (such as Mapbox) or if I'm using something like the KML-rendering plugin?
where do the Leaflet layers get painted onto the tiles? Is that done by Leaflet?
By default (unless you're doing something weird), that happens in your web browser, which is compositing DOM elements on top of each other. You can check this by using the developer tools in your browser and inspecting the DOM elements for the tiles, and the <canvas> or <svg> with your vector geometries. They are separate DOM elements, thus your browser is doing the compositing.
Does this change if I'm using a "regular" map engine (such as Mapbox) or if I'm using something like the KML-rendering plugin?
Not really. Mapbox-gl-js uses insane amounts of WebGL, so that means that the brunt of the workload moves from the browser's compositor to a WebGL stack. It still happens in the web browser, albeit in a different part of the browser.
There is no "KML rendering plugin" for leaflet, just KML loading plugins. Vector geometries are still rendered in a <canvas> or <svg> separate from the image tiles for the basemap, then composited.
You can, of course, run your own tile server (with software such as Geoserver, Mapserver, Mapproxy, mapnik+mod_tile, tirex, tilestream, or dozens of others). In that case, you obviously know you are rasterizing your data into tiles.
Is there any pre-built sample of iphone like bottom navigation using CSS 3? is it possible to make these icons in CSS3, without images?
You may want to check out Sencha Touch, they provide a full HTML5 version of many common UI components for mobile web site development, including tab bars.
Try my itabbar www.itabbar.com
Here a full css tabbar with jquery to change button color on click
http://jsfiddle.net/onigetoc/4CgxM/ (View on Chrome or Safari)
I think this is possible to reproduce the basic icon with basic shapes in css
For the moment I havec make the most basic look hat http://frommelt.fr/exos/icon.html
Of curse I don't lets go and I will make the other :)
Actually, in ChocolateChip-UI we use SVG images as background image masks and CSS3 background gradients to exactly recreate the iPhone toolbar icons. Webkit background image masks with with background images and background colors. Since CSS3 gradients are rendered by the browser as a canvas background image, they work just fine. The svg images are just black and transparent because they were created to use as masks with background colors.
That said, yes you could reproduce the images with just HTML elements and CSS. It would require a bunch of pieces, using a mix of relative and absolute positioning and would be very, very tedious to get all the pieces positioned properly and get the background gradients to match up perfectly. And then you would have to write some really complicated CSS to handle the hover state. I could do that but would I want to? Hell no! Using the SVG image masks is just so much easier. And because the SVG is just text, it's easy to edit them at any time. Oh yeah, and SVG is vector-based so you can scale them to any size without pixelation.
I need to develop an application like an eBook reader, that loads PDF or HTML files. This part is easy. The part where I'd like some reference or example is the feature that allows the user to highlight/underline text with the finger, or draw circles or ellipses around the text. So you activate the "pencil" or another drawing tool, and "draw" over the text, to highlight some parts.
Is there any example around?
The best option here is to create a transparent context in a CGLayer in Quartz and do your drawings, then copy the result back as an image and put it over the text view. See this for references about Quartz.
Is it possible to have a menu bar (navigation bar) on a web site that is independent of iPhone’s zoom (i.e. with fixed width and height) while the rest of the site can be zoomed in and out?
With meta "viewport" I can set the zoom of the whole website, I want to exclude some parts.
It seems that it can't be done by using iFrames or CSS transforms.
Is it possible to be done by tracking Gestures that scale elements, and using javascript to rescale my menu?
iPhone's zoom is a graphical thing - it does not change the html rendering of the page (although it may look at the html element for hints about what how much to zoom).
So, not really, no.
I’ve been busy working on the graphics for my iPhone application. I started working on generating icons for my UITabBar and ran into lots of problems. How do you create these icons?
I created this solution:
http://www.nailrails.com/?p=46
Are there any shortcomings to this approach? It seemed to work for the few icons I created...
Apple's guidelines can be found at http://developer.apple.com/library/ios/#documentation/UserExperience/Conceptual/MobileHIG/IconsImages/IconsImages.html#//apple_ref/doc/uid/TP40006556-CH14-SW1
The docs are pretty straightforward-- alpha is all that matters when the image gets loaded by the toolbar, meaning that anything that's not at least semitransparent will render in the same opaque shade. As for how I do that, I mainly use Adobe tools. Fireworks is my preferred tool but Photoshop's also more than up to it. Another one I've had good results with is Acorn, which is frankly a lot cheaper while being more than sophisticated enough for this kind of work. I'm not really a graphic designer but a certain familiarity with this kind of stuff goes with the job.
I have an article up on my site that shows how to use OmniGraffle with a template I use to create great iPhone toolbar icons in minutes:
http://steveweller.com/articles/toolbar-icons/
The template sets up a grid to work to that corresponds to one square for each pixel. You draw your icon in white on top of the black template background and then export as a PDF exactly the right area to match the icon size you need (typically 21 pixels high). Then you reimport the PDF, resize it to the final icon size (21 pixels again), and export as PNG. The template does nothing magical; it just provides an already set up working area and helps you get the final PNG right every time to the scale is correct.
You could use the same technique in Acorn or any other app that supports PDF export and layers.
(I use Gimp. Assume your icon layer already has alpha channel.)
Right click the layer, then add layer mask.
Done with option "transfer alpha channel of layer" chosen.
Select the whole layer (but not layer mask), and clear it with pure white.
Resize image to Apple-suggested size, and export it as png file.
You may also paint directly on the layer mask.