Уроки CSS

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

Строки и столбцы в grid

Здравствуйте! Продолжаем разбираться  с версткой на grid  layout. Из прошлого урока вы узнали что такое Grid Layout.  А сегодня мы с вами разберем свойства grid-template-columns и grid-template-rows. Grid Layout  создает своеобразную сетку, состоящую  из строк и столбцов, на пересечении оных есть ячейки.  А вот как раз  для установки строк и столбцов в грид применяются такие  свойства CSS3:

  • grid-template-columns: управляет столбцами
  • grid-template-rows: управляет строками

Строки и столбцы в грид

 

Читать далее »

Что такое Grid Layout.

Здравствуйте! Этой статьей я начинаю цикл материалов посвященных Grid Layout. В этой статье я расскажу что такое Grid Layout и Grid Container. Grid Layout  это такой модуль CSS3, который позволяет выстраивать элементы на странице сеткой или таблицей. Также как и модуль  Flexbox Grid Layout позволяет  задавать положение элементов, только в отличие от флекса он может сразу поизиционировать элемент в 2-х осях как по вертикали так и по горизонтали в отличие от флексбокса, который может только в какой-то одной оси об остальных отличиях флксбокса и грида читайте здесь.

Ну а спецификацию на модуль Grid Layout можно почитать на сайте www.w3.org/TR/css-grid-1/.

что такое grid layout

 

Читать далее »

Препроцессор LESS

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

что такое препроцессор less

 

Что такое LESS?

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

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

Читать далее »

Препроцессор SASS

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

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

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

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

Препроцессор SASS

Читать далее »

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

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

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

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

Программа Koala — легкая компиляция Sass, Less и CoffeeScript

Как создать всплывающее окно на Bootstrap

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

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

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

Bootstrap что это такое

 

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

 

Читать далее »

Создание форм на Bootstrap3

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

Создание форм на Бутстрап3

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

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

Cоздание меню аккордеона на Bootstrap3

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

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

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

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

как создать меню аккордеон на бутстрап

 

Читать далее »

Как создать меню на сайте с помощью Bootstrap

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

К сожалению, приходится признать, что знания Html и основы CSS  для изучения фреймворка Бутстрап 3  необходимы, без  них ві конечно же ничего не поймете.

Как создать меню на сайте Бутстрап

 

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

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

Читать далее »

Бутстрап 3 — как добавить глиф-иконки на сайт и задать стили для таблицы

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

как добавить глиф-иконки на сайт Bootstrap

 

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

Читать далее »

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: