Transition Buttons: iFrame

Subject: Re: Transition Buttons: iFrame Wed Jan 08, 2014 10:42 pm

Wait, so once again.
In order to use the transition buttons in the "Navigation", etc..
Does it matter if the layout already has buttons named?
or do we leave it blank so it works?

Role : Designer & Coder Location : New York City

Ance wrote:: Wait, so once again.
In order to use the transition buttons in the "Navigation", etc..
Does it matter if the layout already has buttons named?
or do we leave it blank so it works?

I'm not quite sure what you mean..
PM me with the code and tell me which section(s) you're talking about. c:

Role : Designer & Coder Location : United States

i have this so far for the tabs, but very confused how to change the coloring of when scrolled over and just the main color. Bare with me this is my first time using this type of tabs.

Code:: <style type="text/css">
#NAV{
width:200px;
left:000px;
top:000px;
text-align:center;
position:absolute;
}

#NAV a:link, #NAV a:visited, #NAV a:active{
display:block;
width:200px;
padding:10px 0px;
background-color:#0d0d0d;
color:#FFF;
text-align:center;
text-decoration:none;
font-family:Arial;
font-size:10px;
margin:2px 0px;

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease
}

#NAV a:hover{
text-shadow:0px 15px #444444;
}

</style>
<div id="NAV">
<a href="#" target="ID"> HOMEPAGE </a>
<a href="#" target="ID"> ABOUT </a>
<a href="#" target="ID"> FRIENDS </a>
<a href="#" target="ID"> SUPPORT </a>
</div>

Role : Designer & Coder Location : Somewhere

[quote="Blau"]

Dandelion wrote:

i have this so far for the tabs, but very confused how to change the coloring of when scrolled over and just the main color. Bare with me this is my first time using this type of tabs.

Code:: <style type="text/css">
#NAV{
width:200px;
left:000px;
top:000px;
text-align:center;
position:absolute;
}

#NAV a:link, #NAV a:visited, #NAV a:active{
display:block;
width:200px;
padding:10px 0px;
background-color:#0d0d0d;
color:#FFF;
text-align:center;
text-decoration:none;
font-family:Arial;
font-size:10px;
margin:2px 0px;

   -webkit-transition: all 1s ease;
   -moz-transition: all 1s ease;
   -o-transition: all 1s ease;
   -ms-transition: all 1s ease;
   transition: all 1s ease
}

#NAV a:hover{
text-shadow:0px 15px #444444;
}

</style>
<div id="NAV">
<a href="#" target="ID"> HOMEPAGE </a>
<a href="#" target="ID"> ABOUT </a>
<a href="#" target="ID"> FRIENDS </a>
<a href="#" target="ID"> SUPPORT </a>
</div>

Code:: #NAV a:hover{
text-shadow:0px 15px #444444;
}

Thats main code for hovering.
You can add:
background -> background-color:#HEX;
font color -> color:#HEX;
text to move to right -> text-indent:20px; (You can add more px if you want)
border -> border:1px solid #HEX;

Those are some basics.

Subject: Re: Transition Buttons: iFrame Thu May 29, 2014 3:20 pm

