Все для веб-дизайнера
Архивы за Ноябрь, 2013
Создаем эффект «живого» фото для сайта на CSS
30 Ноя
«Живые» фото стали достаточно популярны в последнее время, зачастую прибегают к использованию Gif-анимации, но хорошая картина получится достаточно тяжелой, по этому можно пойти другим путем, и реализовать интересную «живую» фотографию используя при этом исключительно трансформации CSS3. У нас будет шесть изображений, каждое из которого будет отвечать за определенную фигуру, мы разрезали специально так изображение, чтобы его можно было оживить, здесь будет реализован небольшой эффект параллакса.
Создаем боковое меню для сайта c помощью CSS
27 Ноя
В последнее время стали весьма популярны меню, которые занимают минимум места, при этом оснащены красивой анимацией. В данном уроке мы рассмотрим как создать такое меню. Аналогичное меню можно просмотреть в действии на сайте UI8. Там реализована навигация, которая находится слева, при нажатии на иконку происходит плавное сдвижение панели сайта влево, благодаря теням будет создаваться эффект глубины. В нашем уроке мы реализуем возможность шести панелей, которые будут находится в разных уголках сайта.
Создаем слайдер изображений с помощью CSS3
24 Ноя
В данном уроке мы рассмотрим процесс построения весьма интересного ротатора изображений. У нас будет три панели, в котором будут размещаться с медиа-материалами, кроме этого контейнера будут стилизованы различными иконками с ссылками и иконками. Ротатор не будет автоматический, при нажатии на иконки перехода два боковых слайдера будут разъезжаться, а центральный, сначала будет отдаляться, а затем плавно увеличиваться, при этом будет создаваться весьма интересный объемный эффект, который наверняка привлечет взор пользователя.
Подсветка синтаксиса кода на сайте с помощью JS
21 Ноя
Недавно мы натолкнулись на просьбы, объяснить, рассказать и реализовать возможность подсветки кода на сайте, зачастую это необходимо, чтобы выделить код на сайте, та придать ему максимум внимания. Реализовать такую возможность достаточно просто, для этого можно использовать сторонний плагин, или написать самостоятельно стилизацию. В данном уроке мы рассмотрим как можно все это организовать заложив при этом минимум усилий. Все это мы выполним в минималистическом стиле, основной уклон будет на дизайн в стиле OSX.
Как создать эффект снега на сайте с помощью JS
18 Ноя
Вот и наступила зима, выпал первый снег, и по настоящему чувствуется что скоро наступит новый год, ведь новогоднее настроение уже парит в воздухе. Люди во всю наряжают елки, а веб-мастера стараются украсить свой сайт новогодними украшениями. В данном уроке мы рассмотрим как создать простой эффект снега для сайта при этом мы будем использовать правила JS и немного новогодней магии. У нас будет рондомное падение снега, при этом мы добавим плавности, кроме этого мы добавили эффект глубины с помощью больших и меньших окружностей снежинок.
Фокусировка объектов на сайте с помощью CSS3
15 Ноя
Порой необходимо выделить мелкие элементы на сайте, при этом применив минимум усилий, отличным способом подчеркнуть элементы это размыть все необходимые объекты. Такой эффект можно встретить на зеркальных фотоаппаратах, его еще называю эффект blur’a или tilt-shift. Достигнуть его на сайте достаточно просто, нам необходимо применить несколько правил стилей. В данном уроке мы займемся построением именного такого элемента. У нас будет два объекта, один из которых размыт по умолчанию, и активируется при наведении курсора мыши.
