Shop More Submit  Join Login
×




Details

Submitted on
March 27, 2010
File Size
414 bytes
Link
Thumb
Embed

Stats

Views
1,156 (2 today)
Favourites
18 (who?)
Comments
0
Installs
37

License

Creative Commons License
Some rights reserved. This work is licensed under a
Creative Commons Attribution-Noncommercial-Share Alike 3.0 License.
×
Live Thumbs Installable by GillianIvy Live Thumbs Installable by GillianIvy
This border for thumbs was inspired by looking at my e-mail. Windows Live has these nice lil' transparent glass looking boxes which look so nifty with just about any background color. And I thought, hmmmm, that would look great with a thumb in it! So that's what I did.

Once installed, you will need to surround each thumb with the following:

<div class="border"><div class="thumb">:thumb#:</div></div>

//CSS//

.border{
background:transparent url('imgURLhere') 10px 8px no-repeat;
width:125px;
height:125px;
margin:10px;
display:inline-block; <<---You may wish to adjust this!
}

.thumb{
padding:15px;
padding-right:20px;
overflow:hidden;
width:80px!important;
height:82px!important;
display:block;
position:relative;
}

CSS skinners have permission to use these in their works. Please provide credit or a journal/deviation shout out, and favorite if you use. Do not offer these as your own. I'll know it was you. Once you install you may incorporate into your own design. It is not necessary to add a credit to me in the actual skin you use these in, just a mention in the deviation submission or in your example journal is appreciated.

Not sure if I put these in the right category, wanted them to be installable. Hope that's alright, even though it's not a full journal design, just a quickie thumb effect. These can go with a variety of bgs. They're supposed to have a sort of glassy look to them.

I learned the CSS for these by studying @dxd's thumbs. They are excellent. Maybe you can be clever and combine these with them? XD

See them in action here ---->> [link]

Known Issue:
IE sucks royally. I will be fixing that for IE some other time, so if you install, you will need to reinstall it in the future. The fix will be adjusting the size for IE only with - _width:##px; Etcetera. I'll need to fudge it to see what fits. If you really feel like it, go ahead and fix it and comment me with the fix. I don't mind, really. ;D

UPDATE
IE fix:

Cut & Paste this code to your CSS in your skin instead.

.border{
background:transparent url('[link]) 10px 8px no-repeat;
width:125px;
height:125px;
margin:10px;
display:inline-block;
_display:inline;
}

.thumb{
padding:15px;
padding-right:20px;
overflow:hidden;
width:80px!important;
height:82px!important;
display:block;
position:relative;
_width:114px;
_height:112px;
_padding:16px;
_padding-top:15px;
_text-align:center;
}

Sorry, it's not installable, but I don't feel like re-submitting it for such a minor edit. When I include these with my skins, I will have the corrected version available with install.
No comments have been added yet.

Add a Comment: