7 полезных приемов с функциями на чистом CSS


Оглавление (нажмите, чтобы открыть):

6 лучших анимационных «фишек» CSS3

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

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

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

источник изображения http://ruseller.com/

CSS (англ. Cascading Style Sheets) — каскадные таблицы стилей; язык для описания стиля веб-страниц и элементов на них (изображения, отступы, таблицы, кнопки)

Почему именно CSS?

Потому что имеется множество неоспоримых плюсов при его использовании.

  1. Наличие стандарта, что резко увеличивает совместимость с разнообразными платформами.
  2. При выносе описания элементов в отдельный файл существенно ускоряется загрузка страниц (все описания стилей как раз находятся в отдельном файле .css). Подгружается только структура, а описание кэшируется. Как результат — уменьшается нагрузка на сервер.
  3. Описание сайта и описание элементов разделены. Реализован принцип «Мухи отдельно, котлеты отдельно». Это дает большую скорость работы при внесении исправлений и поддержке ресурса.
  4. При грамотном использовании CSS ваша страница будет корректно отображаться как на стационарных мониторах, так и на экранах мобильных гаджетов.
  5. К тому же любой текстовый браузер воспринимает css-верстку как текст и принимает без проблем.
  6. При масштабировании изображение, созданное с помощью CSS, не теряет в качестве, в отличии от растровых изображений, которые чувствительны к увеличению масштаба.
  7. CSS на вашем сайте не зависит от настроек браузера пользователя. В браузере можно отключить выполнение скриптов, но не выполнение стилей.

Актуальная версия CSS — CSS3, расширенная и дополненная «фичами». Эти дополнения хороши тем, что с их помощью вы сможете реализовывать практически любые анимационные эффекты. Всё зависит от вашей фантазии.

Самые эффектные примеры CCS3

Общий div для всех примеров:

1. Одно из лучших применений свойства transform — поворот объекта. Красиво смотрится на странице, добавляя ей динамику. При наведении курсора на объект он поворачивается на указанное количество градусов. Вы можете менять угол поворота и направление вращения в rotate. Время, за которое должно произойти событие, задаётся в transition, в нашем случае это 0.9 секунды. Не забываем про объявление класса в body.

Результат (наведите курсор на объект):

2. Увеличение/уменьшение элемента. Очень полезная вещь. Эту функцию можно использовать для привлечения внимания пользователя к элементу. Событие происходит при наведении курсора.

3. Есть еще приятный и полезный визуальный эффект — покачивание объекта из стороны в сторону, то есть несколько перемещений вправо-влево (в нашем случае). Результат — затухающие колебания.
Код, который заставляет покачиваться объект:

4. Прозрачность. Не только функционально, но и красиво. С помощью этого приёма вы можете привлечь внимание к объекту. Или, наоборот, снизить его к кнопке или месту на сайте, чтобы обратить внимание посетителя на что-то более важное.

5. Эффект 3D текста также легко можно реализовать на css3. Никаких gif-ов, только код. Всё очень просто, но в то же время красиво. Реализуется с помощью добавления свойства text-shadow, которое формирует тень и уже известного нам по первому примеру свойства transform.

6. Скругление углов. Этот вид анимации работает при использовании свойства border-radius. Можно скруглить углы или превратить прямоугольник в овал, изменяя значение процента.

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

Кстати, на этом портале реализованы некоторые подобные эффекты. А вы их заметили?

Тем, кто хочет стать программистом, рекомендуем профессию «Веб-разработчик».

Несколько интересных приёмов на CSS3

Спецификации CSS3 позволяют фронтэнд-разработчикам создавать сложные визуальные эффекты, чтобы сделать сайты красивее. Я собрал более 10 новых приёмов CSS3, подходящих для того, чтобы украсить ваш сайт и придать ему более профессиональный вид.

CSS функция Calc()

Calc() позволяет выполнять расчеты по определению размеров и формы объектов. Она может быть использована в любом месте!


Черно-белые изображения на CSS3

