HomeHome  SearchSearch  Rules & Guidelines  Staff List  MemberlistMemberlist  RegisterRegister  Log inLog in  
Announcements

September 13th, 2017: Adding tutorials for the badging community! We're looking for volunteers to feature and help us write guides - PM Panton to get started with our project!


July 3rd, 2017: Canvas Tutorials is currently undergoing a major revamp. Please excuse any hiccups or glitches.


Coming soon

About Us

Canvas creates and supports an IMVU education environment. We offer tutorials and assistance from some of the community's most active and knowledgeable. Tutorials by users, for users!

Staff
Staff Updates
Important Links
Statistics
We have 1428 registered users
The newest registered user is zZbannyezZ

Our users have posted a total of 2569 messages in 157 subjects
Canvas Time
Share | 
 

 Transition Buttons: iFrame

View previous topic View next topic Go down 
Go to page : Previous  1, 2, 3  Next
Ance

avatar
View user profile

PostSubject: 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?
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Thu Jan 09, 2014 2:39 pm

@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:

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Gladiolus

avatar
View user profile
Role : Designer & Coder
Location : United States
http://migladiolus.tumblr.com/

PostSubject: Re: Transition Buttons: iFrame Sun Feb 02, 2014 2:29 pm

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>
Back to top Go down
Nickolas

avatar
View user profile
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

PostSubject: Re: Transition Buttons: iFrame Sun Feb 02, 2014 3:58 pm

[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.

__________________________________


If you have any questions or suggestions how to improve our forum & if you have any complains feel free to send me an pm here or via imvu.
My Website Shop

Back to top Go down
Nanima

avatar
View user profile

PostSubject: 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~
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Thu May 29, 2014 3:23 pm

@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)

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Nanima

avatar
View user profile

PostSubject: 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
Back to top Go down
Nanima

avatar
View user profile

PostSubject: 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
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Sat May 31, 2014 7:08 am

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~

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Nanima

avatar
View user profile

PostSubject: 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
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Transition Buttons: iFrame Sat May 31, 2014 12:12 pm

Is your magnification on 100%?
Crtl and +

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Sat May 31, 2014 1:22 pm

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

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Nanima

avatar
View user profile

PostSubject: 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
Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: iFrame Tue Jul 08, 2014 4:33 pm

Thank you for the tutorial :wee: ... Is it necessary to credit you?  :cyclops:
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Tue Jul 08, 2014 4:37 pm

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

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Guest
Guest
avatar

PostSubject: Re: Transition Buttons: iFrame Tue Jul 08, 2014 4:39 pm

Oh, ok, thnak your for the help. x)
Back to top Go down
trippmachine

avatar
View user profile

PostSubject: 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.
Back to top Go down
Othala

avatar
View user profile

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

ty
Back to top Go down
Nickolas

avatar
View user profile
Role : Designer & Coder
Location : Somewhere
http://niq-olas.com/

PostSubject: Re: Transition Buttons: iFrame Thu Jan 15, 2015 11:07 am

New improved tutorial coming this weekend!! Smile

:sweeet:


__________________________________


If you have any questions or suggestions how to improve our forum & if you have any complains feel free to send me an pm here or via imvu.
My Website Shop

Back to top Go down
Nysroghs

avatar
View user profile

PostSubject: 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>
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Sun Jan 25, 2015 7:26 pm

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;

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
Nysroghs

avatar
View user profile

PostSubject: 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..
Back to top Go down
Valoish

avatar
View user profile
Role : Designer & Coder
Location : New York City
http://kyaimvu.deviantart.com

PostSubject: Re: Transition Buttons: iFrame Mon Jan 26, 2015 1:23 pm

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

__________________________________
CanvasTutorials
ADMIN


Technician | Theft Council | Forum Design
"Love Truth and Pardon Error."

Back to top Go down
AvaABlake

avatar
View user profile

PostSubject: 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?

__________________________________
Back to top Go down
Pantone

avatar
View user profile
Role : Designer & Coder
Location : Indianapolis, IN, USA
http://pantonedoesgraphics.tumblr.com/

PostSubject: Re: Transition Buttons: iFrame Mon Jun 01, 2015 4:55 pm

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!

__________________________________
CanvasTutorials
ADMIN

Human Resources │ Account Activation │ Ban Control
"May the Force be with you."
Back to top Go down
 
Transition Buttons: iFrame
View previous topic View next topic Back to top 
Page 2 of 3Go to page : Previous  1, 2, 3  Next

Permissions in this forum:You cannot reply to topics in this forum
 :: HBAD REALM :: HBAD • Coding-
Jump to: