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

• 

  Поворачивающийся рекламный щит с использованием только CSS

  Сегодня мы будем создавать рекламный щит, используя исключительно CSS. Обратите внимание, этот пример тестировался только в браузере Safari на компьютере Mac и в браузере Safari для системы IOS на iPhone. Ниже вы увидите демонстративное видео, на случай, если у вас нет этих браузеров.

  Далее... Нет комментариев »
• 

  Создание логотипа IBM Lotusphere с использованием CSS3

  Некоторое время назад автор урока посетил страницу конференции IBM Lotusphere. Он сразу обратил внимание на красивый логотип. Хотя дизайн логотипа простой и минималистичный, он очень хорошо выглядит. Сегодня мы создадим этот логотип, используя только HTML и CSS. Основной секрет этого эффекта — использование свойств border-radius и overflow:hidden. Мы создали две версии. Первая версия использует дополнительные элементы HTML, [...]

  Далее... Нет комментариев »
• 

  Создание подсвечивающихся блоков с использованием CSS3

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

  Далее... Нет комментариев »
• 

  Создание плоских «хлебных крошек» с использованием CSS

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

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

  Эффект дождя на стекле при помощи HTML и CSS

  В этом уроке мы научимся создавать эффект капель дождя на стекле, используя CSS. Урок очень прост, однако результат вам наверняка понравится. Для выполнения туториала вам понадобятся базовые знания CSS и совсем немного jQuery.

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

  Создание необычного выезжающего меню с использованием jQuery

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

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

  Складывающиеся информационные блоки при помощи jQuery и CSS3

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

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

  Плагины jQuery в вашу коллекцию

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

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

  Выделение и просмотр изображений с использованием jQuery

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

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