Alexander.A.Ewetumo

Hey CSS MAdness

Monday, 7. September 2009, 20:59:20

Notice:

for the next few days or weeks anyone visiting myblogg might notice a defacement of some sort or kind with the menus..images or the whole page goes busurk be not afraid u are neither responsible nor is ur browser vageuly madd..lol
I choose to practice a few css n well rather THAN make myblogg look well good rather make it look crazy weird like in a sort of a good way....yes some tins may go out of place like images within frames..will try to fix this later...am jst putting up some css off head n see hw they play...so if u hav any suggestion..crazy coes u wanna throw ..be my guess...
I here by Declare myblog CSS playground were we can test n de-test and over-test all possible effects..i do hope to implement jquery into the blogg soon also...so watch out

i get my cool backgrounds n images from

HDWALLPAPERS

Opera On ChromRuby On Rails

Comments

daneru # 9. September 2009, 05:55

i don't know what to say!!!! how'd you do the background image resurface and what is it called anyway? lol

this is so awesome!

daneru # 9. September 2009, 05:58

and just now i noticed the banner also... how's that with the mouse-over effect (if that's what it is called)?

aaaaaaaaarrrgghhhh! i am dying to know the code. lol

Trinox3 # 9. September 2009, 06:06

lol....sure sureon the background effect :
i use the normal background code and then used the #wrap4 code for a show n hide effect using the opacity functions here it is

#wrap4{
opacity:0.1; //or any value u fill will fit ur blog dnt let it be to transparent..thou i plan on using 0 transparency for anther effect later

}

then create a #wrap4 for over effects

#wrap4:hover{
opacity:0.9;

}

that all to it..and ur image will stand out until the mouse is on ur page

On the header part:
i jst did the same thing like the one above but with a different effect,like this

#top { code with normal background img}

#top:hover{ use a different background img here for it }

so when the mouse overs on it it will show the background u use for #top:hover n when u remove the mouse it shows #top

kenshii101 # 9. September 2009, 06:36

trinox, dude im going have to get some of them cool designs myself

Trinox3 # 9. September 2009, 06:45

lol....wel welcome to the club oh great general if u hav any cool effects do share here n will put it up n see hw it looks...lol

kuazay # 9. September 2009, 07:03

Kenshi brother!!!

kuazay # 9. September 2009, 07:08

here is the code for resizing the banner:

#top2 { background:#000 url (image url here); height:imageheightinpixels;
}

and another code which i find a little tricky because there are other elements included:

#top {
font-size:12px;
width:imagewidthinpixels;
margin:0 -10px;
text-align:left;
background:#c1ccd9 url(image url here) top left;
height:imageheightinpixels;
color:#516b92;
}

Trinox3 # 9. September 2009, 07:19

tanks daneru ...totally awesome brother..... see awesome of daneru the great one

kuazay # 9. September 2009, 07:33

font size is for the menu. while the text alignment is for the page title and subtitle.

Trinox3 # 9. September 2009, 07:39

col...wel talk later i gotta go n hav my bath....til nxt Great one daneru..kip rocking havoc wit css

man...lol

kuazay # 9. September 2009, 07:50

lol.. nice!

Trinox3 # 9. September 2009, 15:57

Originally posted by Furie:

You can rename all sidebar elements if you know the names (something that took me ages to do). Viewing the source code is a good way to get started. The following line is what you're after.
#shoutbox h2 {content:"New Title";}
As for the menu, it's pretty easy to use padding to move it over to the left or right. As you've probably guessed, this design was built assuming 6 menu items. My latest themes assume there will be more so they assign a maximum width for the menu too, meaning anything that goes outside the width gets put on a new line.

Trinox3 # 12. September 2009, 18:06

.....the codes is thanks to :
Amnith

#smilies a:hover { padding-left: 0px !important; }

The code stops the smilies from sagging to the left when u over the mouse on them

Originally posted by amnith:

!important is the override "operator" for CSS. !important does mainly two things:
- If you have any underlying elements that matches, it will override them.
- It overrides any current style to the element.

Say that you have the structure:
div
ul
li
a
/li
/ul
/div

if you write:

div a { color: red; } it won't work, as there's no directly underlying a to the div. However, div ul li a will. You can however force the div a to work, by putting: div a { color: red !important; }.

