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

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

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

  • Постоянная ссылка на Создание вертикального разворачивающегося меню

    Создание вертикального разворачивающегося меню

    С помощью псевдокласса :target можно создать многое, например, переключение между вкладками с использованием только CSS3. Одним из главных преимуществ кода CSS является то, что можно задавать любые стили коду HTML, так что мы преобразуем ту разметку, чтобы она выглядела как вертикальное разворачивающееся меню.

    Далее... 2 Комментариев »
  • Постоянная ссылка на Создание нескольких рамок с использованием 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 Комментарий »