Эффект печатающегося текста в CSS

Просто кину примеры с codeopen, там в коде уже можно самим разобраться. Раз. Два. Три. В основном смысл в том, чтобы анимировать ширину блока, в котором находится текст, — от нуля до полного раскрытия блока. А в качестве курсора можно взять border-right. И для него сделать мигающую анимацию. В коде выше есть.

Не работает Z-index в CSS. Концептуальное понимание

Всё работает, просто нужно понять концепцию html страницы. Постараюсь кратко. Смотрите. Давайте представим весь html документ, как государство, в котором действует один единственный закон. Закон порядка расположения граждан (элементов). Закон гласит — элементы на странице располагаются в той последовательности, в которой написаны в документе. И каждый следующий элемент будет располагаться поверх предыдущего. Вот и весь … Читать далее

Cubic-bezier.com. Конструктор временной анимации в CSS

Друзья, наткнулся на нереально крутой инструмент формирования временного стиля анимации css. https://cubic-bezier.com/ Всегда, когда натыкаешься на такие инструменты, аж улыбка появляется за креатив авторов таких фич. Пользуйтесь на здоровье!

Медиа-запросы и брейкпоинты для адаптивной верстки

Брейкпоинты Это всего лишь выбор самых популярных разрешений у всех устройств на рынке, только и всего. То есть их можно придумать самому и использовать в своей работе. Но есть более менее устоявшиеся значения. Бутстрап использует такие: 0 576px 768px 992px 1200px 1400px Когда-то я использовал такие: 320px 640px 960px 1280px 1920px Медиа-запросы Подробнее можно изучить … Читать далее

Flexbox CSS

Постараюсь сделать минимальную шпаргалку по css flexbox. upd. ага, фиг там, не получилось сделать кратенько. Статья структурирована таким образом, чтобы содержание статьи  было максимально полезным в навигации. Полную документацию можно почитать на официальном ресурсе. Выделю главное, для общего понимания. Во всей этой flex-движухе есть всего два типа сущностей. Flex-контейнер — это основной родительский контейнер, внутри … Читать далее

Inherit в CSS. Простое, но не всегда понятное

Inherit есть практически у всех css-свойств. inherit — это значение, равное значению родительского свойства.  Как бы принудительно связывает значение текущего свойства со значением родительского свойства. Благодаря нему повышается удобство в изменении кода, можно менять код только у родительского элемента, а дочерние будут меняться автоматически благодаря связи, созданной значением inherit. Разумеется, inherit нужен тогда, когда свойство … Читать далее

Как понять наследование свойств в CSS?

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