Записи, помеченные ‘уроки css’

• 

  20 CSS-уроков для адаптивного веб-дизайна

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

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

  Hover-эффекты в виде подписей

  Сегодня мы рассмотрим, как создавать простые, но стильный эффекты, которые появятся при наведении на изображения в виде подписей. Идея заключается в том, что мы будем использовать сетку с изображениями, при наведении на которые появится подпись названия и автора, а также кнопка ссылки. Для некоторых эффектов будем использовать 3d-трансформации. Наша цель — использовать тонкие эффекты, которые при этом [...]

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

  Создание css-сетки миниатюр с динамическим всплывающим меню

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

  Далее... 1 Комментарий »
• 

  Создаем шестиугольник с помощью чистого CSS3

   В этом уроке мы будем делать шестигранник, который будет иметь фоновое изображение. Для этого будем использовать средства  CSS3. С помощью трансформаций css3 мы можем поворачивать и делать различные манипуляции элементов DOM. Для этого будем использовать otate и masking. В области стилей урок может показаться немного сложным, но он объяснен иллюстрациями. Давайте приступим.

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

  Создаем «аккордеон»-меню на css3

  В этом уроке мы будем создавать «аккордеон»-меню. По сколько мы будем создавать меню на чистом css, оно будет работать в браузерах, которые поддерживают селектор псевдо-класса :target.

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

  Создаем шаблоны с эффектом 3d-навигации

  В сегодняшней статье будет рассмотрено два шаблона — адаптивный шаблон с 3d-панелью и 3d-галерея изображений. Они являются экспериментальными и будут отображаться правильно только в последних версиях браузеров. Но в целом результат достаточно впечатляющий. В первом примере будет происходить анимация слайдов, которые могут включать до четырех панелей и соответственно анимация разделяющей линии. Во втором — создан эффект реальной [...]

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

  Создание меню на CSS

  В этом уроке мы будем создавать два типа меню: вертикальные кроссбраузерное  CSS3-меню с 3D-анимацией (используя CSS3-переходы и свойства трансформации), а также  меню с LavaLamp-эффектом. 

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

  Как добавить Tilt Shift эффект изображению при помощи CSS-фильтров

  Благодаря бесплатным приложениям, которые позволяют редактировать фотографии, таким как  Instagram, эффект Tilt Shift становится все более популярным. Сегодня мы будем учиться создавать такой эффект на чистом CSS, используя для этого фильтры.

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

  Создаем чистое портфолио (часть2: верстка)

  Не так давно мы публиковали урок по созданию дизайна чистого портфолио в Фотошопе. Сегодня мы сделаем наше портфолио функциональным и заставим его отображаться в браузере.  В этом уроке мы покажем, как сверстать сайт при помощи html5 и css3 и сделать слайдер при помощи jQuery.

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