Welcome Guest ! Please   Login or Register


Check out our latest Premium Themes, Majestic , Majestic - Dark and Musk Themes for MyBB 1.8 Click to Shop Now

Now open for Custom Theme requests : Click to Order Now





 
Thread Rating:
  • 0 Vote(s) - 0 Average
  • 1
  • 2
  • 3
  • 4
  • 5
css3 hover effects a tutorial

myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #1
Heart css3 hover effects a tutorial

Hello friends,
Here is a new tutorial from our studios,and now we describe the css3 animation hover effects,which is a very basic tutorial which is quite essential in this modern era of design.

1.The first includes the link color animation that makes the link colors to fade :

so the basic styling of the link what you see in your global.css is seen like this :

Code:
a:link, a:visited  {
    color: #fff;
    text-decoration: none;
}

a:hover, a:active {
    color: #000;
    text-decoration: none;
}

Now in order to make the animation affect on hover we should add the webkit animation code :

Code:
-webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;

So we got the animation code and the question is where to add it ??

So we should add the code to the link code i.e : .a:link,.a:visited

Now the code looks like this after final styling :

Code:
a:link, a:visited  {
    color: #fff;
    text-decoration: none;
          -webkit-transition: all 250ms ease-in-out;
       -moz-transition: all 250ms ease-in-out;
       -o-transition: all 250ms ease-in-out;
        transition: all 250ms ease-in-out;
}

a:hover, a:active {
    color: #000;
    text-decoration: none;
}

This produces the animation effect on hover with a slow transition/fading the links.

We will update with more css3 tutorials and keep watching this forum.

Thank you,
regards,

[Image: KIDsp.png]
08-28-2012 08:17 PM
Find
3
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #2
RE: css3 hover effects a tutorial

Good tutorial i like it thanks for posting
08-29-2012 11:19 PM
Find
0
Quote




myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #3
RE: css3 hover effects a tutorial

(08-29-2012 11:19 PM)Pirate_Dominic Wrote:  Good tutorial i like it thanks for posting

Thank you,
glad you like it Smile

[Image: KIDsp.png]
08-30-2012 03:32 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #4
RE: css3 hover effects a tutorial

Envira can you add a tutorial where you explain how to make a breadcrumb like your ? Thank you Smile
08-31-2012 01:05 PM
Find
0
Quote




myskins Offline
Super Moderator
******

Posts: 13
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 204.34Points
Post: #5
RE: css3 hover effects a tutorial

(08-31-2012 01:05 PM)Pirate_Dominic Wrote:  Envira can you add a tutorial where you explain how to make a breadcrumb like your ? Thank you Smile

Yes i will make a tutorial on how to make a nice breadcrumb navigation.
regards,

[Image: KIDsp.png]
08-31-2012 03:55 PM
Find
0
Quote




Dominic L. Offline
Design the Web
***

Posts: 53
Joined: Aug 2012
Likes Received : 12

Nationality: Undisclosed

Mood: None

Points: 864.70Points
Post: #6
RE: css3 hover effects a tutorial

Thank you Smile
08-31-2012 04:07 PM
Find
0
Quote




nokia6120 Offline
Junior Member
**

Posts: 9
Joined: Jan 2014
Likes Received : 0

Nationality: Undisclosed

Mood: None

Points: 50.01Points
Post: #7
RE: css3 hover effects a tutorial

everything i'm looking for how to do seems to be right here on the one site.well done
01-08-2014 04:40 PM
Find
0
Quote




Huga2 Offline
Junior Member
**

Posts: 15
Joined: Jan 2014
Likes Received : 0

Nationality: Romania

Mood: None

Points: 1.17Points
Post: #8
RE: css3 hover effects a tutorial

Thank you for this tutorial! Smile
01-10-2014 07:01 PM
Find
0
Quote




BLoFKaNNoR Offline
Junior Member
**

Posts: 5
Joined: Jan 2014
Likes Received : 0

Nationality: Turkey

Mood: None

Points: 0.97Points
Post: #9
RE: css3 hover effects a tutorial

Thank You i am find!
01-11-2014 11:41 PM
Find
0
Quote




EliteConsoleGamers Offline
Junior Member
**

Posts: 3
Joined: Feb 2014
Likes Received : 0

Nationality: United States of America

Mood: None

Points: 3.98Points
Post: #10
RE: css3 hover effects a tutorial

can yu show a pic what it looks like when done sorry to ask
02-11-2014 02:29 AM
Find
0
Quote





Possibly Related Threads...
Thread: Author Replies: Views: Last Post
Star Simple jQuery Drop Down Login Form tutorial for MyBB envira 12 6,391 09-05-2016 10:18 PM
Last Post: Petrmix
Heart Enhanced Social Share buttons Tutorial without plugins envira 13 8,152 09-05-2016 02:37 AM
Last Post: noah
  Forum Hover Effect on MyBB Index Page envira 8 4,423 08-17-2014 11:59 PM
Last Post: !!!a
Smile Tutorial to make 4 column footer for MyBB envira 9 4,990 07-20-2014 06:43 PM
Last Post: VetFalco
Heart Tutorial to make MyBB Tabbed Profiles/ Profile Tabs with jQuery envira 33 12,814 07-20-2014 06:18 PM
Last Post: VetFalco
Lightbulb css3 hover effects a tutorial : Part II : Hover an image myskins 0 1,577 08-31-2012 04:10 PM
Last Post: myskins
Lightbulb Thead Collapse Button : Hover effects (show and hide) envira 2 2,479 08-23-2012 12:47 AM
Last Post: envira

Forum Jump:


User(s) browsing this thread: 1 Guest(s)

About Myskins

MySkins Studio is MyBB Themes Resource Website.

At MySkins Studio, We procreate MyBB Themes both custom MyBB Themes and premium Mybb Themes.We believe in quality and assure you the best MyBB themes at a very reasonable price , that suits your taste.

Feel free to drop in a request and get a quote.