@frontend_school #статья #CSS
Малоизвестные причуды CSS: полезные советы и рекомендации
В этой статье вы найдете некоторые из самых странных функций CSS, а также советы и рекомендации CSS для продвинутых пользователей.
Малоизвестные причуды CSS: полезные советы и рекомендации
В этой статье вы найдете некоторые из самых странных функций CSS, а также советы и рекомендации CSS для продвинутых пользователей.
@frontend_school #статья #HTML #CSS
10 современных раскладок в одну строку CSS-кода
Современный CSS позволяет разработчикам писать по-настоящему содержательные и надёжные правила с помощью всего нескольких нажатий клавиш.
10 современных раскладок в одну строку CSS-кода
Современный CSS позволяет разработчикам писать по-настоящему содержательные и надёжные правила с помощью всего нескольких нажатий клавиш.
@frontend_school #статья #CSS
Псевдоэлементы, которых не может быть
В сегодняшней статье мы увидим псевдоэлементы в псевдоэлементах, псевдоэлементы с псевдоклассами и другие невозможные вещи, скрывающиеся от любопытных глаз в дебрях спецификаций.
Псевдоэлементы, которых не может быть
В сегодняшней статье мы увидим псевдоэлементы в псевдоэлементах, псевдоэлементы с псевдоклассами и другие невозможные вещи, скрывающиеся от любопытных глаз в дебрях спецификаций.
@frontend_school #статья #CSS
Вредные советы по CSS
Интернет полон различных туториалов и лайфхаков по работе с CSS. Это безусловно здорово, но что, если взглянуть на таблицы стилей с другой стороны? В этой статье вы найдете приёмы, благодаря которым сможете написать по-настоящему ужасный CSS для вашего сайта. И кто знает, может, это пойдёт вам на пользу!
Вредные советы по CSS
Интернет полон различных туториалов и лайфхаков по работе с CSS. Это безусловно здорово, но что, если взглянуть на таблицы стилей с другой стороны? В этой статье вы найдете приёмы, благодаря которым сможете написать по-настоящему ужасный CSS для вашего сайта. И кто знает, может, это пойдёт вам на пользу!
@frontend_school #статья #CSS
Чего я не знал о CSS, а стоило бы
«Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность.
Когда пришла пора CSS, мой подход к обучению не изменился. Но сейчас мне действительно жаль, что тогда я не уделил CSS должного внимания и упустил из виду столько принципиально важных вещей. Я расскажу о том, о чём мне следовало бы узнать раньше.»
Чего я не знал о CSS, а стоило бы
«Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность.
Когда пришла пора CSS, мой подход к обучению не изменился. Но сейчас мне действительно жаль, что тогда я не уделил CSS должного внимания и упустил из виду столько принципиально важных вещей. Я расскажу о том, о чём мне следовало бы узнать раньше.»
@frontend_school #навигация
Навигация на канале
Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:
#интересное - интересные проекты и заметки.
#статья - полезные статьи.
#викторина - ежедневные викторины.
#викторина_недели - еженедельные викторины с несколькими вопросами на время.
#задача - задачи на различные темы и по разным технологиям.
#ответ_на_задачу - способ решения ранее заданной задачи.
#туториал - туториалы и пошаговые инструкции применения различных технологий.
#видео - видео с лекциями и уроками.
#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.
#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.
#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.
Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.
Навигация на канале
Для более удобного взаимодействия с каналом мы сделали инструкцию по взаимодействию с рубриками и направлениями канала:
#интересное - интересные проекты и заметки.
#статья - полезные статьи.
#викторина - ежедневные викторины.
#викторина_недели - еженедельные викторины с несколькими вопросами на время.
#задача - задачи на различные темы и по разным технологиям.
#ответ_на_задачу - способ решения ранее заданной задачи.
#туториал - туториалы и пошаговые инструкции применения различных технологий.
#видео - видео с лекциями и уроками.
#юмор - смешные картинки и видео, связанные с веб-разработкой и программированием.
#полезное - полезные сервисы и статьи, которые помогут проще и быстрее освоить ту или иную технологию.
#HTML, #CSS, #JavaScript - дополнительные теги, уточняющие тематику публикации.
Также не забывайте про наш главный чат Frontend.school("Чат"), где можно пообщаться на тему фронтенд-разработки, а также задать свой вопрос и получить ответ.
@frontend_school #статья #CSS
10 полезных инструментов для создания роскошного CSS
Чтобы страница выглядела именно так, как задумано дизайнером, используют CSS. Но держать в голове все стили и их параметры сложно — их сотни. Чаще всего разработчик помнит самые ходовые и популярные, а за остальными обращается к справочникам и специальным программам-генераторам.
10 полезных инструментов для создания роскошного CSS
Чтобы страница выглядела именно так, как задумано дизайнером, используют CSS. Но держать в голове все стили и их параметры сложно — их сотни. Чаще всего разработчик помнит самые ходовые и популярные, а за остальными обращается к справочникам и специальным программам-генераторам.
@frontend_school #статья #HTML #CSS
Краш-тест вёрстки
Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.
Краш-тест вёрстки
Студенты делают страницу «чётко по макету». Ровно с теми же текстами, картинками и формами, что в дизайне. Это правильно. Есть дизайн, надо сверстать. Но по неопытности они часто не задумываются, что это всё-таки сайт, а не картинка. И что нужно сверстать так, чтобы можно было поменять текст. Или порядок полей в форме. Или добавить новые поля. Или удалить старые. Или даже собрать новую страницу из существующих блоков. И надо, чтобы сайт не развалился. В этой статье разбираются типичные ошибки новичков.
@frontend_school #статья #CSS
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
CSS-спрайты: что это, почему это полезно и как их использовать?
Термин «спрайт» пришёл из компьютерной графики и индустрии видеоигр. Идея была в том, что компьютер может создать изображение в памяти, а затем отображать только его часть, что гораздо быстрее чем создавать каждый раз новое изображение. CSS-спрайты имеют ту же идею: получить картинку один раз, отображать для каждого случая свою часть.
@frontend_school #статья #CSS
Вёрстка на Grid в CSS. Полное руководство и справочник
С появление CSS Flex, а также Grid верстать сайты стало гораздо проще. Многие "костыли" перестали быть необходимы, а адаптивность теперь стала простой как никогда раньше. Эта статья является подробным, а главное, понятным руководством по использованию CSS Grid.
Читать статью
Вёрстка на Grid в CSS. Полное руководство и справочник
С появление CSS Flex, а также Grid верстать сайты стало гораздо проще. Многие "костыли" перестали быть необходимы, а адаптивность теперь стала простой как никогда раньше. Эта статья является подробным, а главное, понятным руководством по использованию CSS Grid.
Читать статью
@frontend_school #статья #CSS
5 приемов CSS3 с псевдоэлементами ::before и ::after
Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.
Мы все знаем, что эти классы и элементы используются как часть CSS3. Данные псевдоэлементы были определены в CSS3.
В этой статье вы узнаете как можно использоваться эти псевдоэлементы.
Читать статью
5 приемов CSS3 с псевдоэлементами ::before и ::after
Большинство людей считает, что большой разницы между псевдоклассами и CSS active нет. Но одно различие между ними все-таки существует.
Мы все знаем, что эти классы и элементы используются как часть CSS3. Данные псевдоэлементы были определены в CSS3.
В этой статье вы узнаете как можно использоваться эти псевдоэлементы.
Читать статью
@frontend_school #видео #CSS
Видеокурс по CSS Flexbox
Чтобы лучше понять материал, его нужно увидеть.
В этом видеокурсе вы сможете разобраться в том, как пользоваться Flexbox, чем он отличается от Grid многое другое.
Смотреть видео
Видеокурс по CSS Flexbox
Чтобы лучше понять материал, его нужно увидеть.
В этом видеокурсе вы сможете разобраться в том, как пользоваться Flexbox, чем он отличается от Grid многое другое.
Смотреть видео
@frontend_school #статья #CSS
Режимы наложения в CSS
Автор этой статьи расскажет вам, как сделать ваш сайт нереально крутым, используя наложения в CSS. Здесь вы найдёте множество примеров и способов их реализации. Статья на английском, но всё понятно и так
Читать статью
Режимы наложения в CSS
Автор этой статьи расскажет вам, как сделать ваш сайт нереально крутым, используя наложения в CSS. Здесь вы найдёте множество примеров и способов их реализации. Статья на английском, но всё понятно и так
Читать статью
@frontend_school #статья #CSS
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Эта статья примечательна тем, что в ней все примеры выполнены в виде gif. Это позволяет более детально взглянуть на материал и лучше его усвоить.
Читать статью
Как работает CSS Flexbox: наглядное введение в систему компоновки элементов на веб-странице
Эта статья примечательна тем, что в ней все примеры выполнены в виде gif. Это позволяет более детально взглянуть на материал и лучше его усвоить.
Читать статью
@frontend_school #статья #CSS
Динамические размеры липкой боковой панели с HTML и CSS
Cоздание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте
Читать статью
Динамические размеры липкой боковой панели с HTML и CSS
Cоздание содержимого страницы, которое «прилипает» к области просмотра при прокрутке, что-то вроде меню перехода к привязке или заголовков разделов, никогда не было таким простым. Добавьте
position: sticky в набор правил CSS, установите смещение направления (например top: 0), и вы готовы произвести впечатление на своих товарищей по команде с минимальными усилиями.Читать статью
Иллюстрированная шпаргалка по Flexbox CSS
Сразу заметим, что статья на английском языке. Но! Текста там немного, по большей части там картинки с понятной визуализацией работы различных свойств Flexbox. А ещё они очень милые и легко запоминающиеся! Поэтому сохраняйте в закладки, чтобы всегда были под рукой.
Читать статью
@frontend_school #статья #CSS #en
Сразу заметим, что статья на английском языке. Но! Текста там немного, по большей части там картинки с понятной визуализацией работы различных свойств Flexbox. А ещё они очень милые и легко запоминающиеся! Поэтому сохраняйте в закладки, чтобы всегда были под рукой.
Читать статью
@frontend_school #статья #CSS #en
Что такое @font-face на самом деле
В этой статье вы узнаете, как правильно подключать локальные шрифты к вашему сайту. Статье небольшая, но крайне полезная!
Читать статью
@frontend_school #CSS
В этой статье вы узнаете, как правильно подключать локальные шрифты к вашему сайту. Статье небольшая, но крайне полезная!
Читать статью
@frontend_school #CSS
БЭМ — соглашение по именованию в CSS
Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.
В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.
Читать статью
@frontend_school #статья #CSS
Вообще, БЭМ — это аббревиатура, которая представляет собой сочетание слов «блок», «элемент» и «модификатор». Эта методология предполагает определённый порядок наименования компонентов и вы наверняка столкнётесь с ней при реальной работе.
В этой статье понятным языком объяснили, что же это такое и как правильно этим пользоваться.
Читать статью
@frontend_school #статья #CSS
CSS-переменные: о чем вам не говорят
CSS-переменные — отличная вещь, но всё ли вы о них знаете? В этой статье вы узнаете о некоторых особенностях CSS-переменных, о которых многие не говорят. После этого вы уже не сможете воспринимать их, как прежде, но при этом, возможно, найдёте им новое применение.
Читать статью
@frontend_school #статья #CSS
CSS-переменные — отличная вещь, но всё ли вы о них знаете? В этой статье вы узнаете о некоторых особенностях CSS-переменных, о которых многие не говорят. После этого вы уже не сможете воспринимать их, как прежде, но при этом, возможно, найдёте им новое применение.
Читать статью
@frontend_school #статья #CSS
Обработка текста поверх изображений в CSS
При вёрстке сайта часто возникает необходимость разместить текст поверх какого-то изображения. В таком случае текст может сливаться с частью изображения, если стили плохо прописаны. Чтобы сделать текст более читаемым, а общий вид привлекательным, существуют различные способы. Вот об этих способах вы узнаете в сегодняшней статье.
Читать статью
@frontend_school #статья #CSS
При вёрстке сайта часто возникает необходимость разместить текст поверх какого-то изображения. В таком случае текст может сливаться с частью изображения, если стили плохо прописаны. Чтобы сделать текст более читаемым, а общий вид привлекательным, существуют различные способы. Вот об этих способах вы узнаете в сегодняшней статье.
Читать статью
@frontend_school #статья #CSS
