Any good animation/conditions tricks known without JavaScript?

HTML & CSS
1

Hi. I’m searching for any kung-foo tricks. Like animation, condition, something that we technically use JavaScript (and it’s libraries for), but only with HTML 4.1/CSS 3.

Something like this:

It looks pretty simple. But you gather the idea, I COULD’VE done this with jQuery.

$("input").focus(function () {
    $(this).addClass("bigger");
});

But that is a little trick that will work on browsers with HTML 4.1 and CSS3 capabilities. And is a good substitute to be honest. Does anybody maybe know tutorial, or could share some tricks that I could learn? I’m interested in ANYTHING from that kind.

1 Like
2

Here is a page you can get started with:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations

3

I know about CSS3 animations… I don’t you think you understood me quite.

4

Perhaps you need to explain what you are seeking again in a different way.

5

Hmmmm… okay… another way…

I could use

$("input").focus(function () {
    $(this).addClass("bigger");
});

As per natural. But, if user has no JavaScript enabled, I could use this hack:

input {
  background-color: #222;
  border: 1px solid #111;
  padding: 2%;
  color: #EEE;
  transition: all .5s ease-in-out;
}

input:focus {
  padding: 3%;
  font-size: 1.2em;
}

And it would work perfectly well in browser supporting HTML 4.1 and CSS 3.

Are there any other hacks I should be knowing about? I’m seeking for unstandard but valid HTML 4.1 + CSS 3 syntax that could replace JavaScript.

Does that explain it?

6

JS is a big subject with an infinite range of uses. It would make more sense to give us a particular script and ask how it could work with JS turned off.

7

I gave one in first topic, the facto, I mentioned it twice. There’s easy replacement of JavaScript/jQuery code with couple lines of CSS. And I’m looking for it’s brothers.

8

I believe that @Webkitnote is asking for CSS equivalents (which he refers to as “hacks”) for behaviors for which he has comfortably used JavaScript or jQuery in the past. It’s a fair question but not one that I can answer.

I’ve always considered JS to be the fallback mechanism of choice when CSS cannot provide a desired behavior. I don’t consider properly employed CSS to be a “hack”, especially for JS, and I don’t know of any tutorials or books that have been written from that perspective. Perhaps someone else does.

My advice to Webkitnote would be to “can” the idea of using JS for awhile except where CSS cannot provide the desired behavior. Experience with HTML/CSS is a great teacher and he does seem to have a good CSS foundation so it shouldn’t be too much of a stretch.

Just my 2 cents worth.

3 Likes
9

AFAIK there is no “this CSS can replace this JavaScript” type of list.

There are
CSS Animations
and
CSS Transitions

Browser support varies and not every CSS property can be animated but a lot can.

10

@StevenHu

Here is a page you can get started with:
https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Animations/Using_CSS_animations1

I tried with five iPad mini browsers and could not find a way to stop the page from pulsating :slight_smile:

11

You can do modals in pure CSS.

The checkbox hack can also do a lot of things previously requiring javascript to do.

1 Like
12

Exactly these things!!

PaulOB for president!!

This is 2nd question you answer perfectly to what’s requested.

1 Like
13

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.