![]() It uses CSS 3 transformations, so you should consider your target audience to support its browsers. Transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg) ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg) o-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg) This can be customized and you can have it replaced by an image of your choosing. webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg) The default background of folder icons is a thumbnail preview of the contents inside: images from inside the folder, icons of the applications or file types found in the folder, etc. moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(-20deg) Transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg) ms-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg) o-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg) ![]() webkit-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg) moz-transform: scale(1) rotate(0deg) translateX(10px) skewX(10deg) moz-border-radius: 2px -webkit-border-radius: 2px -o-border-radius: 2px border-radius: 2px It is just a suggestion or a starting point, but it is amazing watching the page not losing a single pixel of resolution by zooming in as much as possible! (Just like vector graphics). ![]() I tried by myself and I came up with something in line with the flat design which today is revolutioning cross-devices UI's: ![]() I know this thread is a bit old, but I bounced into this question by asking myself if there was something simple in pure CSS and minimalistic HTML to update my old tree library which uses background images for icons. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |