CSS

CSS

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

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

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

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

Сегодня мы продолжим знакомство с сеточной системой этого фреймворка и рассмотрим некоторые нюансы, которые могут пригодиться в реальной работе над макетом сайта на основе 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 - вид по умолчанию на данной платформе (в основном стрелка)

 

Здравствуйте! В этой статье я хочу рассказать о таком свойстве  CSS3 как возможность  разделять текст на колонки. Свойство это появилось недавно, поэтому его надо использовать с префиксом, хотя возможно в будущем можно будет использовать без префикса. Свойство - это column. Причем имеются следующие свойства:

  • column-count - количество колонок
  • column-gap - задает расстояние между колонками в многоколоночном тексте
  • column-width - задает ширину колонки
  • column-rule - задает цвет, толщину и стиль линии, разделяющей колонки.

Здравствуйте! Продолжаем разбираться как сделать сайт адаптивным. Другим важным элементом в построении адаптивого дизайна являются правила Media Query, которые поволяют определить стиль в зависимости от размеров браузера пользователя.

В CSS2 уже было решение в виде правила media, которое позволяет указать устройство, для которого используется данный стиль:

<html>
 <head>
  <title>Адаптивная веб-страница</title>
  <link media="handheld" rel="stylesheet" href="/mobile.css">
  <link media="screen" rel="stylesheet" href="/desktop.css">
 </head>
 <body>
 ......................