forum.boolean.name - html5 и css3

forum.boolean.name (http://forum.boolean.name/index.php)

- Дизайн (http://forum.boolean.name/forumdisplay.php?f=138)

- - html5 и css3 (http://forum.boolean.name/showthread.php?t=17655)

ANIK123

20.12.2012 17:05

html5 и css3

Совсем недавно взялся снова за сайтостроение, а тут столько всего нового в мире появилось!..) Например PDO - новая для меня весчь, так же html5 и css3 - вобщем с диким энтузиазмом взялся изучать все это счастье :)
И тут возникла проблемка (я в нее сильно еще пока не вникал, но я вижу что тут топиков и так мало в этом разделе, поэтому пусть будет) с анимацией на css3
Воот код:

Код:

<article style="

{

        width:200px;

        height:100px;

        transform:rotateZ(1deg); 

        -moz-transition: transform 2s ease-in-out; 

        border: 1px solid black;

} 

:hover{

        transform:rotateZ(-1deg);

}

"></article>

По идее должно вроде бы получится как тута: сссссылка, но в итоге получаю только накрененный блок, без анимации
Если все это проделать в стиле css то все работает, но мне надо именно прямо в html это делать (через php скрипт, вставлять свои значения)
браузер firefox, если кто помнит эту тему)))))))

moka	20.12.2012 17:29

Ответ: html5 и css3

http://jsfiddle.net/ChYC7/

Работает ок.
Используй jsfiddle чтобы делать примеры которые кто-то сможет сразу же отредактировать.

А при наводке чтобы вставить :hover данные - это нельзя делать. И вообще inline css - это не тру.
Если тебе нужна интерактивность, используй JS для этого и анимируй сам.
Используя PHP выводишь элемент типо такого:

PHP код:




<div class='block' data-degree="45"></div>

Далее используя .attr в jQuery или аналогию без jQuery, читаешь эти данные и анимируешь.
Используя jQuery это просто и удобно.

ANIK123

20.12.2012 17:43

Ответ: html5 и css3

ок, пусть будет так, теперь вообще ничего не видно
про jQuery это понятно, я вот о css3 говорю, но если это не "тру" то фиг с ним )))
upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?

Randomize

20.12.2012 19:39

Ответ: html5 и css3

Цитата:

Сообщение от ANIK123 (Сообщение 247122)

ок, пусть будет так, теперь вообще ничего не видно

Инлайном (внутри тега) так стили не задают.
Вот рабочее решение: http://jsfiddle.net/VmgsN/3/

moka	20.12.2012 19:58

Ответ: html5 и css3

Randomize, топик не читай, сразу отвечай? Зачем напрягался делал jsfiddle, если он уже был сделан во втором посту? ;)

Цитата:

Сообщение от ANIK123 (Сообщение 247122)

ок, пусть будет так, теперь вообще ничего не видно

Ну так у тебя inline стиль поломан. Это не проблема CSS3, это проблема твоего нензнания html.

Цитата:

Сообщение от ANIK123 (Сообщение 247122)

про jQuery это понятно, я вот о css3 говорю, но если это не "тру" то фиг с ним )))

jQuery сам по себе и без CSS3 тебе не поможет. Т.к. трансформации - это CSS3 фичи, и ты можешь использовать jQuery только для их добавления / удаления.

Цитата:

Сообщение от ANIK123 (Сообщение 247122)

upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?

https://www.google.co.uk/search?q=my...a&channel=fflb
Главное чтобы тебе никто не вставил ничего в твой запрос в бд, что может тебе подпортить логику запроса, и напортачить. Это называется SQL Injection.

ABTOMAT

20.12.2012 21:05

Ответ: html5 и css3

Увидел знакомые слова, обрадовался, зашёл.
css3 - анимация — фууу мерзость. Испугался, убежал. По-моему, самая бесполезная вещь в css3: она не умеет ничего, что нельзя сделать на JavaScript, но при этом ей нельзя управлять. Начорта мне анимация, которой я не могу управлять? Это как играть в Денди без джойстика.

Но раз уж тема зашла про jQuery.

Для анимации поворота (и ещё есть там масштабирования) использую вот: http://www.zachstronaut.com/posts/20...ate-scale.html
(Базарю вкусная пица пропробуй ещё захочеш)

Цитата:

Сообщение от ANIK123 (Сообщение 247122)

upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?

Только PDO, только хардкор. Про прямые запросы забудь (если не любитель приключений, я пердпочитаю иметь 100% защиту от инъекций).

moka	20.12.2012 21:12

Ответ: html5 и css3

Цитата:

Сообщение от ABTOMAT (Сообщение 247152)

Писать логику анимации в CSS3 - ну это да, глупо. Но описывать стили трансформации можно, и порой весьма удобно, т.к. нужны всего например 2 состояния блока, например небольшое увеличение с тенью позади (как будто к пользователю приближается). То тут очень удобно - описал стили, добави / убрал классы используя JS.

Цитата:

Сообщение от ABTOMAT (Сообщение 247152)

Но раз уж тема зашла про jQuery.

Для анимации поворота (и ещё есть там масштабирования) использую вот: http://www.zachstronaut.com/posts/20...ate-scale.html
(Базарю вкусная пица пропробуй ещё захочеш)

Я вот этот использую: http://ricostacruz.com/jquery.transit/
Да и сайт серьёзнее выглядит ;)

ABTOMAT

20.12.2012 21:35

Ответ: html5 и css3

Ну тот, правда, вклинивается в animate, что привычней. Но спасибо, возьму на заметку.

Skaner

21.12.2012 20:46

Собсна, вставлю свои 5 копеек))
Насчет CSS3, не люблю анимацию в ней, так как она иногда неадекватна... Да что там иногда, частенько!
jQ тоже не очень люблю, но использую, ибо все что нужно, там есть для удобства. Для анимирования jQuery и советую, имхо, менше будете заниматься анальными радостями, коих и так предостаточно в жизни программиста.. Да и валидность не хромает, в отличии от css3 и от "ж*п*лизания" всем браузерам, включая IE...
В html5 люблю все! Особенно canvas, вспоминается паскаль школьный)) Ностальжи)
А по сабжу, ну почти по сабжу, учить html5 и css3 рационально, так как это основа будущих приложений для Windows 8, и основа будущего ВЕБ'а... Вот))

Для Хранения данных используй paradox... pdo, сначала попаришься, но потом будет гораздо удобнее по сравнению с MySQL... Опять же ИМХО =)

moka	22.12.2012 21:56

Ответ: html5 и css3

Skaner, для инфы - CSS3 - это состовляющая HTML5 спецификаций.

Часовой пояс GMT +4, время: 11:24.