Яндекс.Метрика

Дизайн-журнал №1. Актуальная информация для дизайнеров, веб дизайнеров, программистов и разработчиков сайтов.

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

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

    Создание нескольких рамок с использованием CSS3

    Свойство рамки CSS2.1 работает хорошо, но оно недостаточно гибкое. А что, если нужно создать две или больше рамок разных цветов у одного элемента? Свойство изображения рамки CSS3 можно рассматривать как вариант, но для него нужно создать подходящее изображение, и синтаксис этого свойства довольно сложный. Но есть другой более простой способ — свойство тени блока, если нужно добавить несколько [...]

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание выдвигающейся формы поиска

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Как растянуть элементы, находящиеся в блоках, на полную ширину окна браузера

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание эффектов размытого текста с использованием CSS3

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

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

    Далее... Нет комментариев »
  • Постоянная ссылка на Создание светящихся ссылок с использованием CSS3

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

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

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание кнопки в виде заплатки с использованием CSS

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

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

    Далее... 3 Комментариев »
  • Постоянная ссылка на Как отцентровать абсолютно спозиционированный элемент с использованием CSS

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

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

    Далее... 3 Комментариев »
  • Постоянная ссылка на Альтернативный способ спрятать текст у графического заголовка

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

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

    Далее... 1 Комментарий »
  • Постоянная ссылка на Создание выдвигающихся ссылок с использованием анимации CSS3

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

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

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