Two Cool CSS Effects
#1
Lets try some effects with CSS.

1. Image 'Fade on Hover' Effect

You might have seen social buttons (or some images) in websites which are semi-visible but if you mouse over (hover) on the image it goes normal with a smooth 'Fade In' effect.

To do that; locate any image (may say; logo - which is located in header template) in your theme templates. The link should be like:

<img src="images/mytheme/image.png" />

Now bind it into a new id; we call it 'fadehover':

<div id="fadehover"><img src="images/mytheme/image.png" /></div>

Save the template.

Now lets define the ID we have just created. For that, open your global.css and add at the bottom:

#fadehover img {
opacity: .3;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

#fadehover img:hover{
opacity: 1;
-webkit-transition: opacity;
-webkit-transition-timing-function: ease-out;
-webkit-transition-duration: 500ms;
}

Save global.css, done. Now hover your image and see what happens.

Settings:
>> Opacity should be between 0 & 1, 0 is full transparent, 0.5 is semi-transparent, 1 is solid - not transparent.
>> duration is the mili-seconds defining how long the fade animation will take for changing its state.



2. Rollover Slide Effect

We now will learn a cool hover effect with CSS. Using this trick your logo (or orher images, text or about anything) will slide out a little and return back on lost-focus.

Locate your logo in your header template:

<div class="logo">
<a href="{$mybb->settings['bburl']}/index.php"><img src="{$theme['logo']}" alt="{$mybb->settings['bbname']}" title="{$mybb->settings['bbname']}" /></a>
</div>

Tag with a new ID:

<div class="logo" id="slide">

Now define the newly created ID "slide" in your global.css

#slide img {
	padding-left: 0;
	-webkit-transition: all 0.3s ease-in-out;
	}
 
#slide img:hover {
	padding-left: 20px;
	-webkit-transition: all 0.3s ease-in-out;
	}

Save both header template and global.css.
Hover your logo image (or where you've applied) and see what happens.
Reply
#2
Thanks for this Smile
[Image: 40DS6Te.png]

Reply
#3
What if you are not using webkit? Maybe say Firefox or Internet Explorer. Isn't webkit only for Chrome and Safari or something.
Reply
#4
Thats true. webkit is for open source browsers as you've mentioned.
That was only example. You might be repeating the same code with the following prefixes in place of -webkit- for cross browser compatibility; but I'm not confident about IE. Sad

-moz-
-khtml-
-icab-
Reply
#5
Nice little css edits.

I am using firefox and IE and webkit works fine for me.
Reply
#6
Thanks for the feedback Big Grin
Reply
#7
Transitions are supported only by

-moz- (Firefox)
-webkit- (Chrome & Safari)
-o- (Opera)
[Image: MaDuhur.png]
by Dukhor, IcyBoards Community Forums
Reply
#8
(2013-01-19, 07:22 PM)ElectricShock Wrote: Transitions are supported only by

-moz- (Firefox)
-webkit- (Chrome & Safari)
-o- (Opera)

False.

http://caniuse.com/css-transitions
Reply
#9
If your users have got LATEST BROWSERs, then only this small thing will work:

transition: 0.2s ease-in-out 0s;
Reply
#10
Is there anyway I can change it so the logo gets lighter when I hover over it, instead of the other way around?

Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)