CSS

CSS

Уроки CSS рассчитаны на тех, кто знает HTML. Здесь Вы найдете уроки о том как сделать Ваши сайты стильными, красивыми и добавить эффекты анимации на Ваши страницы.

Здравствуйте! В этой статье я хотел бы рассказать о такой полезной функции в css как calc(). Эта функция позволяет производить арифметические вычисления над элементами страницы причем может работать как с абсолютными так и с отностельными размерами CSS. То есть если ширина элемента задана в процентах, то можно от процентов отнять пиксели и наоборот.

Здравствуйте! В этой статье мы поговорим о том, как сделать видео в качестве заднего фона для вашего сайта на HTML5. Тут все очень просто нужно создать тег <video> и с помощью стилей делаем его фоном как отдельного элемента так и всего <body>. Но давайте обо всем по порядку.

Как сделать видео фоном для сайта

Здравствуйте! В прошлой статье я писал о препроцессоре SASS. Сегодня я расскажу немного о другом препроцессоре - LESS. В принципе эти препроцессоры похожи но имеют несколько отличий, что связано с наименованием переменных.

Что такое LESS?

LESS относительно новый препроцессор, ему около 4 лет. Его часто сравнивают с SASS, более старым препроцессором. Как и LESS, так и SASS, имеют свои корни в языке программирования Ruby, но в настоящее время используются гораздо шире. LESS теперь основан на Javascript.

Люди, использующие LESS, могут создать заранее определенный набор цветов для своего сайта. Они могут определить особый стиль один раз и затем многократно использовать его везде, где необходимо.

Здравствуйте! После того как мы рассмотрели работу с программой Koala, которая нужна для компиляции кода на препроцессорах SASS и LESS. Разберем как работать с препроцессором SASS.

Препроцессинг

Написание CSS само по себе весело, но когда таблица стилей становится огромной, то становится и сложно её обслуживать. И вот в таком случае нам поможет препроцессор. Sass позволяет использовать функции недоступные в самом CSS, например, переменные, вложенности, миксины, наследование и другие приятные вещи, возвращающие удобство написания CSS.

Как только Вы начинаете пользоваться Sass, препроцессор обрабатывает ваш Sass-файл и сохраняет его как простой CSS-файл, который Вы сможете использовать на любом сайте.

Здравствуйте! Сегодня я начинаю цикл статей о препроцессорах CSS. И начать я хотел бы с обзора программы Koala, которая помагает компилировать код с LESS или SASS на CSS.

Koala — это кроссплатформенная программа для компиляции Less, Sass, Compass и CoffeeScript. Работает на Win, Mac OS и Linux.

Программа бесплатна и живет на благотворительные пожертвования. Впрочем, когда я попытался перевести ребятам на Paypal немного денег пару лет назад, сделать этого не получилось. Разработчики находятся в Китае, а Paypal там работает только на отправку денег. Тем не менее, программа от этого хуже не стала. Разберемся подробнее.

 

Здравствуйте! Продолжаем разбираться  с фреймворком Бутстрап. И сегодня я расскажу как на Bootstrap создать модальное оконо. При появлении модальное окно затемняет остальные элементы и отображается поверх всей страницы. При создании окна не забывайте добавлять элементы управления, чтобы пользователь мог его закрыть.

На одной странице может быть любое количество окон, которые будут работать независимо друг от друга.

Следует заметить, что атрибут autofocus не будет работать во всплывающих окнах.

За работу модуля отвечает файл modal.js, его можно использовать отдельно либо вместе с остальными элементами (по умолчанию он включён в состав файлов bootstrap.js и bootstrap.min.js). Чтобы получить возможность пользоваться модальными окнами, нужно сначала подключить jQuery.js, а после этого файл модуля или общий файл со всеми js-модулями Bootstrap.

 

Здравствуйте! Сегодня давайте разберемся как с помощью фреймворка Бутстрап можно создавать красивые адаптивные формы.  Bootstrap позволяет добавлять оформление для любых форм на странице. Формы, созданные на Bootstrap, могут быть горизонтальными и вертикальными.

 

 

Настройки по умолчанию

Элементы <input>, <textarea> и <select> при добавлении к ним класса .form-control становятся блочными и занимают 100% ширины родительского блока.

Здравствуйте! Сегодня как я и обещал в прошлой статье я расскажу как в Bootstrap можно сделать блоки типа аккордеон. Это такие блоки которые могут показывать одну секцию открытой при этом скрывая все остальные за что и получили свое название аккордеон как одноименный музыкальный инструмент.

В Bootstrap есть плагин, который отвечает за плавное сворачивание и разворачивание блоков. Эта функция крайне удобна и может использоваться где угодно:

  • в навигации
  • для спойлеров
  • для блоков со скрытым текстом
  • свернутых пунктов меню
  • ответов на часто задаваемые вопросы

Из своего опыта могу сказать, что если ваш проект работает с использованием бутстрапа то collapse вы будете использовать постоянно. Плагин крайне прост в работе, не требует особой настройки и позволяет сворачивать любые блочные элементы. Сейчас я расскажу, как его использовать.

 

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

К разочарованию большинства, приходится признать, что базовые знания Html и основы CSS при изучении Bootstrap необходимы, без них для вас все это будет одна сплошная галиматья. Но вот филигранного владения стайлингом от вас уже не потребуется — нужно будет лишь изучить способы подключения возможностей этого фрейморка для реализации ваших задумок на «профессиональном» уровне. А потом все пойдет уже по накатанной...

В прошлой статье мы с Вами разбирались  как добавить глиф-иконки на сайт, оформить таблицы, галереи и панели.

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

Здравствуйте. Продолжаем тему построения сайта на основе отзывчивого фреймворка Bootstrap3,в прошлой статье мы рассмотрели доступные способы форматирования (оформления) текста и картинок в Бутстрап 3, изучили вопросы, связанные с созданием кнопок и работой так называемых отзывчивых классов, позволяющих скрывать или, наоборот, отображать отдельные элементы вебстраницы при изменении ширины экрана, на котором эта самая страница просматривается.

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

Страница 1 из 7