All geek questions in one place

Create an iPhone Style Icon Effect on a Thumbnail Image?

I have a tool for uploading images to my asp.net project, when I upload a thumbnail image is generated and saved to disk.

Ideally, I would like to apply some nice styling effects to this thumbnail image ... similar to the look of the iPhone icons. Perhaps a slight gradient, smooth rounded corners and a border.

Hope someone will know the existing library to do this? - commercial or other (it would save me too far in a matter of seconds in the space of GDI.net GDI!).

Any pointers got a lot. Thanks.

+3
source share
3 answers

: .png , ?

+2

. . , . GetPixel .

0

, PNG . .. , , /, PNG . PNG 4 , , , , .

, "" "",    overflow:hidden;.

:

You have a 500 x 500 image. You want a 100 x 100 icon. If you change the size by HTML, it will be a mess, so put a div down, add background-imageyour 500 x 500 image and overflow:hidden;with width:100px;height:100px;. Then create another div, apply position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;, in this place your transparent PNG.

Then on your page;

<div style="background-image:url('/images/thumbnail.jpg');width:100px;height:100px;overflow:hidden;z-index:1;">
    <div style="position:absolute;left:0;top:0;z-index:2;width:100px;height:100px;">
        <a href="/ifclickable.htm"><img src="/images/transparent.png" alt="alt for img here" /></a>
    </div>
</div>

This means that your icon cannot be broken, and all you need to worry about is the size of your download.

Hope this helps.

0
source

Source: https://habr.com/ru/post/1720928/

More articles:


All Articles