5 способов писать CSS лучше в одно мгновение.


Содержание материала:

Очередной блог фрилансера

коротко и полезно о веб-разработке

HTML 5 и CSS3: Техники, которые мы скоро будем использовать

В сегодняшней статье мы собираемся создать страницу блога, используя техники нового поколения – HTML5 и CSS3. Статья продемонстрирует вам процесс разработки веб-сайтов, после того как окончательно утвердят спецификации и поставщики браузеров начнут их поддерживать. Если вы знакомы с HTML и CSS, то вам будет легко продолжить обучение.

Что мы собираемся создавать

Вот так будет выглядеть наша страница, когда мы закончим:

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

HTML 5

HTML 5 является следующей версией HTML. Он включает в себя множество новых элементов, которые сделают наши страницы более семантическими. Это значительно облегчит навигацию по странице для поисковых систем и голосовых модулей. Кроме того, HTML 5 также будет включать API для рисования графиков на экране, хранения данных на клиенте, технологию drag-and-drop, и многое другое. Давайте начнем разметку для нашего блога.

Основная структура

Прежде чем мы создадим разметку страницы, нужно представить общую структуру:

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

Это выглядит как обычная HTML-разметка, но есть несколько моментов, которые стоит отметить:

  • В HTML 5, есть только один doctype . Он объявляется в начале страницы через . Он просто сообщает браузеру, как интерпретировать HTML-документ.
  • Новый тэг header , является контейнером для вступительных элементов, таких как заголовок или логотип. Он также может содержать оглавление или поисковую форму. Каждый заголовок обычно содержит теги заголовков от