Следующий класс CSS превратит любое цветное изображение в черно-белое. Префиксы заставят это работать в любом современном браузере.

Тень наверху страницы на CSS3

Вот простой способ дать сайту хорошую тень главной страницы. Легко сделать и приятно выглядит!

Обнаружение двойного щелчка в CSS3

Вы не поверите, но можно определить двойной щелчок по элементу, используя только CSS, как показано в следующем коде:

Треугольники в CSS3

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

Чистый CSS-градиент для текста.

Тексты, раскрашенные в градиент, всегда были популярны в Интернете. Теперь с CSS3, намного проще создавать красивые градиенты в считанные минуты.

Отключение событий элементов на CSS

Вновь введенное свойство pointer-events позволяет отключить все события элемента. Например, ссылка со следующим классом не будет интерактивной.

Мастер Йода рекомендует:  Как изменить подчеркивание ссылок на веб-странице
«Обшитый» нитками блок на CSS

В следующем фрагменте кода показано, как создать хорошую границу вокруг любого элемента, как будто он пришит нитками. Красиво!

Кастомные полосы прокрутки с помощью CSS3 в WebKit

Помните, 10 лет назад, почти каждый использовал специальные свойства IE, чтобы настроить внешний вид полосы прокрутки? Ну, теперь вы можете сделать то же самое с Webkit.

Размытый текст на CSS3

Простой, но очень хороший эффект размытия текста. Простой и красивый!

Лента в углу блока на чистом CSS

Этот код немного длинный, но он создает прекрасную ленту в правом верхнем углу блока на чистом CSS.

Подсказки с применением чистого CSS

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

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

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

Проверено на тестовой площадке, где так выглядит:

.dekatagyna-darcinketan <
display: flex;
justify-content: space-around;
margin: auto;
width: 498px;
padding: 57px 32px;
border-radius: 50%;
background-color: rgba(7, 62, 82, 0.85);
box-shadow: 0 0 120px 80px rgba(8, 63, 82, 0.81);
>

.vonelemen-gokepovulason <
padding: 14px 16px;
background-color: #447d96;
border: none;
color: #ececec;
font-size: 18px;
cursor: pointer;
position: relative;
>

.vonelemen-gokepovulason:first-of-type <
border-top-left-radius: 50px;
border-bottom-left-radius: 50px;
>

.vonelemen-gokepovulason:last-of-type <
border-top-right-radius: 50px;
border-bottom-right-radius: 50px;
>

.vonelemen-gokepovulason:hover::after <
content: attr(data-label);
position: absolute;
left: 60%;
bottom: -100%;
font-size: 16px;
padding: 6px 20px 6px 25px;
border-top-right-radius: 90px;
border-bottom-right-radius: 90px;
border-top-left-radius: 0;
border-bottom-left-radius: 190px;
background-color: #2d5890;
>

.vonelemen-gokepovulason:focus <
outline: 3px solid #4077be;
>

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

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

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

Так как хотелось навигацию создать, но возможно кому то подсказки только требуются, а каркас идет как приложение показа.

Пять анимаций на чистом CSS

Знание СSS нужно, чтобы создавать удобные интерфейсы и оформлять страницы сайта: стилизовать текст, позиционировать блоки, добавлять интерактивные элементы. А ещё c помощью CSS можно создавать крутые картинки, логотипы и анимацию. Собрали пять нестандартных примеров использования языка.

Логотипы браузеров

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

See the Pen Browsers by Jordano Aragão (@jordanoaragao) on CodePen.

Лоадер

Бывает, что нужно подождать, пока информация с сервера загрузится на сайт. Ожидание можно скрасить анимацией.

Бэтмен


Можно бесконечно спорить, какая вселенная лучше — Marvel или DC. А можно сделать вот такого анимированного Бэтмена.

Страница 404

Когда на сайте возникает ошибка, пользователь видит страницу с её кодом. Для хороших сайтов разработчики создают специальную страницу, стилизуя её. Такой вариант может помочь пользователю чуть меньше расстроиться из-за возникшей ошибки.

