CSS

CSS

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

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

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

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

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

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

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

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

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

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

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

Здравствуйте. В предыдущей статье по Bootstrap 3 мы с вами познакомились с возможностями этого фреймворка, узнали о том, как  можно устновить и подключить Bootstrap 3. 

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

Здравствуйте! В этой статье я расскажу как установить и подключить фреймворк Bootstrap. О том что такое Bootstrap можно посчиать здесь.

Стандартная установка фреймворка

О стандартной установке я уже достаточно много сказал в прошлых статьях. Тут все просто. Заходим на официальный сайт getbootstrap.com, кликаем по пункту Getting Started и выбираем самый первый вариант. Таким образом, мы скачиваем полную версию бутстрапа со всеми js и css-компонентами.

Bootstrap CDN – это возможность подключить фреймворк из CDN-хранилища, не скачивая его файлы к себе на компьютер. Естественно, в таком случае ни о какой кастомизации не может быть речи.

Здравствуйте! Этим уроком я начинаю цикл уроков по Bootstrap. В этом уроке я расскажу что такое bootstrap и для чего он нужен верствльщику и дизайнеру сайтов. Веб-разработчик и верстальщик рано или поздно задумывается о том, как ему упростить и ускорить процесс верстки сайта. В связи с этим, он прибегает к помощи css-фреймворков. Самый популярных из них – bootstrap. Что это такое и зачем он нужен? В этой статье я постараюсь максимально подробно ответить на этот вопрос.

Что такое Bootstrap?

Как я уже сказал во вступительных словах – это CSS-фреймворк. Более точное и полное определение можете прочитать на этом скриншоте, сделанном с русскоязычного сайта Bootstrap:

Во-первых, Bootstrap является самым популярным фреймворком, у его ближайшего конкурента в 3-5 раз меньше сообщество. Во-вторых, это не только css, но и js-фреймворк. То есть в Bootstrap написаны готовые стили и скрипты, для применения которых вам достаточно всего лишь прописать необходимые стилевые классы и атрибуты html-элементам.

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

Здравствуйте! В этой статье я расскажу о таком свойтсве  CSS как перспектива. В контексте двумерного мира перспектива дает пользователям иллюзию глубины объекта, ширины, высоты и позиции относительно другого объекта, если смотреть на объект с определенной точки зрения. Перспектива позволяет художникам создавать пейзажи, глядя на которые создается впечатление, что они уходят «внутрь» холста, или рисовать на улице здания разных размеров, которые «уходят» от нашего взгляда. На двумерной плоскости у объектов также есть точка схода, в которой «растворяется» глубина объекта. Давайте проиллюстрируем это на простой диаграмме:

На данной диаграмме показаны три объекта (прямоугольники) на двумерной плоскости. Когда прямоугольники перемещаются по плоскости, то линии перспективы (лучи) могут быть проведены к точке схода, и тогда мы получим трехмерные объекты. А поскольку Веб отображается на двумерных поверхностях (т.е. экранах устройств), то перспектива может помочь нам создать похожую глубину. В мире Веба и CSS3 трансформаций, перспектива может быть определена следующим образом (определение с сайта MDN):

CSS свойство perspective определяет расстояние между плоскостью z = 0 и пользователем, чтобы дать 3D-позиционированному элементу некоторую перспективу. Каждый 3D-элемент с z > 0, становится больше, а каждый 3D-элемент с z < 0 — меньше. Сила эффекта определяется значением данного свойства.

По умолчанию точка схода находится по центру элемента, но мы можем переопределить это с помощью свойства perspective-origin. Давайте посмотрим на базовый пример.

Здравствуйте! В этой статье речь пойдет о фильтрах в css. До появления CSS фильтров вам оставалось или загружать несколько версий изображения, или манипулировать ими при помощи JavaScript. Если вы не хотите сами возиться с изображениями, вам помогут CSS фильтры.С помощью фильтров можно очень гибко редактировать изображения, а именно уменьшать или увеличивать яркость, контрастность, тень  и.т.д. Но давайте обо всем по порядку.

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

cursor: [вид];

Стандартных видов у курсора - 14:

  • crosshair - перекрестье
  • help - знак вопроса или воздушный шар (в зависимости от браузера)
  • e-resize, w-resize - двунаправленная горизонтальная стрелка
  • n-resize, s-resize - двунаправленная вертикальная стрелка
  • ne-resize, sw-resize - двунаправленная диагональная стрелка (с нижнего левого угла в верхний правый)
  • se-resize, nw-resize - двунаправленная диагональная стрелка (с нижнего правого угла в верхний левый)
  • move - перекрестье со стрелками на конце
  • pointer - ладошка
  • text - вертикальная линия
  • wait - песочные часы или циферблат (в зависимости от браузера)

И еще два значения:

  • auto - вид по умолчанию
  • default - вид по умолчанию на данной платформе (в основном стрелка)