Архив рубрики ‘css’

• 

  Создание 3D эффекта на примере простых объектов

  В данном уроке пойдет речь о технике, что может быть применена к объектам, у которых есть несколько сторон. Нашим примером будет 3D киногалерея с глянцевыми плакатами. Когда плакаты будут вращаться, стороны будут отображать матовые информационные карты с метаданными о фильме.

  Далее... 3 Комментариев »
• 

  Интерактивная инфографика с SVG и CSS анимацией

  В данном уроке мы научимся строить интерактивную инфографику с помощью SVG, CSS и JavaScript. Одной из менее обсуждаемых тем является свойство новых браузеров в увеличении поддержки файлов в формате SVG. В отличие от растровых изображений, например, PNG, JPG или GIF, векторная графика в файлах SVG абсолютно масштабируемая к любому размеру и будет отображаться при любом разрешении или плотности [...]

  Далее... 5 Комментариев »
• 

  Создаем адаптивное резюме при помощи HTML5/CSS3

  Почти каждый в определенный момент нуждается в создании резюме. Когда работаешь фрилансером и соперничаешь за новые проекты с другими, возникает вопрос о том, как лучше всего кратко и быстро предоставить сведения о своих навыках и опыте потенциальному клиенту. Что может быть лучше, чем онлайн резюме? В данном уроке показано как построить адаптивное одностраничное резюме. Код [...]

  Далее... 6 Комментариев »
• 

  Создаем стильную кнопку, используя только CSS3

  Сегодня мы будем рисовать кнопку, используя исключительно CSS. В работе будут использованы градиенты, тени, границы и переходы. Кнопка основана на стандартном стиле, который встречается практически на всех сайтах. Мы выполним ее в закругленном прямоугольном стиле, похожем по форме на табличку. Тексту же на кнопке придадим небольшую тень, чтобы создать впечатление эффекта углубления.

  Далее... 4 Комментариев »
• 

  Создаем адаптивный веб-дизайн с использованием Media Queries

  Если Вы еще не имели дела с Media Queries, сейчас самое время создать Ваш первый адаптивный дизайн веб-сайта. В этом уроке мы рассмотрим преобразование дизайна темы WordPress в адаптивную верстку, принимая во внимание исходную сетчатую структуру дизайна. Надеемся, урок окажется вам полезен.

  Далее... 3 Комментариев »
• 

  Слайдер на CSS3 с эффектом параллакса

  В этом обучающем уроке мы создадим слайд-шоу с эффектом параллакса, используя несколько свойств CSS3. Идея состоит в том, чтобы перемещать положение двух фонов, двигая слайды, чтобы таким образом создавать незначительный эффект параллакса.

  Далее... 7 Комментариев »
• 

  Как создать адаптивную навигацию

  Одна из самых сложно поддающихся адаптации частей веб-сайта это навигация. Эта часть очень важна для удобства использования веб-сайта, так как это один из путей, которым пользователи переходят со страницы на страницу.

  Далее... 2 Комментариев »
• 

  Полезные jQuery плагины

  На сегодняшний день в интернете доступно достаточно большое количество плагинов jQuery. Дежурка периодически выпускает подборки различных и полезных плагинов. Возможно, в данной подборке вы найдете для себя несколько необходимых плагинов, которые пополнят вашу коллекцию и вдохновят вас на усовершенствование вашего сайта. Желаем приятного ознакомления. 

  Далее... 4 Комментариев »
• 

  Создание простой галереи изображений Lightbox на jQuery

  Есть ряд вопросов, которые нужно рассмотреть, когда Вы создаете свою тему WordPress. Один из таких элементов страницы – динамическая галерея изображений, использующая или ligthbox, или какую-то скользящую панель. Оба этих пользовательских интерфейса изящно вплетаются в содержание статьи. Так как они оба работают на типичных вебсайтах, удобно иметь под рукой код, готовый к использованию в любых темах оформления блога.

  Далее... 7 Комментариев »