CSS

CSS

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

Здравствуйте! Продолжаем разговор о адаптивном дизайне и в этой статье рассмотрим метатег viewport. Это один из ключевых моментов применения адаптивного дизайна - метатег viewport (по сути с этого тега и начивается адаптиный дизайн). Пусть для начала у нас есть следующая веб-страница:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Обычная веб-страница</title>
    </head>
    <body>
        <h2>Обычная веб-страница</h2>
    </body>
</html>

 

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

Здравствуйте! В этой статье я хочу рассказать о таком новом и полезном свойстве CSS 3 как анимация. Анимация предоставляет большие возможности за изменением стиля элемента. При переходе в CSS у нас есть набор свойств с начальными значениями, которые имеет элемент до начала перехода, и конечными значениями, которые устанавливают после завершения перехода. Тогда как при анимации мы можем иметь не только два набора значений - начальные и конечные, но и множество промежуточных наборов значений.

Анимация опирается на последовательню смену ключевых кадров (keyframes). Каждый ключевой кадр определяет один набор значений для анимируемых свойств. И последовательная смена таких ключевых кадров фактически будет представлять анимацию.

По сути переходы применяют ту же модель - так же неявно определяются два ключевых кадра - начальный и конечный, а сам переход представляет переход от начального к конечному ключевому кадру. Единственное отличие анимации в данном случае состоит в том, что для анимации можно определить множество промежуточных ключевых кадров.

Здравствуйте! От трансформаций в CSS перейдем к переходам да простят меня за тавтологию. Переход (transition) представляет анимацию от одного стиля к другому в течение определенного периода времени.

Для создания перехода необходимы прежде всего два набора свойств CSS: начальный стиль, который будет иметь элемент в начале перехода, и конечный стиль - результат перехода. Так, рассмотрим простейший переход:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Переход в CSS3</title>
        <style>
            div{
                width: 100px;
                height: 100px;
                margin: 40px 30px;
                border: 1px solid #333;
                 
                background-color: #ccc;
                transition-property: background-color;
                transition-duration: 2s;
            }
            div:hover{
                background-color: red;
            }
        </style>
    </head>
    <body>
        <div></div>
    </body>
</html>

Просмотреть  пример

 

Здравствуйте! В этой статье я хочу рассказать о новом свойстве в CSS3 - трансформации. Одним из нововведений CSS3 по сравнению с предыдущей версией является встроенная возможность трансформаций элемента. К трансформациям относятся такие действия, как вращение элемента, его масштабирование, наклон или перемещение по вертикали или горизонтали. Для создания трансформаций в CSS3 применяется свойство transform.

Здравствуйте! Сегодня в продолжении темы верстки страницы я хотел бы рассказать о FlexBox. Модуль Flexbox-верстки (flexible box - «гибкий блок», на данный момент W3C Candidate Recommendation) ставит задачу предложить более эффективный способ верстки, выравнивания и распределения свободного места между элементами в контейнере, даже когда их размер неизвестен и / или динамический (отсюда слово «гибкий»).
Главная задумка flex-верстки в наделении контейнера способностью изменять ширину / высоту (и порядок) своих элементов для лучшего заполнения пространства (в большинстве случаев - для поддержки всех видов дисплеев и размеров экранов). Flex-контейнер растягивает элементы для заполнения свободного места или сжимает их, чтобы предотвратить выход за границы.
Самое важное, flexbox-верстка не зависит от направления в отличие от обычных лейаутов (блоки, располагаются вертикально, и инлайн-элементы, расположенные горизонтально). В то время, как обычный лэйаута отлично подходит для веб-страниц, ему не хватает гибкости для поддержки крупных или сложных приложений (особенно когда дело доходит до изменения ориентации экрана, изменения размера, растяжения, сжатия и т.п.).

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

Для фиксированного позиционирования у элементов нужно установить значение fixed для свойства position. После этого с помощью стандартных свойств left, right, top и bottom можно определить конкретную позицию фиксированного элемента.

Здравcтвуйте! Сегодня я хочу рассказать о таком полезном свойстве в CSS как позиционирование.  CSS предоставляет возможности по позиционированию элемента, то есть мы можем поместить элемент в определенное место на странице. Основным свойством, которые управляют позиционированием в CSS, является свойство position. Это свойство может принимать одно из следующих значений:

  • static: стандартное позиционирование элемента, значение по умолчанию

  • absolute: элемент позиционируется относительно границ элемента-контейнера, если у того свойство position не равно static

  • relative: элемент позиционируется относительно его позиции по умолчанию. Как правило, основная цель относительного позиционирования заключается не в том, чтобы переместить элемент, а в том, чтобы установить новую точку привязки для абсолютного позиционированния вложенных в него элементов

  • fixed: элемент позиционируется относительно окна бразуера, это позволяет создать фиксированные элементы, которые не меняют положения при прокрутке

Не следует одновременно применять к элементу свойство float и любой тип позиционирования, кроме static (то есть тип по умолчанию).

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

Для начала определим базовую структуру веб-страницы:

Здравствуйте! Рассмотрим некоторые проблемы при создании макетов страниц с использованием свойства float. При работе с плавающими элементами и свойством float довольно часто можно столкнуться с проблемой выпадения из страницы плавающих элементов. У этой проблемы есть различные аспекты и их решения. Рассмотрим эти аспекты.