|
Всем привет! Вот уже пять лет как я занимаюсь веб-программированием. Сначала, как дитя малое, я играл с CSS и HTML, но затем меня потянуло в сторону php и mysql. Но я понял, что без jQuery хороший сайт не написать - и изучил эту библиотеку (как разработчик скажу что она великолепна  . Но имея диплом художника, меня не переставало тянуть в сторону чего-то визуального (наверное по этому я ненавижу консоль Windows). И шаг за шагом, все больше внимания я начал уделять дизайну своих проектов, выработав некоторые концепции для себя. И сейчас я их покажу на примере devBattles.com - моего текущего проекта.
Используем CSS3 для создания креативного дизайна
Все дизайнеры любят замудренно что-либо сказать, а когда их просишь конкретики - они скажут "Как вы смеете! Это искусство! Вам никогда не понять таких высоких материй!".
Но в отличии от высоких метров, сейчас я перечислю те CSS3 функции, с помощью которых можно легко добавить креативности в любой дизайн:
linear-gradient и radial-gradient - градиенты очень легко использовать. Но их плюс в том, что можно делать background полупрозрачным без использования opacity - а значит, контент такого элемента будет видимым по прежнему на 1.0. Также, градиенты можно создавать под углом и направлением, например - создать флаг России без картинки или же паралелограмм. Но не забывайте о префиксах, чтобы код был кроссбраузеным
position:absolute в сочетании с отрицательными margin
Очень простой пример - вам нужно создать кнопку закрытия модального окна в правом верхнем углу блока, но чтобы она отступала от краев на n-пикселей.
transform : rotate
transform сам по себе волшебный CSS3 объект, но transform:rotate позволяет наклонить блок на n-градусов. Если использовать transform вместе с overflow:hidden - заметите как просто создать кнопку в виде треугольника в правом верхнем углу диалового окна. Для этого достаточно родительскому блоку прописать overflow:hidden, а внутри него div повернуть на 45% и с помощью position:absolute выровнять в правом верхнем углу.
Все элементы должны выравниваться относительно один одного и родительского блока.Такое простое правило спасло не один проект. Визуально дизайн гораздо проще воспринимать, когда есть хоть какой-то порядок.
Отступы между блоками разных уровней должны быть разными, но главное не переборщить - слишком большие или малые отступы создадут вид "обвалившегося" дизайна - нужно найти золотую середину. Порой 1px играет важную роль в виде надписи кнопки.
Инверсия цвета. Чуть бессмыслица, но я заметил, что если вместе с #f60(оранжевый) использовать инверсию #06f(синий) - получается довольно не плохо. В реальной жизни эту концепцию например активно использует Gillete и Aqua Fresh.
Bootstrap экономит время разработчика. Ведь в нашем распоряжении более чем сотня разных объектов не говоря уже о выравнивании по сетке и адаптированном дизайне.
jQuery годится для манипуляций дизайна который сверстан в CSS, а не для создания дизайна. Даже jQuery плагины используют свои CSS файлы для работы над дизайном. |
|
|
|
|
