Рубрика посвящена статьям про HTML и CSS. Различные наработки по этой теме, буду собирать сюда.
Просто кину примеры с codeopen, там в коде уже можно самим разобраться. Раз. Два. Три. В основном смысл в том, чтобы анимировать ширину блока, в котором находится текст, — от нуля до полного раскрытия блока. А в качестве курсора можно взять border-right. И для него сделать мигающую анимацию. В коде выше есть.
Всё работает, просто нужно понять концепцию html страницы. Постараюсь кратко. Смотрите. Давайте представим весь html документ, как государство, в котором действует один единственный закон. Закон порядка расположения граждан (элементов). Закон гласит — элементы на странице располагаются в той последовательности, в которой написаны в документе. И каждый следующий элемент будет располагаться поверх предыдущего. Вот и весь … Читать далее
Друзья, наткнулся на нереально крутой инструмент формирования временного стиля анимации css. https://cubic-bezier.com/ Всегда, когда натыкаешься на такие инструменты, аж улыбка появляется за креатив авторов таких фич. Пользуйтесь на здоровье!
Брейкпоинты Это всего лишь выбор самых популярных разрешений у всех устройств на рынке, только и всего. То есть их можно придумать самому и использовать в своей работе. Но есть более менее устоявшиеся значения. Бутстрап использует такие: 0 576px 768px 992px 1200px 1400px Когда-то я использовал такие: 320px 640px 960px 1280px 1920px Медиа-запросы Подробнее можно изучить … Читать далее
Онлайн инструмент для создания теней у блоков, скругления углов, выпуклости или вогнутости и т.д. https://neumorphism.io/ Пользуйтесь на здоровье!
Онлайн инструмент создания своей сетки css grid. https://grid.layoutit.com/ Пользуйтесь на здоровье.
Постараюсь сделать минимальную шпаргалку по css flexbox. upd. ага, фиг там, не получилось сделать кратенько. Статья структурирована таким образом, чтобы содержание статьи было максимально полезным в навигации. Полную документацию можно почитать на официальном ресурсе. Выделю главное, для общего понимания. Во всей этой flex-движухе есть всего два типа сущностей. Flex-контейнер — это основной родительский контейнер, внутри … Читать далее
Inherit есть практически у всех css-свойств. inherit — это значение, равное значению родительского свойства. Как бы принудительно связывает значение текущего свойства со значением родительского свойства. Благодаря нему повышается удобство в изменении кода, можно менять код только у родительского элемента, а дочерние будут меняться автоматически благодаря связи, созданной значением inherit. Разумеется, inherit нужен тогда, когда свойство … Читать далее
Не все свойства одинаково полезны. Наследование свойств CSS — это когда значение определенного свойства родительского элемента распространяется на его дочерние. Но тут-то и подвох, потому что не все свойства являются наследуемыми. Большая ошибка думать, что если родительскому элементу присвоил какое-то свойство, то оно будет работать и для всех вложенных (дочерних) элементов. Все свойства делятся на … Читать далее