- Top
- About
- Privacy
Let's spice up a website with more blinky blinky effects.
I thought, tabs which will glow like neon signs when you rollover with your mouse on them would look fantastic. You even don't need JavaScript just CSS!
Hover selector and transition property are the magical words to make things happen. After finishing writing the code for the tabs make them look nice with CSS (#tabs). To add a glowing effect to the tabs we want to change the shadow. The CSS property box-shadow allows us to change the color and shadow of a box. Here is the code: box-shadow:[x-coordinate] [y-coordinate] [blur] [color]; . By assigning the hover (:hover) selector to the tab class (.tabs) it will create the rollover effect.
.tabs:hover describes how the property box-shadow should change. Property details, duration and timing of the effect is set by transition. Don't forget to make that property browser friendly to all browsers and the prefixes -o-, -webkit-, -moz- and -ms- to transition.
Since we want to change all box-shadow properties use "all" to change them all.
Hover is both a blessing and a curse- it's not really Android and iPhone compatible. I will work on this issue!
I thought, tabs which will glow like neon signs when you rollover with your mouse on them would look fantastic. You even don't need JavaScript just CSS!
Hover selector and transition property are the magical words to make things happen. After finishing writing the code for the tabs make them look nice with CSS (#tabs). To add a glowing effect to the tabs we want to change the shadow. The CSS property box-shadow allows us to change the color and shadow of a box. Here is the code: box-shadow:[x-coordinate] [y-coordinate] [blur] [color]; . By assigning the hover (:hover) selector to the tab class (.tabs) it will create the rollover effect.
.tabs:hover describes how the property box-shadow should change. Property details, duration and timing of the effect is set by transition. Don't forget to make that property browser friendly to all browsers and the prefixes -o-, -webkit-, -moz- and -ms- to transition.
Since we want to change all box-shadow properties use "all" to change them all.
Hover is both a blessing and a curse- it's not really Android and iPhone compatible. I will work on this issue!
No comments:
Post a Comment