If you have the following CSS structure:
div ul li a {
  color: blue; 
}

div a {
  color: red; 
}
The a will be blue, but if you have
div ul li a {
  color: blue; 
}

div a {
  color: red !important; 
}
it will be red.

It's also worth noting that if you have:
div a {
  color: red !important; 
}

div ul li a {
  color: blue; 
}
The result will still be red, as !important overrides any lesser colors, even though they are written after.

I hope this was of any clarification to you. Cheers!

Trinox3 # 21. September 2009, 14:34

wow...awesome bash..tanks

Trinox3 # 21. September 2009, 14:42

i feel ur pain..its the same here

daneru # 21. September 2009, 14:53

pain in here too... need some help and medication! haha^^

daneru # 21. September 2009, 14:55

Originally posted by bashphoenux:

to add a pic to the bottom of the side panel

does this go below the visitors of the page?

Trinox3 # 21. September 2009, 15:07

lol..sorry let me increase the opacity a little

Trinox3 # 21. September 2009, 18:06

The code u requested bash!

Originally posted by Trinox3:

lol....sure sureon the background effect :
i use the normal background code and then used the #wrap4 code for a show n hide effect using the opacity functions here it is

#wrap4{
opacity:0.1; //or any value u fill will fit ur blog dnt let it be to transparent..thou i plan on using 0 transparency for anther effect later

}

then create a #wrap4 for over effects

#wrap4:hover{
opacity:0.9;

}

that all to it..and ur image will stand out until the mouse is on ur page

On the header part:
i jst did the same thing like the one above but with a different effect,like this

#top { code with normal background img}

#top:hover{ use a different background img here for it }

so when the mouse overs on it it will show the background u use for #top:hover n when u remove the mouse it shows #top

Trinox3 # 21. September 2009, 18:24

u welcome

Trinox3 # 22. September 2009, 11:16

Originally posted by bashphoenux:

bashphoenux # 22. September 2009, 10:30


#comment { background: #fff/*background color for comment box*/ url(image) no-repeat scroll center; 
color:#0099FF;
 }

courtesy TAMIL

Courtesy of BashPhoenix.

daneru # 22. September 2009, 15:59

What's the code for Mr. Bash?

Trinox3 # 22. September 2009, 17:33

oh sorry mybad dude

daneru # 22. September 2009, 17:49

wahahaah!!!!... love it! i see now... i was on my mobile earlier.

Trinox3 # 22. September 2009, 17:53

lol...ya its totally cool

Trinox3 # 24. September 2009, 21:10

easy changing of ur avatar when opera uploads fail

#useravatar{
background-image: url(...)center;
}

change her life

Blog search

Download Opera, the fastest and most secure browser

Photos

Friends

Shoutbox

Trinox3
2009-11-13 13:30:22

lol...i gt it since its alpha stage...love it..better graphics support for intel bybye exa welcome uxa
decodedthought
2009-11-13 10:48:28

tried the new KARMIC?
decodedthought
2009-11-13 10:48:21

hi
Trinox3
2009-10-07 23:22:50

so hws u lately
ur-xtacy
2009-10-07 03:13:58

nah it's ok
Trinox3
2009-10-06 21:22:18

hey its goo to hear from u....tot u hating me stil cz of the misunderstaning that took place on ken's page

Latest comments

Alexander.A.Ewetumo

thanks
Alexander.A.Ewetumo

well its stuck to where it is...am kinda being held up by anothe ...
Abhinav

:up:
Abhinav

how is the site shaping up?
Alexander.A.Ewetumo

thanks man
Abhinav

:up:

Poll

For all who care to note,which would you prefe 3DsMax or Blender?

3DSMax
(25%)
Blender
(75%)

Total: 4 votes

November 2009
M	T	W	T	F	S	S
October 2009December 2009
						1
2	3	4	5	6	7	8
9	10	11	12	13	14	15
16	17	18	19	20	21	22
23	24	25	26	27	28	29
30

Latest blog posts

book

Mathematics for game developers
This book is awesome for those short on knwing maths used for games it is for and only for game devlopers,it generals itself over all parts 4m the basic maths vectors,matrices,etc down to physics,game engines,computer graphics concept.If u interested

Hey CSS MAdness

Comments

Write a comment