ID:117627
 
Keywords: css

Poll: Do you like it when blog items are less visible unless the mouse is over them?

Yes 17% (6)
No 42% (15)
Don't care 40% (14)

Login to vote.

So, I noticed a lot of blogs are utilizing CSS that lowers the opacity of items unless the mouse is hovering over them.

This ticks me off, because I never put the mouse over text I'm trying to read.
Why, you ask? Because I'm actually trying to read it, and the mouse would be in the way.

Why do people do this? It's a little annoying.
It feels awkward to have to put the mouse over the stuff I'm trying to read and have to try and make sure it's not blocking my view at the same time.

I would much prefer it if everything was visible at all times.

Another thing is if I want to see everything on the page, I actually have to mouse over it! That's an unneeded hassle that I shouldn't have to deal with.

And don't respond with, "then don't visit those blogs." I actually visit the blogs for the content, so something like this isn't going to make me stop.

</rant>

(Yay! A poll!)
Or people who hide their nay button but not the yea button.
For the BYONDcast blog I almost wanted to hide the +yea button so people would quit mis-clicking it.
Seriously, Dream Seekers. Get your aim up! ;)
This is actually a pretty nice effect, but only when it's done right. Sometimes it's still readable (I'd say 90% is readable), but mousing over it makes it more opaque. However, it'd get annoying if someone had it at 50% by default, for example.
Not to mention layouts that are based on linear pixel dimensions rather than percentages(see Lige with a non-widescreen monitor), pages that have their own built in scroll bars(as opposed to the browser scroll bars, see Bravo1), and backgrounds that match the text color(see anyone involved in anime games).

If you're going to complain about the stupid/annoying things people can do with their CSS, you might as well cover them all.
Robertbanks2 wrote:
Not to mention layouts that are based on linear pixel dimensions rather than percentages(see Lige with a non-widescreen monitor), pages that have their own built in scroll bars(as opposed to the browser scroll bars, see Bravo1), and backgrounds that match the text color(see anyone involved in anime games).

If you're going to complain about the stupid/annoying things people can do with their CSS, you might as well cover them all.

Oh dear. I know exactly what you're talking about.
I was just ranting about this, because it bothers me the most readily. (Also, I haven't seen the text color matching background color yet.)
Complex Robot wrote:
I was just ranting about this, because it bothers me the most readily. (Also, I haven't seen the text color matching background color yet.)

The text color issue comes into play most often when people make their background image something with a lot of different colors, like an anime background. I suppose if you don't read those sorts of blogs you wouldn't come across it very much.
Lige wrote:
Actually, I decided to change one thing about my CSS due to your rant. Now my blogs and comments are no long transparent (mainly because I blog weekly), you're welcome.

Thanks a lot! That's awesome.
Now I can read your updates to Invasion in pleasure.
Robertbanks2 wrote:
I suppose if you don't read those sorts of blogs you wouldn't come across it very much.

It seems like a no-brainer that people would know to make their text legible. o.o
Implying that the people who generally post about anime games possess brains.
!! Is this post in reference to my members page :O?

I think my opacity hover affect is alight.. :(
Yours isn't that bad.
Ones like here or how Lige's used to be are the bad ones.
I'd prefer if that effect wasn't there at all, though. Just personal opinion.
I agree with the fact that I never put my mouse over a wall of text I'm trying to read, but for some reason I find it cutting-edge and strangely... kinda fun?
@ Trueseeker lol i kind of find it fun too.

@CR i got access to Chibi Gamings site and i changed the css so that you cant complain about it any more :P

Also Lige has sorted his css too.
Do you have your older CSS? The one that was compact. I was wondering if there was any way I could possibly have it so I can attempt to edit it to my own liking.
Well, technically I don't, but I edited some of the percentages on some of the tags in terms of width, height and position to change it from that to this.
Complex Robot wrote:
Well, technically I don't, but I edited some of the percentages on some of the tags in terms of width, height and position to change it from that to this.

Would you mind if I got it? I really liked the look of it before and I have some ideas I wanna try it on.
body {
font-family: 'Book Antiqua', 'Palatino Linotype', serif, 'Lucida Sans Unicode', 'Segoe UI', Tahoma, 'Bitstream Vera Sans', Verdana, Helvetica, Arial, sans-serif;
font-size: 14px;
color: #D0D0FF;
margin: 0;
background: #484050;
}

.page {
position: static;
}

.page_header {
position: relative;
left: 10%;
}

.blog_background_outer {
text-align: relative;
}
.blog_background_inner {
display: inline-block;
position; relative;
width: 80%;
text-align: left;
}

#member_info {
left: 0%;
}

.center, #center {
width: 80%;
position: absolute;
top: 100px;
left: 20%;
}

.boxes {
width: 20%;
position: absolute;
top: 100px;
}

#member_favorites {
position: absolute;
left: 15%;
}

#keyword_list > ul, .keyword_list > ul {
list-style: none outside none;
}