Ноутбук

Просто милый улыбающийся ноутбук для тех, кто хочет потренироваться работать с анимацией на CSS.

Использование знакомого инструмента для решения нестандартных задач поможет опытным разработчикам лучше запомнить редкие CSS-свойства и применять их для создания сложных интерфейсов. А новички смогут изучить новые свойства языка в игровой форме и улучшить навыки.

Познакомиться с анимацией поближе можно на интерактивном курсе «Динамические эффекты».

Архивы HTML и CSS приемы — Page 7 of 11 — Xiper.net

19 слов о разделе:

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

Псевдоэлемент before для маркера списка

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

Градиент: CSS3 против CSS2 + картинка

CSS свойства linear-gradient и radial-gradient, описанные в проектах спецификации CSS3 дают нам мощный механизм создания градиентов. Но, так как фактически данная спецификация еще не окончена пройдет, наверно, немало времени пока мы сможем использовать эту мощь в своей работе. Тем не менее все большее число браузеров в том или ином виде поддерживает CSS-градиенты.

Эмуляция after и before для IE 6-7

Используя псевдоэлементы after и before можно вставлять автоматически генерируемый контент до и после элемента HTML. На данный момент безопасно использовать after и before как минимум для Opera, FF, Safari, Chrome, IE8. Попробуем добавить в этот список IE6-7

Подмена текста изображением

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

Нестандартные radio

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

Тень для текста

Тени придают объемность дизайну и сейчас это пользуется большой популярностью. Будет полезным иметь в своем арсенале приемов навыки работы с тенями для текста.

Отступы у checkbox и radio

Одно из самых нелюбимых занятий тысяч верстальщиков — верстка форм. Одной из причин этого — это непослушные поля checkbox и radio, которые плохо поддаются выравниванию и имеют непонятные отступы. Пришло время их укратить.

Вычисляемые отступы

Порой не хватает возможности вычислений отступов в CSS — margin-left: 30%-100px. Хотя в таком виде в CSS нет подобных правил, их несложно проэмулировать.

Прелоад изображений

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

Нестандартное подчеркивание

У ссылок (и не только) можно делать интересные подчеркивания. Да к тому же не прибегая к использованию дополнительных элементов!

Нестандартные checkbox

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

Выпадающее меню на CSS

Как сделать выпадающее меню используя только CSS.

Вертикальная позиция для строчного элемента

О том как с помощью position: relative можно задать вертикальную позицию для строчного элемента.

Проблемы с em

Решение проблемы размерами шрифтов при использовании em.

font-size: 100.01% для html

Отвечаем на вопрос: зачем использовать font-size: 100.01%.

Vavik 96

Интернет дайджест для вебмастеров и фотографов


Полезные CSS-приемы для разработчиков

CSS, без сомнения, является одним из самых важных языков разметки, которые мы используем. И хотя HTML описывает структуру документа, ее поведение может быть непредсказуемым, в зависимости от версии браузера. CSS – это тот инструмент, который позволит нам исправить все несоответствия в отображении страницы, а также оформить ее внешний вид.

Далее приведен список из двадцати трех различных CSS-приёмов, которые будут полезны как начинающим, так и опытным разработчикам.

Прячем текст с помощью абзаца

Такой прием будет весьма полезен для логотипа компании. Чаще всего, в качестве логотипа используется картинка, однако для SEO, было бы неплохо отобразить название компании в тегах h1. Данный пример – самый лучший способ это реализовать. Фактически, мы просто скрываем текст за пределами экрана, и вместо этого назначаем фоновую картинку.

Стилизация ссылок в зависимости от формата файла

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

Удаляем полосы прокрутки многострочного поля в IE

Internet Explorer имеет раздражающую привычку добавлять полосы прокрутки в многострочное поле, даже когда его содержимое не превышает заданный размер. Этот недостаток легко исправляется следующей строчкой кода:

Буквица

На сегодняшний день очень распространенное явление в блогах и новостных сайтах. Вы удивитесь, насколько просто она реализовывается, а также прекрасно деградирует в старых браузерах.

