Привет! Меня зовут Оля и я расскажу о том, как мы при помощи гибкой вёрстки настроили отображение контента на широких экранах.
Эта статья будет полезна разработчикам веб-сайтов и послужит примером использования CSS при разработке адаптивности сайта для экранов свыше 1921 пикселей.
CSS @scope.
Правило @scope at-rule позволяет разработчикам распространять правила стилей на заданный корень описания и стилизовать элементы в соответствии с близостью к этому корню.
С помощью @scope можно отменять стили, основанные на близости, что отличается от обычных стилей CSS, которые применяются только на основе порядка и специфики источника. В следующем примере имеется две темы.
Здравствуйте, меня зовут Дмитрий Карловский, и меня хлебом не корми, а дай поиздеваться над хайповыми технологиями. И сейчас я расскажу вам, как я провёл лето.
В этом сезоне ко мне на операционный стол попались разные JS, CSS и тест фреймворки да методологии, менеджеры состояний и потоков исполнения, коллекции виджетов и даже приложений. Приготовьтесь, далее вас ждёт целых 32 часа отборного кринжа!
Sass (Syntactically Awesome Style Sheets) — это скриптовый язык, используемый для создания каскадных таблиц стилей (CSS-файлов). Его синтаксис очень похож на обычный CSS, но вдобавок он поддерживает использование переменных, вложенность, миксины и наследование для селекторов, чего очень не хватает в базовом CSS, ведь эти фичи незаменимы в организации и поддержке стилей вашего веб-приложения. В этой статье я продемонстрирую вам шаги, необходимые для добавления и настройки Sass в вашем ASP.NET Core проекте как в Visual Studio, так и в VS Code.
Sass — это инструмент для повышения производительности, который помогает вам выстраивать и поддерживать таблицы стилей. Среди основных его преимуществ можно выделить следующее:
Я не могу сдержать своего волнения, когда пишу первые несколько слов этой статьи. Дамы и господа, контейнерные CSS-запросы наконец-то здесь! Да, вы правильно поняли. В настоящее время они поддерживаются в Google Chrome (105), а вскоре будут и в Safari 16. Это огромный этап в веб-разработке. Для меня это нечто, что меняет правила игры - как первое появление медиа-запроов, с помощью которых мы начали строить адаптивные сайты. Контейнерные запросы не менее важны (по крайней мере, так кажется мне).
К старту курса по Fullstack-разработке на Python делимся лонгридом от ведущего программиста компании THG. Специалистам материал будет полезен в подготовке к собеседованиям, а новичкам поможет получить целостное представление о том, что происходит у браузера под капотом.
Вы когда-нибудь задумывались о селекторе CSS, где вы проверяете, существует ли конкретный элемент внутри родителя? Например, если у компонента карты есть миниатюра, нам нужно добавить к нему display: flex. Это было невозможно в CSS, но теперь у нас будет новый селектор CSS :has, который поможет нам выбрать родителя определенного элемента и многое другое.
В этой статье я объясню проблему, которую решает :has, как он работает, где и как мы можем его использовать с некоторыми вариантами использования и примерами, и, самое главное, как мы можем использовать его уже сегодня.
Необычная анимация делает сайт интересным для изучения и наблюдения за ним. Пользователям нравятся стильные, гармоничные решения. Анимация позволяет разнообразить контент, оживить его.
Когда-нибудь наводили мышку или кликали на элемент, чтобы посмотреть на его преображение ещё раз? Для достижения такого "вау-эффекта" нужна оригинальная анимация. В сети есть целые страницы, наполненные примерами анимация для кнопок.
Другой пример для полёта фантазии, появление элементов на странице. Тут нам может пригодиться каскадная анимация. Можно конечно явить миру все элементы разом, это просто и вместе с тем скучно. Появление группы элементов друг за другом, смотрится гармонично и интересно. В качестве основы для появления элемента, можно использовать изменение прозрачности от 0 до 1, увеличение или уменьшение элемента, а также линейное движение в плоскости экрана.
В процессе изучения некоторых супер-способностей CSS, моё внимание привлекли вариативные шрифты. В этой статье я покажу как их можно использовать для анимации начертания шрифта и дам краткий обзор последних дополнений CSS.
В рамках серии материалов GUI Challange, в данной статье Адам Аргайл демонстрирует один из способов создания очень маленького, но трудоёмкого компонента переключателя toggle с учётом цветовой схемы и предпочтений пользователя.
Уже послезавтра, 14 мая, стартует новый поток курса Python для веб-разработки, поэтому мы решили поделиться переводом о не совсем очевидной, но интересной области разработки сайтов — анимации анимации. Автор не просто даёт готовый рецепт, но шаг за шагом показывает, как сделать анимацию прокрутки плавной и приятной. Эта статья больше о концепции, которая поможет вам по-другому взглянуть на вашу анимацию. Так случилось, что этот конкретный пример демонстрирует бесконечную прокрутку, в частности, «идеальную» бесконечную прокрутку колоды карт без дублирования какой-то из них.
Как фронтенд-дизайнер я за последние 6 лет не был так взволнован новой CSS-функцией, как сейчас. Благодаря усилиям Мириам Сюзанны и других умных людей прототип контейнерных запросов можно включить в Chrome Canary
О контейнерных запросах запомнилось много шуток, но они, наконец, здесь. Специально к старту нового потока курса по Frontend разработке, делимся с вами статьей, в которой рассказывается зачем нам нужны контейнерные запросы, как они облегчат нашу жизнь, и, самое важное, ваши компоненты и макеты станут мощнее. Если вы взволновались так же, как и я, давайте углубимся в тему. Вы готовы?
Поддержка логических свойств CSS со временем становится лучше. Однако мне по-прежнему трудно запомнить их, когда использую их в проекте. Что означают start и end? Несколько сложно охватить все детали без проб и ошибок.
В этой статье я нацелен прокачать вас и пробежаться по использованию логических свойств, чтобы возникло твёрдое понимание, у дизайнеров, говорящих на английском и арабском языках. Я попытался придумать визуальное объяснение логических свойств, которое, надеюсь, будет понятным. Готовы? Погружаемся!
После очередного увиденного:
font-weight: normal;
font-family: BrutalType-Bold, sans-serif;
я понял, что что-то не так в датском королевстве. Давайте попробуем разобраться, что такое @font-face на самом деле.
<body>
<div class="row">
<div class="row__item header">
<h1>Header</h1>
</div>
<div class="row__item nav">
<h1>Navbar</h1>
</div>
<div class="row__item article">
<h1>Article</h1>
</div>
<div class="row__item ads">
<h1>Ads</h1>
</div>
</div>
</body>.row {
display: grid;
margin: auto;
grid-template-rows: 60px 1fr ;
grid-template-columns: 20% 1fr 15%;
grid-gap: 10px;
width: 1000px;
height: 1000px;
justify-items: center;
justify-content: space-between;
grid-template-areas:
"header header header"
"nav article ads";
}grid-row определяет с какой строки в макете сетки будет начинаться элемент, сколько строк будет занимать элемент, или на какой строке завершится элемент в макете сетки. Является сокращенным свойством для свойств grid-row-start и grid-row-end.grid-gap является сокращенным свойством для grid-row-gap и grid-column-gap, определяющего желоба между строками и столбцами сетки.grid-template-areas определяет шаблон сетки ссылаясь на имена областей, которые заданы с помощью свойства grid-area.grid-area мы можем назначить каждой из этих областей свое собственное имя. Именование областей еще не создает никакого макета, однако теперь у нас есть именованные области, которые мы можем в нем использовать.
Очевидно, я бы не стал писать эту статью, если бы считал, что TailwindCSS – просто очередной фреймворк. Я считаю, что он кардинально отличается от всех других фреймворков и создает отдельную парадигму web-стилизации. И при этом выполняет все поставленные перед ним задачи, делая это лучше и удобнее других.
Тех, кто еще не знаком с TailwindCSS, я постараюсь завербовать в ряды его поклонников. Тех, кто против него, я постараюсь заставить в этом усомниться и пересмотреть своё мнение.
Я также хотел узнать ваше мнение по этому поводу. TailwindCSS – это шаг вперед, назад или просто топтание на месте? Свой ответ вы можете оставить в опросе в конце статьи. А если вам есть, что добавить по теме, пожалуйста, сделайте это в комментариях.
