css- все статьи тега


Медиа-запросы CSS: точки останова, типы устройств, стандартные разрешения и многое другое

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

Псевдоклассы CSS, на которые стоит обратить внимание

Согласно определению из «CSS: The Definitive Guide» Эрика Майера (Eric Meyer) и Эстеля Вейля (Estelle Weyl): С помощью (псевдо) селекторов можно назначать стили так называемым фантомным классам, которые определяются состоянием определенных элементов, шаблонами разметки в документе или даже состоянием самого документа. В этой статье мы оз...

Точки останова CSS в Material UI

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

Как с помощью чистого CSS создать красивую анимацию загрузки для приложения

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

Что такое Tailwind CSS и как внедрить его на сайт или в React-приложение?

CSS может стать вашим лучшим другом или злейшим врагом. Несмотря на то, что он невероятно гибкий, а результаты его применения порой кажутся магией, без должного внимания он может выйти из-под контроля, как и любой другой код. Как же Taiwind CSS помогает в управлении стилями? Что такое Tailwind? Tailwind CSS — это “utility-first” (“полезность прежд...

Чего я не знал о CSS, а стоило бы

Делать сайты я учился по-старомодному: открывал исходный код и пытался повторить то, что видел. А по тому, чего не видел (PHP/MySQL), прочёл какую-то случайно попавшуюся книгу. Так всё и шло. Это было в 1999 году, когда можно было писать что-то вроде <font size=”4" color=”#000000">, а DHTML приобретал популярность. Когда пришла пора CSS, мой...

Ускорьте создание пиксельной графики в 10 раз ✨💫

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

Динамическое масштабирование элементов в CSS

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

Липкий блок

http://postovoy.net/jquery-plagin-fiksiruyuschegosya-lipkogo-bloka.html...

Макеты на основе Rem, масштабирование в chrome несовместимо, PX против REM

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

Две колонки flex-box макет

Мне нужно создать макет, который будет содержать список элементов в двух столбцах. Как я показал ниже: .container { border: 1px solid red; height: 300px; display: flex; flex-direction: column; justify-content: flex-start; flex-wrap: wrap; } .item { border: 1px dashed blue; height: 50px; } <div class="container"> <div class="item">1</div> <div class="item">2</div> <div class="item">3</div> <div class="i ...

Border-Radius для DIV элемента не работает в IE8

The -moz-border-radius:10px; -webkit-border-radius:10px; свойства элемента DIV не работают в IE8, но это прекрасно работает в Firefox и google chrome. Пожалуйста, предоставьте мне, если у вас есть какое-либо решение по этому вопросу. ...

Div бок о бок

Итак, я пытался поставить div рядом здесь, но у меня закончились варианты. <div id='body'> <div id='header'> </div> <div id='container'> <div id='navigation'></div> <div id='content'> <div id='shoutout-box'></div> </div> </div> </div> Я хочу, чтобы заголовок охватывал всю ширину браузера, в то время как контейнер должен отображаться под заголовком. Навигация должна идти параллельно с контентом ...

Размытие за всплывающим окном при загрузке страницы проблема

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

Настройка атрибутов стиля CSS с помощью thymeleaf

Как задать свойство background тега стиля с разрешенным url-адресом thymeleaf. У меня есть <div style="background:url('<url-to-image>')"></div> Есть ли эквивалент <img th:src="${@/<path-to-image>}"> для установки атрибутов стиля в thymeleaf. ...

Bootstrap col-md-offset - * не работает

Я пытаюсь добавить класс Bootstrap offset в свой код для достижения выравнивания по диагонали следующим образом: Но я не знаю, какое смещение мне следует использовать. Я пробовал пару смещений, чтобы достичь этого, но безрезультатно.Текст покрывает весь джамботрон.Вот мой код Html: <div class="jumbotron"> <div class="container"> <div class="row"> <div> <h2 class="col-md-4 col-md-offset-4">Browse.</h2 ...

Создание треугольника в css с градиентным фоном

Я пытаюсь создать треугольник в css с градиентным фоном. У меня пока не было никакого успеха. Есть ли способ сделать это, чтобы вызвать этот эффект, видимый на изображении ниже. (Треугольник, прикрепленный к неправильному окну ошибки пароля.) Дизайн в Photoshop Это дизайн, который у меня есть до сих пор в HTML и CSS. Вот css, который у меня есть для треугольника на данный момент. .error-triangle { wwidth: 0; height: 0; border-top: 10px solid transparent; border-botto ...

CSS Media Query и Javascript/jQuery не совпадают

В моем CSS у меня есть медиа-запрос, такой как: @media (min-width: 800px) { /* styles */ } А затем в моем jQuery я нацеливаюсь на ширину окна и выполняю некоторые действия. Edit: согласно ответам ниже, я изменил эту функцию, но мои JS и CSS все еще не выровнялись. Проблема была исправлена с помощью функции Modernizr, как указано в принятом ответе. $(window).resize(function() { var viewportWidth = $(window).width(); if (viewportWidth >= 800) { // do something } }); ...

CSS3 эффект перехода с onclick

Я работаю над CSS3 и как бы застрял на одной проблеме. Проблема заключается в следующем: У меня есть изображение, которое изначально находится в левой части экрана: .box img{ margin-left:0; -webkit-transition:1s; } Теперь, при наведении, когда я хочу, чтобы эффект имел место, т. е. переместите изображение 500px слева, когда я наведу курсор на изображение, следующий код: .box img:hover{ margin-left:500px; -webkit-transition:1s; } Это работает просто идеально. Единственная проблема за ...

Как удалить CSS-класс из ячейки jqGrid?

Можно добавить класс CSS в ячейку jqGrid, используя метод setCell, как показано ниже. grid.setCell(rowId, "ColumnName", "", "my-style-class"); Учитывая, что этот метод, по-видимому, способен только добавлять CSS-классы, как можно удалить CSS-класс из ячейки jqGrid? ...