CSS-прозрачность

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

CSS Reset от Эрика Мейера

Фактически, css-reset, предложенный Эриком Мейером, уже стал повсеместным стандартом использования. Поскольку он был адаптирован многими известными разработчиками, вы можете не сомневаться в его качестве.

Предзагрузчик картинок

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

Мастер Йода рекомендует:  Как создать карту сайта для WordPress

Простой css-спрайт для кнопки

Наличие кнопки или ссылки с фоновым изображением – обычное дело, кроме того, к таким элементам часто применяются дополнительные эффекты, улучшающие пользовательский интерфейс. Один из таких эффектов – индикатор наведения курсора мыши на кнопку. С помощью спрайта, мы можем реализовать такой эффект путем изменения свойства background-positon, на заданное значение, с тем, чтобы отобразить фоновую картинку при наведении мыши на кнопку. Простое, но эффективное решение.

Google Font API

Не так давно, Google реализовал замечательный ресурс для веб-разработчиков, позволяющий загружать и использовать на странице новые, нестандартные шрифты. К загрузке доступны даже различные варианты шрифтов, жирный, курсив и т.д. Несмотря на то, что коллекция Google пока ограничена, в наличии достаточно большое количество шрифтов. Сначала подключите динамически составленный CSS-файл с названием шрифтов и необходимых вам вариантов, а затем просто используйте названия шрифтов в CSS, в обычном режиме. Дополнительную информацию по Google Font API можно прочитать здесь.

Хаки для различных браузеров

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

Фиксированный подвал

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

Поворот изображения

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

Clearfix

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

Закругленные углы

С постепенным внедрением CSS3 в современных браузерах, создавать закругленные углы стало очень просто. К сожалению, пока нет поддержки CSS3 в IE, включая восьмую версию, но она будет добавлена в IE9.

Переопределение стилей

Меня продолжают удивлять люди, незнающие об !important в CSS, поскольку это очень мощный и удобный в использовании инструмент. Очень просто, любое правило с !important на конце, будет переопределять такое же правило, примененное к этому элементу, в любом месте CSS-файла или в линейных стилях.

Font face

Font-face не использовался широко до прошлого года, хотя он известен еще с тех времен, когда IE6 считался современным браузером. Сейчас это свойство неплохо поддерживается современными браузерами и предлагает отличный способ использования небезопасных шрифтов в своих проектах. Чтобы сэкономить время, можно воспользоваться специальным генератором Font Squirrel Font Face.

Центрирование сайта

Распространенный дизайнерский прием – горизонтальное центрирование сайта. Это реализуется очень просто.

Min-height в IE

Этот пример исправляет простой, но досадный баг в IE, при установке минимальной высоты. Вообще, IE интерпретирует высоту в качестве минимальной высоты, так что, если в IE значение высоты не установлено в auto, следующий прием исправит этот баг.

Загрузка картинки

Этот эффект загрузки изображения, имитирует ajax-загрузку, отображая прелоудер, пока весь контент не будет загружен. Такое решение отлично подойдет для больших, медленно загружающихся картинок.

Вертикальное центрирование


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

Создаем врезы

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

Выделение текста

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

Добавляем разрыв страницы

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

Немного о CSS для начинающих

Как я уже писала раньше, я пытаюсь грызть гранит науки в сфере вёрстки, и уже получается делать простенькие сайты как на «голой» вёрстке с нуля, так и шаблонные сайты на CMS, со своей корректировкой таблицы стилей. Сейчас хочу поделиться своим опытом и заметками, полученными в процессе самостоятельного изучения, рекомендациями по инструментам, материалам и ресурсам, которые помогли лично мне, а может, помогут и тем, кто находится только в начале пути.

Один из таких ресурсов – всевозможные вебинары крупных разработчиков и IT-компаний, среди которых, на мой взгляд, особого внимания заслуживает школа разработчиков Яндекса, лекции которой я периодически изучаю и делаю для себя пометки.

