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

• 

  Создание выдвигающейся формы поиска

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

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

  Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера

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

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

  Создание эффектов размытого текста с использованием CSS3

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

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

  Создание светящихся ссылок с использованием CSS3

  В предыдущем уроке по CSS мы создали размытие текста, используя свойство тени текста и прозрачный цвет текста. В этом уроке мы воспользуемся подобным способом, чтобы создать анимированные светящиеся ссылки. Тень текста — это многогранное свойство CSS3, которое поддерживается в браузерах без приставок производителей. Но оно не работает в браузере Internet Explorer версий 9 и ниже. [...]

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

  Создание эффекта уменьшения фотографии с использованием jQuery

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

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

  Создание кнопки в виде заплатки с использованием CSS

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

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

  Как отцентровать абсолютно спозиционированный элемент с использованием CSS

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

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

  Альтернативный способ спрятать текст у графического заголовка

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

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

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

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

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