Hello~ Can somebody help me?
I don't know what I did that whenerver I change the position the tag doesn't move, it stays in the same place, you can see on my HP,
And one more thing, before that problem, when I was moving the tag it stayed under the layout image, like the layout image above the tag,
if u understand, so I wanted to know to how to make the tags above the layout (that ones you see it's just to know where it should be)

thanks~

Role : Designer & Coder Location : New York City

@Nanima;
Send your code over and I'll have a look at it for you. c:
Also, provide a more detailed (I guess?) explanation of what the problem is.. (What tag..? Just don't get that part. LOL)

Subject: Re: Transition Buttons: iFrame Thu May 29, 2014 5:45 pm

Kya wrote:: @Nanima;
Send your code over and I'll have a look at it for you. c:
Also, provide a more detailed (I guess?) explanation of what the problem is.. (What tag..? Just don't get that part. LOL)

Layout code sent~

I dont know how to explain better D: try to change the position and u will see that the button doesn't move

Subject: Re: Transition Buttons: iFrame Sat May 31, 2014 6:37 am

Hello~ here I am again xD

So I think I'm not the only person having this problem, about my HP, the buttons font look blurry and idk why (u can see that the frist button it's ok but the others no),
them I went with firefox to my hp and the font didn't look blurry, so idk why in google chrome looks blurry, so if anyone know how to fix that cuz I only like using chrome :c

Role : Designer & Coder Location : New York City

Just checked it out (On Opera though), and it does seem blurry when it is unhovered, but looks perfectly fine when hovered.. It might just be the fact that Arial can make some Kanji letters look distorted and pixelated, as well as the fact that the light blue mixes with the white in those pixelated areas causing a blurred look ><'
I'd try googling fonts that display Kanji well and then use one of those instead of Arial~

Subject: Re: Transition Buttons: iFrame Sat May 31, 2014 7:12 am

Kya wrote:: Just checked it out (On Opera though), and it does seem blurry when it is unhovered, but looks perfectly fine when hovered.. It might just be the fact that Arial can make some Kanji letters look distorted and pixelated, as well as the fact that the light blue mixes with the white in those pixelated areas causing a blurred look ><'
I'd try googling fonts that display Kanji well and then use one of those instead of Arial~

I even tryed with the pixel 04b24 font and nothing :I
I will try with other fonts x.x

Role : Designer & Coder Location : Indianapolis, IN, USA

Is your magnification on 100%?
Crtl and +

Role : Designer & Coder Location : New York City

Hae I checked it out on mine and it is blurry. (I'm always on 100% zoom xD)

Subject: Re: Transition Buttons: iFrame Tue Jun 03, 2014 1:25 pm

Sorry for the late reply xD
Well now it's all fixed and done the buttons~
I asked to turtle-trainer to and it seems that kanjis need bigger size to
don't get blurry so I changed all to hiraganas x3

Guest

Thank you for the tutorial :wee: ... Is it necessary to credit you? :cyclops:

Role : Designer & Coder Location : New York City

You're very welcome~
I hope it was helpful c:
And you don't have to, but it'd be greatly appreciated! ^^

Guest

Oh, ok, thnak your for the help. x)

Subject: Re: Transition Buttons: iFrame Wed Jul 30, 2014 9:01 pm

Nickolas wrote:: Link available. I will open new thread for all effects i know so far and changing then into horizontal menu.

Has this thread been opened yet? If so I could not find it.

Subject: Re: Transition Buttons: iFrame Wed Nov 19, 2014 1:56 pm

Role : Designer & Coder Location : Somewhere

New improved tutorial coming this weekend!! Smile

:sweeet:

Subject: Re: Transition Buttons: iFrame Sun Jan 25, 2015 4:14 pm

Thank you for the tutorial it helped, now I have to figure out on how to make them horizontal..and a small question

For this code I have no clue on what to put like for the Target area..when ever I put the link in for Href it's all good untill when you click it doesn't go anywhere..nor show anything..

Code:: <div id="NAV">
<a href="#" target=""> Homepage </a>
<a href="" target="ID"> About Me </a>
<a href="#" target="ID"> Friends </a>
<a href="#" target="ID"> Love </a>
<a href="" target="ID"> Request </a>
<a href="" target="ID"> Support </a>
</div>

Role : Designer & Coder Location : New York City

To make them horizontal just change the display from "block" to "inline-table" c:
As for the target, it'd depend on the name you gave the iframe. o;

Subject: Re: Transition Buttons: iFrame Mon Jan 26, 2015 12:07 pm

Kya wrote:: To make them horizontal just change the display from "block" to "inline-table" c:
As for the target, it'd depend on the name you gave the iframe. o;

Hm.. :bounce: slowly don't think I can do this..I didn't even name it yet..and everytime I do..the layout disappears and I'm left with a gray border box..

Role : Designer & Coder Location : New York City

Can you PM me your code so that I can have a better understanding of whats going on? c:

Subject: Re: Transition Buttons: iFrame Mon Jun 01, 2015 4:16 pm

I've seen some people actually have image buttons do this instead of text. How would I do that?

Role : Designer & Coder Location : Indianapolis, IN, USA

Hmm, I know you can. Let me see if I have the tutorial for it, we used to have it on here.
(Kya will probably beat me to properly answering your question - but I am looking into it!

» Transition Buttons: DynamicDIV
» iFrame Homepage Tutorial
» Free Resource: - : BUTTONS : -
» Custom Music Buttons / gaf210