На основе одной из таких лекций, посвященной средствам работы с CSS, я написала небольшой обзор с советами для начинающих верстальщиков.

Существует огромное количество ресурсов, которые стоит изучить и прочитать. В первую очередь, конечно, необходимо читать и изучать основные спецификации (например, здесь https://www.w3.org/Style/CSS ). Тут вам потребуется знание английского языка, с ним гораздо проще понимать и вникать в стандарты как CSS, так и HTML. Хотя там и бывают иногда переведённые отрывки на русском языке, но лучше все же изучать английский. Также в помощь сайт https://www.webplatform.org , куда заливается множество описаний спецификаций, в формате Вики, или же сайт http://stackoverflow.com , где можно задать вопросы знатокам, на которые ответят оперативно, скорее всего, в тот же день. Лично меня не раз выручал сайт htmlbook.ru, который сейчас медленно, но верно переезжает на новый домен https://webref.ru , но это скорее справочник по свойствам и значениям, где тоже, кстати, можно задать вопрос, и обычно ребята там оперативно друг другу подсказывают. И, конечно, этот сайт очень полезен в процессе практики, когда у вас хоть тресни, но что-то не работает — часто помогают, и проблема разрешается. Также довольно мощный ресурс по самостоятельному обучению — https://htmlacademy.ru/ .

Вообще, на мой взгляд, вёрстка – это довольно социально-коммуникабельная отрасль, где в команде можно выполнить работу гораздо качественнее и быстрее, нежели по одиночке. Многие загвоздки решаются коллективно, потому что кто-то из команды обязательно уже сталкивался с той или иной проблемой.

Также сейчас огромное количество специализированной литературы, обучающей в том числе. Лично я учусь в основном по книгам серии Head First, и самый первый опыт в создании сайта я получила, следуя руководству этого издания www.headfirstlabs.com/books/hfhtml. И уже в качестве дополнения изучала такие книги, как http://www.ozon.ru/context/detail/id/3881079 , http://www.ozon.ru/context/detail/id/24493075 .

Кстати, по всем книгам всегда ищите последнее издание и новейшие руководства, технологии всё же идут вперед очень быстро, и за ними необходимо оперативно следовать.

Теория, это конечно, полезно и без нее ну никуда, но без постоянной практики трудно научиться делать что-то действительно стоящее.

Сейчас есть большое количество таких сайтов, «песочниц». На них приходишь, там есть что-то вроде textarea, куда вводишь свой код, и он моментально отображается на экране. То есть не нужно вбивать все в редакторе, обновлять браузер и так по кругу – правишь-обновляешь. Здесь сразу применяешь свойство и видишь, как оно работает. Примеры сайтов http://cssdesk.com , http://dabblet.com , http://jsbin.com , https://jsfiddle.net – как видно из названия, они предназначены не только для CSS, но и для HTML/JS. Если интересно, о последнем можете почитать здесь https://habrahabr.ru/post/126910 . Кстати, не пренебрегайте Хабром https://habrahabr.ru/interesting , здесь тоже много полезной информации. А таком сайте, как http://codepen.io вы можете поделиться своим кодом другими ( http://www.internet-technologies.ru/articles/article_1663.ht. — вот руководство по последнему, если интересно).

2.2. Браузерные инструменты или свойства разработчика

Если песочницы отлично выполняют свою функции потыкать/поиграть/попробовать, то, когда вы будет делать свой проект, то, конечно, захотите что-то подправить именно в нем, и посмотреть, как эти изменения работают в браузере. Для каждого браузера есть свои инструменты. Если кто-то не знает, то работает это так: открываем любую страницу, правой кнопкой мыши щелкаем — далее «Просмотреть код», и видим внизу или слева открывшееся окно. Нажав на любой элемент слева, видим его в окне браузера. Справа же есть все css-свойства, примененные к этому элементу, и если мы хотим что-то быстренько посмотреть-поменять, то прямо в свойствах разработчика меняем, или вообще отключаем свойство, и смотрим результат.

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

2.3. Редакторы кода.

Ну, это наш основной инструмент практики. В общем то, редакторы могут быть любыми. Начиная от банального Notepad+ и заканчивая такими мощными штуками как Sublime Text, DreamViewer, Web Storm. Отчасти, все эти редакторы похожи по принципу работы, главное, чтобы редактор поддерживал подсветку синтаксиса или какие-то сниппеты/автодополнения, которые могут облегчить вам работу. Важно также, чтобы редактор поддерживал автообновление страниц, чтобы сразу видеть изменения в браузере. Имеют механизм «живого обновления» страницы такие приложения, как Live Reload, Code Kit, Grunt. Чтобы определиться, что подходит лично вам для разработки, стоит самим покопаться в многообразии средств и выбрать то, что больше всего удовлетворяет вашим потребностям.

Мастер Йода рекомендует:  Выпущена бета-версия браузера Chrome 4.0

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

Самые известные из них – SASS, LESS, Stylus, Roole. SASS, пожалуй, самый старый из них и распространенный. LESS – самый простой и имеет меньше всего возможностей. Но начинать с препроцессоров, пожалуй, не стоит. Имеет смысл писать чистый CSS, смотреть, как он работает (можно в «песочницах», чтобы не заморачиваться первое время), но позже стоит посмотреть и попробовать препроцессоры и выбрать для себя тот, который вам нравится и подходит вам по задачам.

Существует огромное количество фреймворков, т.е. готовых наборов CSS и HTML, написанных и в том числе с помощью препроцессоров. Например, «бутстрапы» (самый известный из них – Twitter Bootstrap) — наборы уже готовых классов с CSS-свойствами, чтобы быстренько сделать какую-то определенную страничку, которая выглядит нормально и стандартно. При подключении файлов фрэймворков в проекте мы можем использовать определённые в них классы и сниппеты разметки, которые будут работать по уже описанным правилам и иметь установленный внешний вид (например, кнопки, поля ввода, таблицы и пр.). Таким образом мы экономим время, например, на описание расположения блоков дизайна, их размеров в зависимости от разрешения, внешний вид полей формы, кнопок и их состояния. Фреймворков очень много, и начинать с них тоже не советуется, поскольку код в них довольно специфичен и заточен под определенные задачи. Лучше делать свой код и учиться на своих ошибках, нежели копипастить код из готовых фреймворков.

В заключение, подведу итог – читайте специализированные книги, лекции, практикуйте как можно больше, экспериментируйте со свойствами CSS в комплексе друг с другом – это отлично прокачивает ваши навыки.

Просьба к опытным товарищам Пикабу — не ругайте сильно, если мои рекомендации в чём то ошибочны. Критикуя — предлагай! Буду рада конструктивной критике и я, и наверняка те, кому полезна эта статья.

7 полезных ресурсов для тех, кто изучает CSS

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

Консорциум Всемирной паутины (World Wide Web Consortium, W3C) рекомендовал технологию CSS (Cascading Style Sheets) в 1996 году. С тех пор веб-разработчики используют каскадные таблицы стилей для создания уникального оформления сайтов.

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

Установите расширение Web Developer для Chrome или дополнение Disable CSS для Firefox, чтобы полюбоваться любимыми сайтами без каскадных таблиц стилей.

Изменения будут разительными, хотя и не всегда. Например, новостной агрегатор Drudge Report почти не изменится: он прост как дважды два. Тем не менее ежемесячно ресурс просматривают свыше 150 миллионов раз.

Где научиться тонкостям CSS

1. HTMLbook

Будем последовательны и начнём с крепкой теоретической базы. За ней обратимся к Владу Мержевичу, автору книг и веб-разработчику, который поддерживает несколько качественных ресурсов о вёрстке и стилизации веб-страниц.

На HTMLbook вы найдёте понятный самоучитель и ответы на популярные вопросы о каскадных таблицах стилей. Здесь же представлены обучающие статьи об актуальной третьей спецификации CSS.

2. WebReference

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

3. CSS Reference

В дополнение к русскоязычным самоучителям добавим зарубежные сайты. Некоторым студентам с их помощью проще вникать в профессию и принимать её терминологию. Поэтому всё внимание на CSS Reference. На сайте нет ничего лишнего: свойства CSS, пояснения и действие. Из приятных мелочей отметим быстрый поиск и копирование свойства в буфер обмена по щелчку мыши.

4. CSS Design Awards

Обучение — дело долгое и порой скучное. Неплохо бы найти мотивацию, чтобы она помогала в трудные минуты. Вдохновляться будем у других веб-дизайнеров, а точнее на сайте CSS Design Awards. Здесь каждый день представляют качественный проект, который служит образцом того, к чему стоит стремиться. Многие из победителей действительно удивляют. Не забывайте заглядывать и голосовать за понравившихся номинантов.


5. CSS Zen Garden

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

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

6. CSSPlay

Понятное дело, что вам захочется применить нечто эдакое, что привлечёт всеобщее внимание. Не знаем, есть ли такое на CSSPlay, но десятки и сотни любопытных приёмов там точно завалялись.

Скачать код напрямую не получится. Вам придётся залезть в меню разработчиков — такова политика местной партии. При этом подавляющее большинство CSS-стилей можно использовать без разрешения автора.

7. CSS Lint

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

А какие ресурсы о каскадных таблицах стилей можете посоветовать вы?

One more step

Please complete the security check to access codepen.io

Why do I have to complete a CAPTCHA?

Completing the CAPTCHA proves you are a human and gives you temporary access to the web property.

What can I do to prevent this in the future?

If you are on a personal connection, like at home, you can run an anti-virus scan on your device to make sure it is not infected with malware.

If you are at an office or shared network, you can ask the network administrator to run a scan across the network looking for misconfigured or infected devices.

Another way to prevent getting this page in the future is to use Privacy Pass. You may need to download version 2.0 now from the Chrome Web Store.

Cloudflare Ray ID: 533b550b3a508d4b • Your IP : 188.64.174.135 • Performance & security by Cloudflare

Способы применения CSS

Лабораторная работа № 4

Цель работы: формирование умений создания HTML-документов с применением каскадных таблиц стилей.

Краткие теоретические сведения

Для чего нужны таблицы стилей?

Вы создавали предыдущие страницы, так как их создавали раньше до появления каскадных таблиц стилей или CSS (Cascading Style Sheets).

Основные проблемы, с которыми сталкивались разработчики сайтов до появления CSS:

Проблема позиционирования (разметка страниц). Хотя для этого стали использовать таблицы (они небыли для этого предназначены изначально), они не решили всех проблем. Не возможно осуществить следующее:

— Нельзя задать фиксированные размеры какого-нибудь блока. Например, текстовый блок будет разъезжаться при переполнении (даже если он в таблице).

— Нельзя задать фиксированные координаты положения блока на странице.

— Нельзя наложить один блок на другой. Например, попробуйте надвинуть картинку поверх таблицы или другой картинки.

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

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

С помощью CSS эти проблемы можно решить.

Способы применения CSS

Существует три способа применения таблиц стилей:

Внутренние таблицы стилей (Inline Style Sheets) — при помощи специального атрибута помещаются прямо в HTML теги.

Пример HTML:

Пример CSS:

Как можно заметить, код Inline Style Sheet получился больше чем HTML. Поэтому ISS следует использовать, только если необходимо задать определенному элементу свой индивидуальный стиль.

При помощи дополнительного атрибута style мы можем определить нужные нам стилевые параметры в любом теге. Это самый легкий способ, и действует он в пределах лишь одного тега. Но представьте, насколько вырастет размер файла, и насколько неудобно будет его исправлять, если мы будем указывать стиль у каждого тега.

Глобальные таблицы стилей (Global Style Sheets) — определяют стиль элементов во всем документе.

Для этого используется тег

Теперь эти стили можно применять в любом месте html-кода. Для этого используются следующие конструкции:

Этот заголовок написан крупным красным курсивом

Добавить комментарий