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

• 

  Цикл уроков о переходах CSS3, часть 1: Основы. Что такое переходы?

  Переходы — это наиболее часто используемый тип анимации CSS3. Несмотря на широкое распространение и относительно простой синтаксис, есть несколько подводных камней и возможностей, о которых не знают даже умудренные опытом разработчики. Это первый из четырех уроков в цикле о переходах CSS3, но каждый урок можно изучать отдельно или не по порядку. Давайте начнем с основ. 

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

  Использование простой сетки CSS

  Некоторым нравится использовать сеточную систему на 960 пикселей, они считают, что такая система соответствует золотому сечению, так как 960 — круглое число, но у дизайнеров, в отличие от ученых, есть мнение, что сеточная система на 960 пикселей устаревает. Зачем ограничивать разметку так, чтобы она влезла в сеточную систему на 960 пикселей? Сеточные системы должны помогать при [...]

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

  Использование media queries CSS3

  CSS2 позволяет выбрать определенный файл стилей для определенных устройств отображения, таких как экран или печать. А с помощью CSS3 можно делать это еще более эффективно, благодаря media queries. Вы можете добавить выражения в селекторы типов устройств отображения, чтобы проверять выполнение определенных условий и применять разные файлы стилей. Например, у Вас может быть один файл стилей для больших [...]

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

  Сравнение сервисов шрифтов Google Font, Typekit и @font-face

  Вы уже могли читать об использовании особых шрифтов с помощью @font-face. Мы хотим рассказать и о других решениях, их плюсах и минусах. Цель этого урока — кратко осветить варианты использования особых шрифтов в веб-дизайне. Читайте о их недостатках и преимуществах и решайте каким вариантов будете пользоваться вы.

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

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

  У нас возникли идеи, как улучшить переключатели, о которых мы рассказали в уроке «Создание переключателя с использованием CSS3». Мы поставили перед собой следующие вопросы. Как применить переключение к радиокнопкам? Как повысить удобство? Почему переключатели не работают в старых версиях мобильных браузеров на движке Webkit?

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

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

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

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

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

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

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

  Пять простых, но полезных свойств CSS

  В этом уроке мы расскажем о пяти полезных свойствах CSS, с которыми Вы скорее всего хорошо знакомы, но редко их используете. Мы говорим не о новых необычных свойствах CSS3, а о старых CSS2 свойствах, таких как: clip, min-height, white-space, cursor, и display, которые поддерживаются всеми браузерами. После прочтения этого урока Вы удивитесь, насколько полезны эти свойства.

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

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

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

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