Извините, ничего не найдено.

Не расстраивайся! Лучше выпей чайку!
Регистрация
Справка
Календарь

Вернуться   www.boolean.name > Веб-программирование > Дизайн

Дизайн Оформление сайтов

Ответ
 
Опции темы
Старый 20.12.2012, 13:05   #1
ANIK123
Знающий
 
Аватар для ANIK123
 
Регистрация: 29.11.2010
Сообщений: 244
Написано 31 полезных сообщений
(для 49 пользователей)
Радость 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, если кто помнит эту тему)))))))
__________________
Intel Core i3-4005U (1.7 ГГц), 4 ГБ ОЗУ, nVidia GeForce 940M 4 ГБ, Win8.1
(Offline)
 
Ответить с цитированием
Старый 20.12.2012, 13:29   #2
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,859 пользователей)
Ответ: html5 и css3

http://jsfiddle.net/ChYC7/

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

А при наводке чтобы вставить :hover данные - это нельзя делать. И вообще inline css - это не тру.
Если тебе нужна интерактивность, используй JS для этого и анимируй сам.
Используя PHP выводишь элемент типо такого:
<div class='block' data-degree="45"></div
Далее используя .attr в jQuery или аналогию без jQuery, читаешь эти данные и анимируешь.
Используя jQuery это просто и удобно.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
ANIK123 (20.12.2012)
Старый 20.12.2012, 13:43   #3
ANIK123
Знающий
 
Аватар для ANIK123
 
Регистрация: 29.11.2010
Сообщений: 244
Написано 31 полезных сообщений
(для 49 пользователей)
Ответ: html5 и css3

ок, пусть будет так, теперь вообще ничего не видно
про jQuery это понятно, я вот о css3 говорю, но если это не "тру" то фиг с ним )))
upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?
__________________
Intel Core i3-4005U (1.7 ГГц), 4 ГБ ОЗУ, nVidia GeForce 940M 4 ГБ, Win8.1
(Offline)
 
Ответить с цитированием
Старый 20.12.2012, 15:39   #4
Randomize
[object Object]
 
Аватар для Randomize
 
Регистрация: 01.08.2008
Адрес: Планета Земля
Сообщений: 4,127
Написано 2,323 полезных сообщений
(для 6,464 пользователей)
Ответ: html5 и css3

Сообщение от ANIK123 Посмотреть сообщение
ок, пусть будет так, теперь вообще ничего не видно
Инлайном (внутри тега) так стили не задают.
Вот рабочее решение: http://jsfiddle.net/VmgsN/3/
__________________
Retry, Abort, Ignore? █
Пека: AMD Athlon II x4 2.6Ghz; 8Gb ram; Nvidia Geforce GTX 750 Ti
(Offline)
 
Ответить с цитированием
Старый 20.12.2012, 15:58   #5
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,859 пользователей)
Ответ: html5 и css3

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

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

Сообщение от ANIK123 Посмотреть сообщение
про jQuery это понятно, я вот о css3 говорю, но если это не "тру" то фиг с ним )))
jQuery сам по себе и без CSS3 тебе не поможет. Т.к. трансформации - это CSS3 фичи, и ты можешь использовать jQuery только для их добавления / удаления.

Сообщение от ANIK123 Посмотреть сообщение
upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?
https://www.google.co.uk/search?q=my...a&channel=fflb
Главное чтобы тебе никто не вставил ничего в твой запрос в бд, что может тебе подпортить логику запроса, и напортачить. Это называется SQL Injection.
(Offline)
 
Ответить с цитированием
Сообщение было полезно следующим пользователям:
ANIK123 (22.12.2012)
Старый 20.12.2012, 17:05   #6
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 25.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,399
Написано 5,229 полезных сообщений
(для 15,135 пользователей)
Ответ: html5 и css3

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

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

Для анимации поворота (и ещё есть там масштабирования) использую вот: http://www.zachstronaut.com/posts/20...ate-scale.html
(Базарю вкусная пица пропробуй ещё захочеш)
Сообщение от ANIK123 Посмотреть сообщение
upd: что посоветуете для безопасного хранения данных в mysql? да и в общем, что еще нового?
Только PDO, только хардкор. Про прямые запросы забудь (если не любитель приключений, я пердпочитаю иметь 100% защиту от инъекций).
(Offline)
 
Ответить с цитированием
Старый 20.12.2012, 17:12   #7
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,859 пользователей)
Ответ: html5 и css3

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

Сообщение от ABTOMAT Посмотреть сообщение
Но раз уж тема зашла про jQuery.

Для анимации поворота (и ещё есть там масштабирования) использую вот: http://www.zachstronaut.com/posts/20...ate-scale.html
(Базарю вкусная пица пропробуй ещё захочеш)
Я вот этот использую: http://ricostacruz.com/jquery.transit/
Да и сайт серьёзнее выглядит
(Offline)
 
Ответить с цитированием
Эти 3 пользователя(ей) сказали Спасибо moka за это полезное сообщение:
ABTOMAT (20.12.2012), ANIK123 (22.12.2012), Randomize (20.12.2012)
Старый 20.12.2012, 17:35   #8
ABTOMAT
Ференька
 
Аватар для ABTOMAT
 
Регистрация: 25.01.2007
Адрес: улица Пушкина дом Колотушкина
Сообщений: 10,399
Написано 5,229 полезных сообщений
(для 15,135 пользователей)
Ответ: html5 и css3

Ну тот, правда, вклинивается в animate, что привычней. Но спасибо, возьму на заметку.
(Offline)
 
Ответить с цитированием
Старый 21.12.2012, 16:46   #9
Skaner
ПроЭктировщик
 
Аватар для Skaner
 
Регистрация: 30.01.2012
Сообщений: 162
Написано 40 полезных сообщений
(для 85 пользователей)
Собсна, вставлю свои 5 копеек))
Насчет CSS3, не люблю анимацию в ней, так как она иногда неадекватна... Да что там иногда, частенько!
jQ тоже не очень люблю, но использую, ибо все что нужно, там есть для удобства. Для анимирования jQuery и советую, имхо, менше будете заниматься анальными радостями, коих и так предостаточно в жизни программиста.. Да и валидность не хромает, в отличии от css3 и от "ж*п*лизания" всем браузерам, включая IE...
В html5 люблю все! Особенно canvas, вспоминается паскаль школьный)) Ностальжи)
А по сабжу, ну почти по сабжу, учить html5 и css3 рационально, так как это основа будущих приложений для Windows 8, и основа будущего ВЕБ'а... Вот))

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

Последний раз редактировалось moka, 22.12.2012 в 17:56.
(Offline)
 
Ответить с цитированием
Старый 22.12.2012, 17:56   #10
moka
.
 
Регистрация: 04.08.2006
Сообщений: 10,429
Написано 3,453 полезных сообщений
(для 6,859 пользователей)
Ответ: html5 и css3

Skaner, для инфы - CSS3 - это состовляющая HTML5 спецификаций.
(Offline)
 
Ответить с цитированием
Ответ


Опции темы

Ваши права в разделе
Вы не можете создавать темы
Вы не можете отвечать на сообщения
Вы не можете прикреплять файлы
Вы не можете редактировать сообщения

BB коды Вкл.
Смайлы Вкл.
[IMG] код Вкл.
HTML код Выкл.


Часовой пояс GMT +1, время: 19:13.


vBulletin® Version 3.6.5.
Copyright ©2000 - 2018, Jelsoft Enterprises Ltd.
Перевод: zCarot
Style crйe par Allan - vBulletin-Ressources.com