css infos

Freeway
1

I would love to learn more about css transitions.
Like:

-moz-transition: all .5s;
-webkit-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;

Does someone know good resources / websites?
In best case with very good examples.

How do you exactly embedd it?

Thanks a lot,
Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

2

I can only speak for myself - but all this is a question of:

  1. Ability using external stylesheets - or “manual” created style sets

  2. Being able to classify items

  3. The fun of trial and error

I use the combination of animate css - http://daneden.github.io/animate.css/ and waypoints - Waypoints

for triggering functions on scroll. All this will be part of my screencast series soon (I started but stuck for the moment) in order to enable people to use this stuff seamless and produce stuff like:

http://backstage.kimmich-digitalmedia.com/templates/GridMeister/index.html

or even

http://backstage.kimmich-digitalmedia.com/templates/walk-through-the-park/index.html

Tim has a template (monarch I think it is called) where specific things are even actionized (just a guess). He is on a combination of animate.css and wow.js (which is library free?) - I have to dig in this as well.

A good article to start is:

http://blog.alexmaccaw.com/css-transitions

Happy hard-coding :slight_smile:

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

3

The only additional vendor prefix you will need is -webkit- … you can skip both -o- and -moz-.

  • Mozilla doesn’t need them and accepts the both -webkit- prefixed as the standard ‘un-prefixed’ css
  • First, Opera never was, is or will have plans supporting these -o- vendor prefixed css. Second, with 1,5% usage share … why even bother

Richard

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

4

Thanks Thomas, I already know http://daneden.github.io/animate.css/ and find these transitions very nice, but did not want to invest that much time in trial and error how to embeed it.

Here are other interesting examples:

http://www.olivergast.de/wp-content/demos/transitions/index.html

But I still wonder, how to embed them. For instance:

.box {
background: #333;
-webkit-transition: all 2s ease;
-moz-transition: all 2s ease;
-o-transition: all 2s ease;
transition: all 2s ease;
}

.box:hover {
background: #999;
}

The web-kit, I would use the extended dialog

, but how and where to place the .box:hover?

…

  • Richard,

I have this code:

.fwNavItem a { -moz-transition: all .5s; -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; (which trigger the css menu nicely via "after head") out oft a softpress template and thought this is the standard.... Thanks all for your insights. Hanna _______________________________________________ freewaytalk mailing list email@hidden Update your subscriptions at: http://freewaytalk.net/person/options
5

… but did not want to invest that much time in trial and error how to embeed it.

Hm. Interesting attitude. So how much investment do you expect from us? Just to figure out the length of my answer.

But it’s more about classifying rather than extend identifier’s properties.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

6

*Thomas | Well, I believe the forum exists to exchange ideas and technique one already knows and shares.

Nobody needs to write anything, just if one like and has time.
Maybe there is somebody who has already done this css stuff with success.

If not, it is ok.
Thanks anyway. Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

7

*Thomas | Well, I believe the forum exists to exchange ideas and technique one already knows and shares.

This is basically correct - if it comes to the use of Freeway - the app, its actions.

But here we talk about hand-hack - or extending Freeway with external stuff. Some call it Coding. Furthermore there are very different methods how to do - I have one, others have different methods.

So there is no:

“Click here - insert this, click OK and done”. That’s the point I’m referring to.

And I had to learn in the past, that Freeway users simply do not want to deal with code. So where to start?

The transition is to add to the item via extended DIV-Styles dialogue. Then you’ll add a class fade in the DIV dialogue of the same item. The following code in the before end head of the page:

<style>
.fade {
    opacity:0.5;
}
.fade:hover
{
opacity:1;
}
</style>

This is the 1. Fade in effect described on:

I usually put all those “fancy stuff” on an external stylesheet to make it re-usable for other projects as well.

Further notes?

Yes - classes can’t overwrite ID styles. So if you need to overwrite them, either remove the properties for you DIV in Freeway or add a !important behind each properties value.

Furthermore you can check actions forge for CSS3 actions. Probably some things are already covered there without any need of diving in too deep.

Cheers

Thomas

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options

8

*Thomas, thank you very much for your detailed answers, I hope I can try these as soon as possible!

Thanks again, Hanna

freewaytalk mailing list
email@hidden
Update your subscriptions at:
http://freewaytalk.net/person/options