#keyword_list > ul li, .keyword_list > ul li,
.link, .link * {
display: inline;
padding: 0 3px 0;
}

#favorite_games_box > * > .link *
{
display: inline-table;
padding: 4px 1px 4px;
}

.image_text {
display: table-row !important;
}

.medal > * { display: none; }
.medal > *:first-child { display: inline; }

a, a:link {
color: #4060FF;
text-decoration: none;
}

a:visited { color:#9078C8; }


a:hover {
text-decoration: underline;
color: #C04040;
}

a:active { color:#9078C8; }

/* Header is a label in the member info box, such as "Joined:". */
.header {
font-weight: bold;
margin: 2pt 4pt;
font-family: Georgia;
}

/* Data in the member info box, such as "Nov 99". */
.info_text {
font-weight: normal;
font-family: Georgia;
}

.box, .big_box {
text-align: center;
margin: 0 0 1px 0;
padding: 0 0 0 0;
color: #D0D0D0;
background: #202020;
border: 1px dashed #FF8080;
border-radius: 8px;
}

.big_box > .title, .box > .title,
.big_box > h3.title, .box > h3.title {
color: #D8D8D8;
background: #703030;
width: auto;
margin: 0 0 1px 0;
padding: 0px;
font-size: 12pt;
font-family: Georgia;
font-weight: normal;
}

.big_box .box_content > .title, .box .box_content > .title,
.big_box .box_content > h3.title, .box .box_content > h3.title {
color: #D8D8D8;
background: #703030;
width: auto;
margin: 0 0 1 0;
padding: 3px;
font-family: Georgia;
font-weight: normal;
}

.big_box > .title a, .box > .title a
.big_box .box_content > .title a, .box .box_content > .title a {
color: #D8D8D8;
}

.post, .comment {
background-color: #202020;
color: #D0D0D0;
border: 1px dashed #8080FF;
border-radius: 12px;
}

.post .title, .comment .title {
color: #C0B0FF;
background-color: #303070;
font-family: Georgia;
font-weight: normal;
}

.post .title {
text-align: center;
}

.comment .title a {
color: #C0B0FF;
}

.slugline {
border-top: thin dotted #909090;
font-size: 80%;
color: #B8A0FF;
margin-left: 5pt;
margin-right: 5pt;
margin-bottom: 1pt;
clear: both;
}

caption {
font-family: Georgia;
}

.blog_calendar_table {
font-family: Georgia;
}

.blog_calendar_table th {
color: #B8A0FF;
text-align: right;
}
.blog_calendar_table td {
color: #B8A0FF;
text-align: right;
}

input {
color: #D0D0D0;
background-color: #202020;
border: 1px dotted #C04040;
border-radius: 4px;
}

textarea {
color: #FFF;
background-color: #202020;
border: 1px dotted #C04040;
border-radius: 8px;
}
Thank you. :D
Well, even if this spawned a bunch of CSS copycats, I think I'd be honored. XD