Identify Transparent Logos Easier on UL - Stylish
gumanov —Mon, 11/03/2008 - 23:35
I have figured out a very simple way to identify transparent logos much easier!
In all modern graphics software, transparency is visible because of the use of a checkerboard pattern.
I used this concept to create a Stylish style for the site, to mimic this behavior.
I am planning to make this a permanent change on the site soon, but i dont have access to the css files at the moment.
SCREENSHOTS: (BEFORE vs AFTER - click to enlarge)
Stylish Code:
.node .content .field-type-image img {
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}
Enjoy!
- gumanov's blog
- Log in or register to post comments or vote.
- 5 votes
Comments
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by Mafia_Penguin on Tue, 11/04/2008 - 01:35... wow.
It's great.
-----------------------------------------
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by gumanov on Tue, 11/04/2008 - 01:39thanks.
i have been using it for a while now, never had time to post about it.
next time telega gets on, i will ask him to update the sites' css with this modification
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by sjdvda on Tue, 11/04/2008 - 05:16Thanks mafi0z!!!!
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 08:11@mafi0z
Thanks for your post.
Good idea.
---
next time telega gets on, i will ask him to update the sites' css with this modification
mmmmm,,,
If you do that there will be no way anymore of seeing properly the original logos.
Please see below
------------------------------------------------------------------------------------
Have to admit I rather prefer a hover Version of your Style.
This is the code.
Please try.
Enables one then to see the original logo as well as being able to confirm transparency on hover with checkerboard.
@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("userlogos.org") {
}
.node .content .field-type-image img:hover
{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}
---
Original Logo on UL viewed on my setup - no hover (see cursor)
Logo on UL viewed on my setup - on hover (see cursor)
best of both worlds ??
-------
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by sjdvda on Tue, 11/04/2008 - 13:23@chiaroscuro
Great Idea!!!!
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 13:28@sjdvda
Great Idea!!!!
Glad you liked it. :-)
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 14:02@mafi0z
One could of course have an entirely different approach.
Say a user always has a black or very dark background in Fast Dial.
He is possibly used to viewing all white pages on web pages as white.
Maybe it would be more useful for such a person to be able to see the effect on a transparent logo of having a black background, rather than simply seeing a checkerboard
So on hover the transparent background goes black
see below
If the background has a different dominant tone the color in the code could of course be altered, or even by the industrious a background image inserted instead.
@namespace url(http://www.w3.org/1999/xhtml);@-moz-document domain("userlogos.org") {
}
.node .content .field-type-image img:hover
{
background: black !important;
}
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 14:09@mafi0z
There is also this rather interesting Style on Userstyles
Firefox View Image Page - Checkerboard Background
So right click on any logo, and then "view image", and you can see with your checkerboard if the logo is transparent or not.
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by gumanov on Tue, 11/04/2008 - 14:10hmm , thanks for that idea chiaroscuro!!
if i make it a permanent part of the site css, i will use the hover code that you provided.
as for the black background on hover, we can have that style posted somewhere on the site, and those who choose to use it can use any color or background.
what do u think?
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by gumanov on Tue, 11/04/2008 - 14:14thanks for the great link, i will be using that style now - i liked it!
but i think it would be best if users can see the checkerboard either all the time, or on hover.
not many users right click > view image on the logos
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 14:19@mafi0z
hmm , thanks for that idea chiaroscuro!!
if i make it a permanent part of the site css, i will use the hover code that you provided.
Great
Fine
Thanks
as for the black background on hover, we can have that style posted somewhere on the site, and those who choose to use it can use any color or background.
what do u think?
Yes
Fine
Good idea
---
I think both the checkerboard hover and the black hover work fine in isolation.
But we need to find a way that they do not conflict.
That is why I pointed out the view image style as it would not conflict with a hover.
Do you follow me.
Needs working out.
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by gumanov on Tue, 11/04/2008 - 14:32hmm, sorry i do not understand
what i meant was by default on the site, we could have checkerboard on hover.
but we can provide the style to users if they dont like the checkerboard, and instead want to use a color on hover, such as black.
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 15:28what i meant was by default on the site, we could have checkerboard on hover.
but we can provide the style to users if they dont like the checkerboard, and instead want to use a color on hover, such as black.
OK fine
Yes I understand
We can troubleshoot all this when telega returns
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Tue, 11/04/2008 - 16:55@mafi0z
thanks for the great link, i will be using that style now - i liked it!
but i think it would be best if users can see the checkerboard either all the time, or on hover.
not many users right click > view image on the logos
Sure.
It was just for your interest
I'm glad you liked it
I agree
---
Unusual idea though
Very discreet.
Can be used on any web site and the original image remains unaltered on the page.
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 11/05/2008 - 08:09@mafi0z
Mmmm
Refreshed a logo on FD and got this: :-(
Rather disappointing.
Seems this happens if a cell is refreshed when
Firefox View Image Page - Checkerboard Background
is running in Stylish.
Needs checking out.
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 11/05/2008 - 08:57@mafi0z
Modified Version
---
This Style will give a black (or any other colour) background to all transparent logos on UL.
On hover however it will give checkerboard.
---
This will allow the user to see all the Logos on UL displayed in the most suitable background colour for transparent logos for his/her setup, as well as allowing the user to check for transparency when necessary
/** Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userlogos.org") {
}
.node .content .field-type-image img
{
background: black !important;
}
.node .content .field-type-image img:hover
{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by macleod.mac on Sat, 11/15/2008 - 07:09Just found this
+1
--
macleod.mac
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Sat, 11/15/2008 - 07:20@macleod.mac
Just found this
Are you referring to Mafi0z post or to a particular style ?
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by macleod.mac on Sat, 11/15/2008 - 07:35The original style Mafi0z Posted
But I think your styles are awesome too.
--
macleod.mac
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Sat, 11/15/2008 - 07:43The original style Mafi0z Posted
But I think your styles are awesome too.
---
OK
I see
Thanks
But in a sense all the Styles posted are variations on Mafi0z original theme.
Did you play around with them in Stylish ?
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by macleod.mac on Fri, 12/05/2008 - 08:54/** Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userlogos.org") {
}
.node .content .field-type-image img
{
background: #eee url('http://i41.photobucket.com/albums/e257/MaFi0z/checkerboard.png') 0 0 repeat !important;
}
.node .content .field-type-image img:hover
{
background: black !important;
}
Just a simple edit for my personal use, so it shows checkerboard normally, then black on mouseover, as I find this useful when looking at white logos on transparent backgrounds.
--
macleod.mac
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Fri, 12/05/2008 - 13:04@macleod.mac
Great.
Good thing about Stylish is each can make his own Style. :-)
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by Mafia_Penguin on Wed, 12/17/2008 - 15:57I think it would be best to have a dark link, like this:
---------
Please exchange this coupon for one (1) free internet.
Trouble using transparent Logos? Click
here for help!
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 12/17/2008 - 16:17Mafia_Penguin
I think it would be best to have a dark link, like this:
Good idea
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by Mafia_Penguin on Wed, 12/17/2008 - 16:19Good idea
I've been using that pic for quite a while now...
I just forgot to post the link to it.
---------
Please exchange this coupon for one (1) free internet.
Trouble using transparent Logos? Click
here for help!
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 12/17/2008 - 16:21I've been using that pic for quite a while now...
I just forgot to post the link to it.
Perfect
Great improvement
Thanks
edit
I have posted on userlogos here
/** Modification of original Code written by of Mafi0z (http://userlogos.org/node/3675)
*/
@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document domain("userlogos.org") {
}
.node .content .field-type-image img
{
background: #212121 !important;
}
.node .content .field-type-image img:hover
{
background: #eee url('http://www.picamatic.com/show/2009/04/16/10/20/3280958_16x16.png') 0 0 repeat !important;
}
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 12/17/2008 - 16:29Much much better !
Have included in Style in Extensions/FD Styles
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by Mafia_Penguin on Wed, 12/17/2008 - 17:03That bg is the default color for Gimp.
I use it with the default UL color on nonmouseover.
---------
Please exchange this coupon for one (1) free internet.
Trouble using transparent Logos? Click
here for help!
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by chiaroscuro on Wed, 12/17/2008 - 17:34That bg is the default color for Gimp.
You made my day with this.
It is much more subtle and less invasive.
Can't get over the difference it makes.
Thanks for this :=)
I use it with the default UL color on nonmouseover.
Don't you miss some reflectons ?
Re: Identify Transparent Logos Easier on UL - Stylish
Submitted by Mafia_Penguin on Thu, 12/18/2008 - 02:51I was thinking that a dark/light comparison would be best...
But on your setup, I can see why you would like a dark/really dark comparison.
---------
Please exchange this coupon for one (1) free internet.
Trouble using transparent Logos? Click
here for help!
Pages