. В данном случае заголовок используется только для представления страницы, немного позднее мы добавим его в различные секции страницы.
  • Тэг nav используется для содержания навигационных элементов, таких как основная навигация сайта или более специализированная навигация, как ссылки на следующую/предыдущую страницы.
  • aside – используется для обертывания содержимого, связанного с основным контентом страницы, которое всегда находится на одном месте. В данном случае мы используем его для сайдбара.
  • Тэг section используется для обозначения секции документа. Он может содержать все виды разметки, и множество секций могут быть вложены друг в друга.
  • Тэг footer должен содержать дополнительную информацию об основном контенте, такую как информацию об авторе, копирайты, ссылки на похожие документы и тому подобное.
  • Вместо того чтобы использовать тэг

    Разметка для Навигации

    Разметка навигации создается точно так же как и в HTML 4 или XHTML, с использованием маркированного списка. Ключ в том, что этот список располагается внутри тэгов nav .

    Разметка для Вступления

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

    Мы добавили ID к тэгу section, чтобы потом можно было назначить ему определенный стиль. Мы используем тэг header , для заключения элемента h2 . Кроме описания основного документа, тэги заголовков всегда должны использоваться для описания отдельных секций.

    Разметка Основного контента

    Наш контент содержит три секции: запись, комментарии и форму отправки комментариев. Используя наши знания о новой структуре тэгов в HTML 5, сделать разметку будет очень легко .

    Разметка для Записи

    Посмотрите разметку, и я расскажу о новых элементах ниже.

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

    Элемент header , используется для представления заголовка и метаданных о записи. Мы сообщаем пользователю, когда статья была написана, кто ее написал, и как много комментариев она имеет. Обратите внимание, что время заключено в соответствующий тэг. Этот тег также новый в HTML 5, и используется для разметки определенного участка во времени. Содержимое атрибута datetime должно быть следующим:

    Год, затем тире (знак минус)

    1. Месяц, затем тире
    2. Дата
    3. Прописная T, для определения того, что мы собираемся указывать местное время
    4. Местное время в формате hh:mm:ss
    5. Часовой пояс по Гринвичу. Я нахожусь в Дании, где GMT+1, поэтому я пишу +01.

    Разметка для Комментариев

    Разметка для комментариев очень простая. Никаких новых тэгов и атрибутов не используется.

    Разметка для Формы Комментирования

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

    Появилось два новых типа input-ов, email и url . Email указывает на то, что пользователь должен ввести валидный E-mail, а в поле url — валидный адрес сайта. Если вы добавите атрибут required , пользователь не сможет отправить пустое поле. «Required» — это логический атрибут, новый в HTML 5. Это всего лишь значит, что поле обязательно должно иметь какое-то значение.

    Разметка Сайдбара и Подвала

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

    Вы можете взглянуть на окончательный результат разметки. Теперь перейдем к стилям.

    Стилизация с CSS 3

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

    Основные настройки

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

    Сначала мы, простым правилом, обнуляем значения свойств margin — и padding -.

    Затем, мы указываем браузеру, возвращать все новые элементы HTML 5 в качестве блоков. Браузеры нормально относятся к неизвестным элементам, но им неизвестно как эти элементы должны быть отрисованы по умолчанию. Нам придется сообщать об этом браузерам до тех пор, пока HTML 5 официально не будет утвержден.

    Также обратите внимание, что я выбрал размер шрифта в пикселях, вместо em или % . Это сделано специально, для придания статье прогрессивного характера. Когда, в один прекрасные день, все основные браузеры будут осуществлять полную поддержку HTML 5 и CSS 3, у нас появится возможность масштабирования страницы, вместо простого ресайзинга текста. Благодаря этому исчезнет необходимость указывать единицы измерения в относительных единицах, поскольку браузер в любом случае сможет масштабировать страницу.

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

    Стилизация Навигации

    Обязательно обратите внимание, что ширина у body задана 940 px , и он располагается по центру. Нашему блоку навигации нужно растянуться по всей доступной ширине окна, так что мы должны применить необходимые для этого стили:

    Мы позиционировали элемент nav абсолютно, выровняли его по левому краю окна и растянули по всей доступной ширине. Теперь центрируем вложенный список, для его отображения в границах нашей раскладки:

    После этого мы добавим некоторые дополнительные стили, чтобы навигационный список выглядел красивее, и расположим его в сетке, на которой основан наш макет. Я также добавил стиль для подсветки текущей страницы и настроил внешний вид RSS -ссылки.

    Стилизация Предисловия

    Разметка для предисловия очень простая. Секция с заголовком и абзацем текста. Тем не менее, мы будем использовать немного новых CSS 3-свойств, чтобы сделать ее более привлекательной.

    Мы использовали два новых свойства. Первое, это background — size , которое позволит вам масштабировать фоновое изображение. В нашем случае, мы будем масштабировать его на 100% по обеим осям. Если при добавлении контента, бокс растянется, то лежащий в фоне градиент будет масштабироваться вместе с боксом. Это как раз то, что нельзя реализовать в CSS 2.1 не нарушая семантики разметки.

    Второе новое свойство это – border — radius , которое применяет закругленные углы к элементу. Радиус наших закругленных углов равен 22 px , для каждого угла. Вы можете назначить различные значения для любого угла, или назначить закругленными только определенные углы.

    К сожалению, ни одно из этих свойств, полностью не поддерживается в популярных браузерах. Тем не менее, мы можем получить некоторую поддержку, используя специфические расширения для браузеров. Background — size поддерживается в последней версии Safari , Opera и Konqueror . Border — radius поддерживается в последней версии Safari и Firefox .

    После того как мы указали свойство background — color , можно не боятся проблем с отображением страницы в браузерах, не поддерживающих background — size , таких как Firefox . Теперь нам нужно стилизовать заголовок и текст.

    Картинку цветка можно легко поместить на страницу, путем добавления второго фонового изображения, то, что поддерживается в CSS 3, для секции # intro .

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

    К сожалению ни один из браузеров полностью не поддерживает этого. Поэтому нам пока придется действовать по старинке: будем использовать картинку и позиционировать ее с использованием CSS .

    Стилизация Контента и Сайдбара

    Контент и сайдбар должны быть расположены рядом друг с другом. Обычно это делается с помощью float , но в CSS 3 это можно сделать с помощью таблиц!

    «Что?! Таблицы?», наверное, удивитесь вы. Потому что давным-давно знаете, что использование таблиц для создания раскладки очень и очень плохая идея, и это до сих пор так. Вы никогда не должны использовать элементы таблицы для верстки раскладки. Однако, с помощью CSS 3, мы можем сделать элементы похожими на таблицы, без появления таблиц в разметке. Для начала, нам потребуется немного элементов div , чтобы сгруппировать секции, более логичным образом.

    Вся разметка остается семантической, но теперь мы можем ее стилизовать. Нам нужно сделать блок #content похожим на таблицу, с колонками из блоков #mainContent и aside . С CSS 3 это очень легко:

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

    Стилизация Записи

    Стилизация заголовка записи вполне тривиальна, поэтому я пропущу ее и перейду к интересной части: многоколоночная раскладка.

    Множественные колонки

    Множественные колонки текста раньше невозможно было создать без ручного разделения текста, но с CSS 3 это очень просто, все, что нам понадобится это завернуть параграфы в элемент div , для работы с текущими браузерами.

    Теперь мы можем добавить два простых свойства.

    Нам нужно создать 2 колонки с расстоянием 22 px между ними. Дополнительный div нужен, потому что на данный момент нет поддерживаемого способа выстраивания элементов в несколько колонок. В будущем, возможно, вам будет достаточно указать свойство column — span , и написать всего лишь:

    Конечно, свойства column — count и column — gap поддерживаются только некоторыми браузерами, Safari и Firefox . Нам, пока что, придется использовать специальные расширения браузеров.

    Box-shadow

    Если вы внимательно взгляните на картинку статьи, вы увидите тень. Мы можем сгенерировать ее используя CSS 3 и свойство box — shadow .

    Первые «3 px » сообщают браузеру, где мы хотим расположить тень по горизонтали. Вторые «3 px », сообщают, где мы хоти расположить тень по вертикали. Последние «7 px », как должна быть размыта рамка. Если вы установите последнее значение в ноль, рамка будет сплошной. Последнее, но не по значению, указывается основной цвет тени. Этот цвет конечно тускнеет, в зависимости от того насколько большое размытие тени вы установили.

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

    Полосатые Комментарии

    Полосатая раскраска или подсветка каждого второго элемента в последовательности, традиционно связана с выбором всех элементов, с помощью JavaScript , затем прогон их в цикле и подсветка всех четных элементов. CSS 3 предоставляет псевдо-класс « nth — child », который делает это до смешного легко, без использования JavaScript . Мы используем его для полосатой раскраски комментариев.

    Таинственное значение «2 n +1», на самом деле очень простое, если вы понимаете что это значит:

    2 n – выбор каждого второго элемента списка. Если вы напишете 3 n , будет выбран каждый третий элемент, 4 n – четвертый, и так далее.

    +1 сообщает браузеру, что начать нужно с первого элемента. Если вы знакомы с программированием, то должны знать, что все массивы начинаются с 0, здесь точно так же. Это значит что элемент с номером 1, на самом деле второй элемент в последовательности.

    В качестве альтернативы, вы можете написать просто:

    Здесь используется один из наиболее часто используемых стандартных значений, odd и even . Стилизация остальной части комментариев довольно проста для понимания, с вашими новыми знаниями.

    Стилизация Формы отправки комментариев, Подвала и Сайдбара

    Для стилизации подвала сайдбара и формы комментариев, была использована пара CSS 3-техник. В форме комментариев и в подвале, я использовал ту же технику табличной раскладки, что и в основном макете. В сайдбаре использовался border — radius , для добавления закругленных углов различным секциям.

    Финальный Дизайн

    Смотрите результат нашей работы, со всеми стилями.

    Заключение

    Когда HTML 5 и CSS 3 однажды начнут поддерживать все браузеры, жизнь разработчика веб-сайтов станет гораздо проще. Мы, наконец, перестанем использовать флоаты для раскладки (которые вообще не предназначены для этого), терять значительное количество времени на написание JavaScript -кода, для масштабирования фоновых изображений, или полосатой раскраски таблиц.

    Рассказать друзьям

    Понравилась статья? Лучший способ сказать спасибо — поделиться ссылкой в социальных сетях:

    8 простых эффектов CSS3, которые произведут впечатление на ваших пользователей

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

    Вот 8 действительно простых эффектов, которые добавят жизнь в ваш UI (пользовательский интерфейс) и улыбок на лица ваших пользователей.

    Все эти эффекты (один прямоугольник) управляются с помощью свойства transition. Таким образом, чтобы видеть, как эти эффекты работают, мы создали div в HTML странице:

    Сделав это, установите его ширину и высоту (чтобы он имел размеры), его цвет фона (чтобы мы могли видеть его) и свойства его эффекта.

    Свойство transition имеет три значения: свойства по переходу (в нашем случае все из них) скорость перехода (в нашем случае 0,3 секунды) и третье значение, которое позволяет изменять как рассчитывается ускорение и замедление, но мы продержимся настройки по умолчанию, оставляя это поле пустым.

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

    Если вы хотите продолжить самостоятельно, то для вас демо-файлы здесь.

    1. Затемнение

    Сделать эффекты затемнения – это довольно распространённая просьба клиентов. Это отличный способ подчеркнуть функциональность или обратить внимание на призыв к действию.

    Эффект кодируются в два этапа: сначала, вы установите начальное состояние; далее установите изменение, например, при наведении мыши:

    (Убедитесь, что вы присвоили вашему div класс «fade», чтобы увидеть, как это работает.)

    2. Смена цвета

    Раньше анимация изменения цвета был невероятно сложным делом, с вовлечением математики, участвующей в расчете отдельные значения RGB, а затем рекомбинации их. Теперь мы просто устанавливаем div’у класс «color» и задаём цвет, какой хотим, в CSS:

    3. Увеличение и ужатие

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


    Установите класс вашего div, на «grow», а затем добавьте этот код в ваш стиль блока:

    Ужать элемент так же просто, как увеличить его. Чтобы увеличить элемент мы указываем значение, большее 1, чтобы уменьшить его, мы указать значение меньше, чем 1:

    4. Кручение элементов

    CSS предусматривает ряд трансформаций, и одна из лучших – это кручение элемента. Присвойте вашему div’у класс «rotate» и добавьте следующие строки в ваш CSS:

    5. Превращение квадрата в круг

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

    Присвойте вашему div’у класс «circle» и добавить эти строки к вашим таблицам стилей:

    6. 3D тень

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

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

    Присвойте вашему div’у класс «threed», а затем добавьте следующий код в ваш CSS:

    7. Качание

    Не все элементы используют свойство перехода. Мы также можем создать очень сложные анимации с использованием @keyframes, анимации и анимации-итерации.

    В этом случае, мы сначала определим CSS анимации в стилях. Вы заметите, что из-за проблем реализации, мы должны использовать @-webkit-keyframes, а также @keyframes (да, Internet Explorer действительно лучше, чем Chrome, в этом отношении, по крайней мере).

    8. Вставка границы

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

    Дайте вашему дел класс «border» и добавьте следующий CSS для ваших стилей:

    Frontender Magazine

    Вам не кажется, что CSS уже не такой как раньше? Последние несколько лет это актуальная тема для множества умных людей. CSS — это не просто звено, которое фронтенд-разработчик должен добавить, чтобы страница выглядела красиво. Это намного больше. Производительность для нас играет большую роль и мы стремимся разрабатывать хорошие сайты. В этой статье я хочу поделиться опытом, приобретённым за последние несколько месяцев и моими взглядами на написание CSS-кода. Меня как программиста очень интересует архитектурная часть процесса. Мне кажется, что процесс написания CSS нуждается в изменениях и я усердно изучаю этот вопрос. Я веду поиск удачных подходов и методов, новых вариантов организации процесса написания кода. Эта статья является своеобразным итогом путешествия в мир CSS. Многие говорят, что написание CSS — это не совсем программирование. Я с этим не согласен и считаю, что оно не менее интересно и сложно.

    Препроцессоры CSS

    Взглянем правде в лицо. Написание чистого CSS — не самое увлекательное занятие в мире. Препроцессоры берут нечто напоминающее CSS и чудесным образом выдают валидный CSS-код. Это добавляет дополнительную прослойку между разработчиком и конечным стилем, который будет послан браузеру. Однако всё не так плохо, ведь препроцессоры обладают некоторыми очень полезными возможностями.

    Конкатенация

    Наиболее ценной возможностью препроцессоров я считаю конкатенацию файлов. Уверен, вы знаете что написав @import в файле .css вы собственно говорите браузеру: «используй и этот файл, пожалуйста». И он его использует. Добавляется еще один запрос, что не очень хорошо, ведь таких файлов у вас может быть много. Большое количество запросов ухудшает производительность приложения. Если использовать препроцессоры CSS, эта проблема устраняется. Они просто объединяют все стили в один css-файл.

    Расширение

    Есть два основных препроцессора CSS — LESS и Sass. Они оба поддерживают расширение CSS. Да, работают они немного по-разному, но идея та же. Вы создаете базовый класс (его обычно называют «миксин») с набором свойств и затем импортируете эти свойства в другой селектор. Например:

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

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

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

    Очевидны два позитивных момента. Во-первых, класс .bordered не компилируется. Во-вторых, Sass комбинирует селекторы, что делает CSS немного короче.

    Компоновка

    LESS и Sass поддерживают определение переменных. Можно в любой момент обратиться к этим переменным и использовать их в качестве значений для свойств.

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

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

    Аргументы против препроцессоров

    • Препроцессор является инструментом, т.е. это еще один компонент, который вам придётся добавить в среду разработки. Вам возможно захочется сделать его встроенным в приложение. Это, само собой, предусматривает написание дополнительного кода.
    • Если вы не хотите беспорядка в коде, вам вероятно понадобится средство отслеживания изменений. Еще один инструмент, который будет следить за вашими файлами и запускать компиляцию после того как в них будут внесены изменения. Если это ваш случай, вам придётся запускать этот инструмент каждый раз когда вы начинаете работать над проектом. Возможно, со временем вы найдете способ оптимизировать этот процесс, но над этим придётся поработать.
    • Очень часто разработчиков заботят только файлы .less или .Sass. Однако, результат — вот, что действительно имеет значение. Ваш Sass может быть изящным и оптимизированным, однако это не гарантирует, что в результате вы получите столь же красивый CSS. Могут возникнуть довольно интересные проблемы со специфичностью. Так что скомпилированную версию нужно регулярно просматривать.

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

    Стили могут быть такими:

    Такой код, конечно же, будет работать, однако есть проблема: читая CSS вы не сможете понять что, например, логотип logo является частью шапки header . Еще один маленький логотип может быть использован в подвале. Следующий логичный шаг — прописать в селекторе элемент-родитель.

    Однако это не очень хорошая идея, ведь стили становятся зависимыми от иерархии конкретных тегов. Что если потребуется перенести логотип за пределы тега header ? Стиль не будет применён. Можно добавить site-header в название класса логотипа:

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

    потому что по логике название селектора должно отвечать расположению тегов в HTML.

    БЭМ может стать решением в таком случае. Он расшифровывается как «Блок, Элемент, Модификатор» и диктует некоторые правила, которым нужно следовать. Используя БЭМ можно превратить наш маленький пример в:

    Т.е. site-header — это у нас блок. Логотип logo и навигация navigation — элементы этого блока, а версия логотипа xmas — модификатор. Возможно всё и выглядит очень просто, но такой подход даёт широкие возможности. Начав его использовать, вы убедитесь что архитектура ваших работ улучшится. Слабой стороной БЭМ является разве что синтаксис. Да, он немного безобразен, но я готов пойти на жертвы ради исправности системы.

    (материалы для чтения: здесь и здесь)

    OOCSS

    Открыв для себя БЭМ, я научился правильно называть классы и задумался над структурой. Наверное первой мне на глаза попалась статья об Объектно-ориентированном CSS. Суть объектно-ориентированного программирования частично заключается в использовании абстракций и язык CSS их поддерживает. Не важно используете вы препроцессоры или нет, вам нужно знать об OOCSS. Я программист, поэтому эта концепция показалась мне очень похожей на то, как я программирую каждый день, например, на JavaScript. У неё есть два главных принципа:

    Разделение структуры и оформления

    Взгляните на следующий пример:

    В нём несколько стилей продублированы. Их можно выделить в отдельный класс следующим образом:

    Теперь у нас есть объект colors-skin , которому можно найти широкое применение. Разметка может выглядеть так:

    У такого изменения есть несколько плюсов:

    • мы получаем класс, который можно использовать несколько раз;
    • если нужно внести изменение, это нужно сделать только для одного класса;
    • повторение в файле CSS удалено, что делает размер файла меньшим.

    Разделение контейнера и содержимого

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

    Ведь если переместить .social-widget за пределы контейнера .header , его ширина изменится. В общем, так делать не рекомендуется. Особенно для компонентов, которые встречаются по всей странице. Это принцип блочного CSS и я настоятельно рекомендую выделить немного времени на то, чтобы попробовать такой подход. Лично мне следование этому принципу помогает писать лучший CSS.

    Фреймворк

    Если вы откроете репозиторий OOCSS на GitHub, то увидите фреймворк. Да, в этом фреймворке используется концепция объектно-ориентированного CSS и да, у него есть несколько крутых компонентов, готовых к использованию. С некоторого времени мне не нравятся фреймворки. Если вы на минуту задумаетесь, то увидите что слово фреймворк состоит из двух частей — «frame» и «work», что значит «каркас, рамка»1 и «изделие». И действительно, работая с фреймворком вы ограничены рамками. Вы связались с этим инструментом и вынуждены играть по его правилам. Я отдаю предпочтение микро-фреймворкам или подобным инструментам, которые дают мне лишь основу. Я ни в коем случае не пытаюсь изобрести колесо, только хочу найти баланс. Очень часто готовые к использованию решения ведут к неопрятной и слишком запутанной системе. Я бы советовал создавать такие инструменты с одной конкретной целью. Если пытаться предвидеть побольше способов применения, в результате получите… ну, вы поняли — фреймворк.

    Тем не менее я настоятельно рекомендую взглянуть на фреймворк OOCSS. Возможно он подойдёт под ваши требования. Создатель репозитория — Николь Саливан (Nicole Sullivan). Она первооткрыватель OOCSS и если у вас появится немного свободного времени, советую послушать её презентации/лекции.

    SMACSS

    Представляю вам ещё одну популярную концепцию: SMACSS. SMACSS расшифровывается, как масштабируемая модульная архитектура CSS (Scalable and Modular Architecture for CSS). Джонатан Снук (Jonathan Snook) предложил нечто вроде гида по стилю для CSS-разработчиков. Суть в том, чтобы разделить ваше приложение на следующие категории:

    • основа — базовые стили по умолчанию для простых селекторов. Например, clearfix ;
    • структура — определение каркаса;
    • модуль — группа элементов которые вместе формируют модуль. Например, шапка или боковая колонка;
    • состояние — содержит описание различных состояний элементов. Правила при скрытии, нажатии, растяжении (и т.д.) определённого объекта;
    • тема — большей мерой определение визуального представления элементов. Похожая на категорию «состояние»;

    Мне пока не приходилось использовать концепцию SMACSS, но она довольно популярна и действительно продвигает хорошие идеи. Больше всего радует, что она скорее является идеей реализации, чем фреймворком. Следовательно, вы не связаны чёткими правилами, классами или компонентами.

    Атомарный дизайн

    Изучив OOCSS и SMACSS, я начал искать подходящее модельное представление и довольно быстро оказался на этой странице. Это презентация отличной концепции «Атомный дизайн». Её автор — Бред Фрост (Brad Frost), известный веб-разработчик, работающий преимущественно в мире отзывчивого дизайна и дизайна для мобильных устройств.

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

    Т.е. атомы содержат базовые стили элементов DOM. Например, цветовую палитру, размеры шрифтов или переходы. Затем эти частички можно объединить в молекулы. Например:

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

    На этом Бред не остановился. Молекулы объединяются в организмы. Следуя тому же подходу, можно прописать следующее и назвать его организмом:

    Еще одна особенность концепции — заготовки. Они не имеют ничего общего с химией, однако вписываются в веб-контекст. Сочетая разные организмы, мы создаём заготовку. Затем из этих заготовок формируется конечная страница.

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

    Органический CSS

    Пару месяцев назад я написал статью об Organic. Это чудесный маленький фреймворк для приложений на JavaScript. Он даже больше смахивает на шаблон разработки и лично мне он очень понравился. Я даже использовал Organic в нескольких проектах и всё работает без каких-либо проблем. Если он вас заинтересовал, советую почитать этот пост.

    Когда я натолкнулся на статью Бреда Фроста, мне уже была знакома похожая концепция, реализованная в Organic. Работа Бреда просто великолепна, однако я решил пойти дальше и написать собственный микро-фреймворк на основе концепции атомного дизайна. Я использовал Sass в качестве препроцессора и создал репозиторий на Github — https://github.com/krasimir/organic-css.

    Атомы

    Начнём с наименьшего компонента фреймворка — атома. Согласно определению из википедии, атом является наименьшей частицей вещества. В контексте CSS, думаю этому определению соответствует свойство и его значение. Например:

    Добавление атомов посредством прописания стилей прямо в классах не соответствует моим намерениям. Потому что если я напишу что-то вроде этого:

    препроцессор оставит эту запись как есть. А мне нужен вот такой результат:

    В Sass такого эффекта можно добиться используя плейсхолдеры. Т.е.

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

    Для большей последовательности работы я создал миксин для определения атома. Итак, вот пример:

    Используя этот подход я создал подборку атомов, которые можно с легкостью применить для любого проекта. Взглянуть на них можно здесь. Я использовал некоторые хорошие правила из других фреймворков, не всё является моей заслугой. Также доступен миксин для объединения атомов в молекулу:

    Молекулы

    Молекула — это элемент DOM, который нужно стилизировать и у которого нет дочерних элементов. Или же если у него есть дочерние элементы, они напрямую с ним не связаны. Например, может быть молекулой. Если вам трудно определить молекулы у себя на странице, просто подумайте что построено из атомов. Если какой-то элемент построен из других молекул, это наверное органелла. Несколько строчек выше я показал как определить молекулу:

    Ко мне пришла одна интересная мысль. Рассмотрим тег body . Что это? Молекула или что-то другое? Он, без сомнения, нуждается в стилизации посредством атомов, но в общем содержит другие молекулы. Значит он должно быть не молекула, а что-то другое. Я пришёл к заключению, что CSS должен быть на первом месте. Т.е. если для стилизации body нужны несколько атомов, значит он является молекулой, что значит что теоретически я не должен присоединять к нему никаких других молекул. Это может показаться непрактичным, но в большинстве случаев поможет вам воздержаться от использования дочерних селекторов, что хорошо.

    Органеллы

    Как только вы разберётесь с тем какие элементы DOM являются молекулами, вы поймёте что такое органеллы. Например, обычный элемент form служит прекрасным примером органеллы. Он содержит молекулы label , input и textarea .

    Органеллы — это наверное первая часть фреймворка, которая тесно связана с текущим приложением. Атомы и молекулы могут быть перенесены в другие проекты, в отличии от органелл.

    Больше абстракций

    Очень часто у вас может вознкать желание объединить органеллы ещё во что-то. В таком случае добавим ещё абстракций.

    Только от вас зависит, как вы построите свой CSS. Пока я использовал OrganicCSS только в одном проекте, но могу сказать что он помогает внести в проект ясность. Я рассортировал разные элементы по разделам и дал классам такие названия чтобы с лёгкостью ориентироваться с чем я имею дело. Например, если у меня есть органелла с названием header , я просто изменю её название на o-header . Просматривая HTML-разметку спустя некоторое время, я сразу вижу что CSS-стили для этого элемента находятся в разделе «органеллы».

    Заключение

    Это было интересное путешествие. Не знаю буду ли я использовать OrganicCSS в будущем, но это не самое главное. Главное — чему я научился. Я понимал, что мне нужно изменить свой подход к процессу разработки CSS и я это сделал. Мне кажется нужно больше говорить об архитектуре CSS. Как видите, для этого есть много хороших ресурсов. Их только нужно найти, понять как они работают и что с их помощью можно сделать. Только тогда можно выбирать что использовать, а что нет. Даже больше того, когда видите целостную картину, вы получаете возможность придумать что-то, что будет больше соответствовать вашим потребностям.

    Примечания

    1 В английском языке слово «frame» имеет большое количество значений. Одно из них — «рамка» (напр. для картины или зеркала), его обыгрывает автор статьи в своём рассуждении о работе с фреймворком.

    Выучил поверхностно HTML, CSS, а что дальше?

    05.09.2020, 16:18

    Выучил html и css, в чем развиваться дальше?
    Реально не знаю что учить дальше, все так сложно, и выбрать между JavaScript и PHP как я понимаю.

    Я изучаю html и css, подскажите куда брать путь дальше!)
    Всем привет, спасибо, что не прошли-(ел) мимо. Сейчас я уже стараюсь применять на практике языки.

    Подскажите что изучать дальше? Подскажите оптимальное значение для CSS media
    Подскажите что изучать дальше? Изучил CSS — Flexbox, grid, JavaScript — DOM. Изучаю не по какой-то.

    Старые добрые HTML и CSS или новые HTML 5 и CSS 3?
    Здравствуйте ) Дело собственно вот в чем. Я хочу на лето заняться изучением создания сайтов. .

    Html. Css Что это обозначает
    Друзья помогите разобраться с программой 10 05.09.2020, 17:08 2 05.09.2020, 17:14 [ТС] 3 05.09.2020, 17:25 4

    05.09.2020, 17:25
    05.09.2020, 17:32 5

    05.09.2020, 17:33 6
    06.09.2020, 01:13 7

    Бутстрап изучай. Почему нет?

    Будешь изучать js, будешь работать с той же вёрсткой. Ну так и верстай на бутстрапе. Замути какой-нибудь адаптивный сайт на bootstrap, сделай и внедри свой самописный слайдер на js.

    06.09.2020, 18:34 8

    на мой взгляд можно так:

    для написания кода использовать IDE Phpstorm

    1) html + css включая адаптивную верстку + научиться писать по методологии БЭМ(не путать с шаблонизатором бэм)
    2) jquery + умение работать с jqueryUI, select 2, сюда же — разобраться с Slick слайдером
    3) препроцессоры Pug и Scss
    4) научиться использовать таскраннер Gulp
    5) Javascript(обьекты, массивы и прочее)
    6) разобраться как работает WordPress и затем свою верстку на него натянуть, попутно еще начнете разбираться с PHP
    7) Git
    8) Bootstrap
    9) Canvas

    06.09.2020, 19:19 9

    Бред новичку использовать php storm, это уже для middle и выше разрабов, новичку это будет в диковинку, он сума сойдет от того объема информации которая в ней находиться, это лишняя нагрузка, которая на ранней стадии абсолютно не нужна, тем более он платный, лучше всего будет использование Brackets или SublimeText3 + различные плагины к ним будут отыгрывать на УРА все то, что делает phpstorm. БЭМ — это ненужная информация, которая отбирает много времени для ее изучения, на ранней стадии это вообще не нужно. Да и на middle уровне не всегда нужно, главное, что бы была семантика в коде, а имена классов можно и с головы придумать, это не такая уж сложная задача. БЭМ нужен для поддержания очень больших проектов таких как google, yandex, где триллион разработчиков и всем не расскажешь где какой класс и что под ним подразумевается, так что про БЭМ можно вообще забыть, а вспомнить лишь на middle (хотя там уже человек сам будет решать, что и как делать). Изучения jQuery без JS это бредятина полная. Для начала нужно знать основы JS, так называемый «core JavaScript». В самом старте изучения web-программирования нужно знать и учить HTML5, CSS3, JS. Вот три основных гиганта web-разработки, дальше все идет уже ответвление. Bootstrap не в коем случае нельзя учить в самом конце, его нужно осваивать после того как более-менее знаешь HTML и CSS, да и Bootsrap тоже весь не надо знать хватит «Grid» — сетки bootsrap, что бы рисовать и верстать макеты по сетке Bootstrap.

    Добавлено через 1 минуту
    А вообще вот ссылку нашел, тут парнишка все доходчиво объясняет, правда длиться долго но информативно https://www.youtube.com/watch?v=U6A15s_yvG8

    06.09.2020, 22:38 10

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

    дело в том что на jquery он сможет сразу что то делать + использовать UI и подобное ну и добавить если че надо, а чтобы понять как это же самое делается на JS(без копи паста с гугла) сколько по вашему времени пройдет ? оно то понятно что без JS никак, но это долгий путь к освоению, на своей шкуре ощущаю, может я ошибаюсь, но для JQ ему хватит недельку плотно посидеть и практиковать, думаю это не много и можно в начале рассмотреть принцип его работы, ну и затем основательно взяться за JS

    Hello-site.ru

    Emmet — быстрая верстка с помощью скоростного написания html кода. Альтернатива Zen Coding.

    Занимаясь когда-то версткой макетов, я познакомился с очень интересной и удобной для верстки штукой. Zen Coding — плагин для NotePad++, который ускоряет написание html кода. Несколько символов с помощью горячих клавиш превращаются в большое дерево html кода.

    Здесь же я хочу познакомить вас с новым плагином для текстовых редакторов. Emmet — плагин, который также предназначен для скоростного написания кода, имеет преимущества над Zen Coding. Заметно, что у него появилось больше комбинаций для написания html, плюс появились комбинации для css стилей, я этого не заметил в Zen Coding. Единственное, показалось, что emmet на долю секунды работает медленее Zen Coding. Ваш выбор, или большой набор комбинаций для html и css или привычный и быстрый Zen Coding.

    Данный код строит структуру html документа с разметкой HTML5:

    html:5

    Тег div с размещенным в нем текстом:

    Вложенность тегов с указанием классов для некоторых тегов:

    div.active>p>a>span.text

    Теги списка с указанием количества вложенных тегов li:

    Указав такую комбинацию скрипт печатает div с указанным класс и id:

    .block#doc

    Следующим образом можно распечатать тег img с любым атрибутом и его значением:

    img[data=»s»][src=»https://hello-site.ru/»]

    Также можно записать теги друг за другом через знак плюса:

    .firts+.second

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

    lorem

    А такая комбинация распечатает несколько элементов списка с разным экспериментным текстом:

    l>lipsum10*5

    Здесь то же самое, но с тегом div:

    lipsum*6

    Пара комбинаций для быстрого написания стилей в css:

    Комбинация для написания стилей: значения высоты и внешнего отступа:

    h10p+m5px

    Рабочий кроссбраузерный пример подключения нестандартных шрифтов:

    Возможности CSS, которые вам понравятся в 2015

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

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

    CSS-селекторы четвёртой версии

    Спецификация селекторов третьей версии хорошо реализована в браузерах и предоставляет нам такие полезные селекторы, как :nth-child . Четвёртая же версия даёт нам гораздо больше способов разметить контент при помощи CSS.

    Отрицающий псевдокласс not

    Селектор :not появился в третьей версии, но в четвёртой он был обновлён. В третьей спецификации вы можете передать селектор, к которому не должны применяться CSS-свойства. Для того чтобы весь текст, кроме текста с классом .intro стал полужирным, вы можете использовать следующее правило.

    В четвёртой версии вы можете передавать список селекторов через запятую.

    Псевдокласс has

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

    Во втором примере я совмещаю :has и :not и выбираю только те элементы li , которые не содержат элемент p :

    Псевдокласс совпадения matches

    Этот псевдокласс означает, что мы можем применить правила к группе селекторов, например:

    Чтобы проверить, поддерживает ли ваш браузер эти селекторы, вы можете использовать css4-selectors.com. Там же вы можете узнать больше о новых селекторах.

    Режимы наложения в CSS

    Если вы знакомы с режимами наложения в фотошопе, тогда, возможно, вас заинтересует спецификация смешивания и наложения. Эта спецификация позволяет нам применять режимы наложения к фонам и любым HTML-элементам прямо в браузере.

    В приведённом ниже CSS у меня есть контейнер с фоновым изображением. Добавляя цвет фона и устанавливая background-blend-mode в значения hue и multiply , я могу применить интересный эффект к изображениям.

    Свойство mix-blend-mode позволяет наложить текст поверх изображения. В примере ниже у меня есть заголовок h1 и затем в .box2 я устанавливаю mix-blend-mode: screen .

    Режимы наложения в CSS на удивление хорошо поддерживаются современными браузерами, за исключением Internet Explorer. background-blend-mode и mix-blend-mode доступны в Safari и Firefox, в качестве экспериментальной опции в Opera и Chrome. При осторожном использовании это как раз тот вид спецификации, с которым можно поиграться, чтобы усовершенствовать ваш дизайн, при условии, что будет запасной вариант для браузеров не поддерживающих эту возможность.

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

    Узнайте больше об использовании режимов наложения в статье на CSS Tricks, на сайте Adobe и Dev Opera.

    Функция calc

    Функция calc() является частью модуля CSS-значений и единиц измерения третьей версии. Она даёт возможность выполнять математические вычисления прямо в CSS.

    В качестве простого примера можно использовать calc() для расположения фонового изображения относительно нижнего правого угла элемента. Чтобы расположить на расстоянии 30px от верхнего левого угла, вы должны использовать:

    Однако, вы не сможете этого сделать относительно правого нижнего угла, если не знаете размеров контейнера. Функция calc() означает, что вы можете вычесть 30 пикселей из стопроцентной ширины или высоты:

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

    CSS-хитрости и функция calc() — забавная статья об использовании calc() для решения проблем CSS. Вот несколько простых кейсов на CSS Tricks.

    CSS-переменные

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

    CSS-переменные, описанные в первой версии модуля пользовательские CSS-свойства для каскадных переменных, приносят эту функциональность в CSS.

    К сожалению, поддержка браузерами CSS-переменных в настоящее время ограничена Firefox.

    Посмотреть больше примеров и узнать подробности вы можете в статье на Mozilla Developer Network.

    CSS-исключения

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

    Исключения позволяют окружить текстом позиционируемые элементы со всех сторон. Само по себе оно не определяет новый метод позиционирования и может быть использовано только в соединении с другими методами. В приведённом ниже примере я абсолютным позиционированием располагаю элемент, затем определяю его как исключение, задавая свойство wrap-flow и его значение both , после чего текст начинает воспринимать позицию элемента и обтекает его со всех сторон.

    Исключения в Internet Explorer

    Поддержка браузерами исключений и wrap-flow: both сейчас ограничена IE10+, требующим префикс -ms . Обратите внимание, что исключения до недавнего времени были связаны со спецификацией CSS-фигур, которую я рассмотрю ниже, так что часть информации может пересекаться.

    CSS-фигуры

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

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

    CSS-фигуры позволяют нам изогнуть текст вокруг изображения воздушного шара

    Фигуры поддерживают Chrome и Safari, это означает, что вы можете начать использовать их для устройств с iOS. Во второй версии спецификации вы сможете придавать форму тексту внутри элементов при помощи свойства shape-inside , а с этим придёт много интересных возможностей.

    Вы можете узнать больше о фигурах в статьях (один и два) на A List Apart.

    CSS-сетки

    Самую интересную тему я оставил напоследок. Я большой фанат появления спецификации по сеткам с момента первой реализации в Internet Explorer 10. CSS-сетки предоставляют нам способ создавать при помощи CSS структурные сетки и размещать на них наш дизайн.

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

    В примере ниже мы объявляем сеткой элемент с классом .wrapper . Он содержит три колонки с шириной в 100px , отступом в 10px между ними и три строки. Мы располагаем контейнеры внутри этой сетки, используя номера линий до и после, выше и ниже той области, где мы хотим расположить элемент.

    Пример сетки в Chrome

    Поддержка браузерами последней спецификации сеток ограничена Chrome с отметкой «экспериментальная возможность». Существует приличная реализация начальной версии спецификации в Internet Explorer 10 и выше.

    Узнать больше о сетках вы можете на моём сайте Grid by Example, где можно увидеть несколько примеров сеток, которые работают в Chrome с включёнными экспериментальными возможностями. Я также делал доклад на CSS Conf EU по сеткам и вы можете посмотреть это видео на YouTube.

    У вас есть любимая новая спецификация, не рассмотренная здесь?

    Надеюсь, вам понравился этот краткий обзор некоторых новых возможностей CSS. Используйте ссылки на указанные ресурсы, чтобы узнать подробнее о том, что вас заинтересовало. Напишите мне в комментариях, если у вас есть любимая развивающаяся 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 в правом верхнем углу каждого фрейма. Как вы понимаете, это скелеты, но с помощью них можно сделать очень многое. Желание и фантазия творят чудеса!

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

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

    HTML & CSS: как не надо

    Не дублируйте стили в медиавыражениях

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

    Как это увидеть? #

    В браузере в инструментах разработчика:

    Все перечёркнутые свойства были унаследованы, но затем были перезаписаны, хотя некоторые значения остались теми же. А как надо? #

    В медиавыражение добавляйте только те свойства, которые меняются:

    Такой код быстрее писать и проще поддерживать.

    Итого

    Медиавыражения не сбрасывают стили. Добавляйте в них только те свойства, которые нужно переопределить.

    20 впечатляющих CSS3 примеров, техник и библиотек

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

    Размытое меню

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

    CSS 3D облака

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

    Логотипы на чистом CSS

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

    Алфавит с CSS анимацией

    Отличный и художественный пример использования CSS в алфавите

    3D навигация для сайта

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

    Дудл от Google на CSS

    Один из многочисленных дудлов от поисковика Google, сделанный на CSS. Это отличный пример качественного использования CSS анимации

    Слайдер

    Хорошо и качественно сделанный слайдер для картинок. Плюс 4 примера в демо.

    Двойное анимированное кольцо

    Красивое оанимационное и разноцветное кольцо с не сильно большим кодом CSS

    Размытие на CSS

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

    Полное руководство по Flexbox

    Данная статья о адаптивных блоках Flexbox. В ней рассказывается полностью о данных блоках, правда статья на Английском.

    Красочное и анимированное меню на CSS3

    Красивое выпадающее меню для сайта с иконками. Огромным плюсом является то, что оно сделано полностью на CSS.

    CSS фильтры

    Качественный материал на Английском, в котором рассказывается о применении CSS фильтров на изображения.

    CSS формы

    Пост о CSS формах с многочисленными примерами

    Прогресс бары на CSS

    Урок о том как создать стильные прогресс бары на чистом CSS и с анимацией. Также Вы можете посмотреть пример и скачать исходники.

    Анимация — Animate.css

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

    Индикаторы загрузки — Spinkit

    Скажу честно данные индикаторы уже встречались на блоге, но мне кажется что их стоит ещё раз Вам показать. Так как это самые красивые индикаторы в интернете на CSS.

    Кнопки

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

    Генератор для создания переключателей

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

    Всплывающие подсказки

    CSS библиотека бесплатных всплывающих подсказок — Hint.css

    Цветовые схемы

    Схемы цветов для людей, которые не любят копаться в коде

    7 CSS трюков, о которых вы не знали

    Иногда ко мне на почту приходят сообщения следующего содержания:

    «Я никогда не знал что такое возможно в CSS! Удивительно.»

    Думая над тем, какую статью написать для блога в этот раз, я решил затронуть тему малоизвестных нюансов в CSS. Специально для вас )

    Но прежде, давайте я отвечу на самый популярный вопрос читателей: «Стоит ли изучать CSS».

    Мой ответ: «Конечно». Если у вас есть возможность, обязательно изучите CSS. При создании своего блога знание верстки мне очень пригодилось. Хотя сайт у меня на готовом движке )

    1. Границы в виде изображений

    Мало кто знает, что в качестве рамки в CSS можно использовать изображения. А те, кто знают, почему-то очень редко используют эту возможность.

    Как задается рамка в виде изображения? Просто: нужно воспользоваться свойством border-image . При помощи неё можно создавать поистине необычные границы элементов. Вот что я сделал на скорую руку:

    Изображение в роли рамки.

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

    2. Гибкая настройка border-radius

    Все мы знаем о свойстве border-radius , при помощи которой можно закруглять углы рамок. Однако, мало кому известно о возможности задавать значения закругления отдельно по оси X и Y.

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

    Обратите внимание, что через знак слэш указывается значение по горизонтали. Вот как это выглядит на практике:

    Невиданная гибкость в настройке углов границ

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

    3. Oblique и Italic — это не одно и то же!

    Многие веб-мастера не знают о том, что значение oblique и italic у свойства font-style — это не одно и то же. Значение italic использует специально отрисованные дизайнерами курсивное начертание шрифтов.

    В то время как значение oblique заставляет взять браузер обычное начертание шрифта и поменять его наклон для имитации курсива. Кто-то может возразить, сказав что на практике разница незаметна. Однако, это не так.

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

    Различие в отображении значений italic и oblique

    4. Значения свойства font-weight

    Все мы привыкли использовать для свойства font-weight значения наподобие normal и bold . Некоторые, более продвинутые знают о возможности использования числовых значений, таких как 400 , 500 , 700 и так далее.

    Ключевому слову normal эквивалентно числовое значение 400 , а bold — 700 . Однако, мало кто знает о существовании таких значений, как bolder и lighter .

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

    Таким образом, если родителю задан шрифт нормальной жирности (400), то для потомка должно быть применено тонкое начертание (300). Если такой в наличии нет, то ничего не поменяется и будет использовано нормальное начертание. Подобное же положение и со значением bolder .

    5. Толщину границы можно задавать ключевыми словами

    Рамка — это одна из наиболее часто используемых свойств декора. И все мы привыкли задавать ее толщину в пикселях.

    Однако, имеется пара ключевых слов, которые могут стать альтернативой привычному положению дел. Вот собственно и они: thin , medium и thick .

    Thin , как видно из названия, является тонкой версией границы. Medium — средней. А при помощи thick мы можем создать толстую границу. Вот как это выглядит на практике:

    На примере выше использовано ключевое слово thick , что означает толстый.

    6. Padding-top высчитывается от ширины контейнера, а не высоты

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

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

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

    7. Свойство color передается не только тексту

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

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

    Однако, самое интересное происходит тогда, когда я начинаю создавать на веб-странице списки с границами. Маркеры списков, их номера, а также рамки теперь отображаются оранжевым цветом.

    Но и это еще не все. При неудачной загрузке изображения содержимое атрибута alt теперь тоже стало оранжевого цвета.

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

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

    Если вам известны еще какие-то секреты CSS, о которых я не упомянул, буду рад увидеть их в комментариях.

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

    Топ-пост этого месяца:  Полезные советы как сделать удобную навигацию по сайту, и какие ее виды выбрать для своего
    Добавить комментарий