CSS Peeper — это расширение для браузера, которое позволяет разработчикам быстро и удобно анализировать CSS-стили на веб-страницах. Оно предоставляет информацию о стилях элементов, таких как цвета, шрифты и размеры, прямо в интерфейсе браузера. Расширение упрощает процесс копирования стилей и их применения в других проектах, что делает его полезным инструментом для веб-дизайнеров и разработчиков.
Made in HTML/CSS
Made in HTML/CSS
🔥9
Чтобы скрыть DOM-элемент на веб-странице, вы можете использовать встроенный HTML-атрибут hidden.
Этот атрибут делает элемент невидимым, аналогично стилю display: none, при этом элемент не занимает место на странице.
Важно отметить, что атрибут hidden не удаляет элемент из DOM, он лишь отключает его видимость, что может повлиять на доступность для вспомогательных технологий.
Made in HTML/CSS
Этот атрибут делает элемент невидимым, аналогично стилю display: none, при этом элемент не занимает место на странице.
Однако атрибут hidden не работает с псевдоэлементами, такими как ::before и ::after, поскольку они не являются частью DOM. В таком случае для скрытия псевдоэлементов следует использовать CSS-свойства.
Важно отметить, что атрибут hidden не удаляет элемент из DOM, он лишь отключает его видимость, что может повлиять на доступность для вспомогательных технологий.
Made in HTML/CSS
👍7🔥3👨💻1
CSS ПРЯМО В ТЕГАХ
Tailwind CSS — это прикладной CSS-фреймворк, который позволяет разработчикам создавать пользовательский интерфейс, используя утилиты для стилей вместо создания собственных классов.
Он предоставляет набор классов с низким уровнем абстракции, которые можно комбинировать в HTML-коде для стилизации элементов.
Made in HTML/CSS
Tailwind CSS — это прикладной CSS-фреймворк, который позволяет разработчикам создавать пользовательский интерфейс, используя утилиты для стилей вместо создания собственных классов.
Он предоставляет набор классов с низким уровнем абстракции, которые можно комбинировать в HTML-коде для стилизации элементов.
Made in HTML/CSS
🔥12👍1
В JavaScript для объявления переменных используются ключевые слова var, let и const.
- var: Имеет функциональную область видимости и может быть переназначена в любом месте функции.
- let: Имеет блочную область видимости и может быть переназначена, но не может быть повторно объявлена в той же области.
- const: Также имеет блочную область видимости, но не может быть переназначена после инициализации.
Используйте let для изменяемых переменных и const для констант. var используется реже, в основном для поддержки старого кода.
Made in HTML/CSS
- var: Имеет функциональную область видимости и может быть переназначена в любом месте функции.
- let: Имеет блочную область видимости и может быть переназначена, но не может быть повторно объявлена в той же области.
- const: Также имеет блочную область видимости, но не может быть переназначена после инициализации.
Используйте let для изменяемых переменных и const для констант. var используется реже, в основном для поддержки старого кода.
Made in HTML/CSS
🔥8👍1
Шестнадцатеричный (hex) формат цветов
В этом формате цвета последовательность компонентов цветов определяется в следующем порядке:
Эта последовательность обозначается как
где RR представляет собой значение красного компонента, GG — зеленого, а BB — синего.
Каждый компонент имеет значение в диапазоне от 00 до FF в шестнадцатеричном формате, что соответствует десятичным значениям от 0 до 255. Это означает, что каждый цвет может иметь различные степени яркости в зависимости от приведенных выше значений.
Эта модель RGB (Red, Green, Blue) является основой для большинства цифровых цветов и широко используется в веб-дизайне и графике.
Made in HTML/CSS
В этом формате цвета последовательность компонентов цветов определяется в следующем порядке:
сначала идет красный (Red), затем зеленый (Green) и, наконец, синий (Blue).
Эта последовательность обозначается как
#RRGGBB
где RR представляет собой значение красного компонента, GG — зеленого, а BB — синего.
Каждый компонент имеет значение в диапазоне от 00 до FF в шестнадцатеричном формате, что соответствует десятичным значениям от 0 до 255. Это означает, что каждый цвет может иметь различные степени яркости в зависимости от приведенных выше значений.
Эта модель RGB (Red, Green, Blue) является основой для большинства цифровых цветов и широко используется в веб-дизайне и графике.
Made in HTML/CSS
👍8🔥2
Свойство inset в CSS — это короткая замена для top, right, bottom и left. Оно позволяет быстро задать отступы элемента от всех сторон контейнера одним значением.
Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Made in HTML/CSS
Представьте, что вы расставляете мебель в комнате: вместо того чтобы говорить "отодвинь диван на 10 см от каждой стены", вы просто говорите "отодвинь диван на 10 см от всех стен". Вот так работает inset! 😊
Однако не забывайте, что inset – это логическое свойство, оно учитывает направление письма. То есть если на вашем сайте используется язык с направлением rtl, то лево окажется справа и наоборот.
Made in HTML/CSS
🔥4👍3👨💻1
Вопрос, который поставит в ступор даже опытного фронтендера🫣
Этот хороший вопрос мне задал один программист из Болгарии🇧🇬. На первый взгляд, он довольно очевиден, но не все так просто.
Ответ на этот вопрос:
Made in HTML/CSS
Этот хороший вопрос мне задал один программист из Болгарии🇧🇬. На первый взгляд, он довольно очевиден, но не все так просто.
Ответ на этот вопрос:
Да, если мы поставим элементу position со значением absolute и добавим смещение top: 20px, то скорее всего он окажется в 20px от верха окна браузера. Однако это будет в случае, если все его родительские элементы находятся в позиции static. То есть перед этим элемент посмотрит, есть ли у него родитель с другой позицией, далее рассмотрится родитель родителя и тд, пока не найдется родитель с позицией отличной он static.
Made in HTML/CSS
👍5🔥2👨💻1
Анимация спиннер загрузки через CSS🌀
Креативный способ анимировать загрузку с изменением цветов на каждом цикле оборота🔄
Svgшка круга
Made in HTML/CSS
Креативный способ анимировать загрузку с изменением цветов на каждом цикле оборота🔄
Svgшка круга
<noscript
class="spinner"
width="65px"
height="65px"
viewBox="0 0 66 66"
xmlns="http://www.w3.org/2000/noscript"
>
<circle
class="path"
fill="none"
stroke-width="6"
stroke-linecap="round"
cx="33"
cy="33"
r="30"
></circle>
</noscript>
Made in HTML/CSS
🔥8👍1👨💻1
В данной статье рассматриваются различные методы затемнения изображений, которые используются в качестве фонового рисунка с помощью свойства background или внутри HTML-тега <img>.
🌐 Читать статью
Made in HTML/CSS
🌐 Читать статью
Made in HTML/CSS
👍6🔥2
Стилизация полосы прокрутки
Лаконичный и в то же время стильный вариант скроллбара в CSS с использованием градиентной переливки из лазурного в темно-синий + теней для фона полосы.
Made in HTML/CSS
Лаконичный и в то же время стильный вариант скроллбара в CSS с использованием градиентной переливки из лазурного в темно-синий + теней для фона полосы.
Made in HTML/CSS
🔥6
Font Tester - расширение, позволяющее легко тестировать и просматривать более 1000 шрифтов Google на любом веб-сайте, что делает эксперименты с типографикой простыми и удобными. С помощью нескольких кликов вы можете настроить толщину шрифта, высоту строки, применить курсив и многое другое. Плагин также предоставляет возможность копировать необходимый код для выбранных шрифтов.
Made in HTML/CSS
Made in HTML/CSS
👍2🔥2
Данный метод запрещает пользователю вставлять скопированный текст в поле ввода, отслеживая событие paste и вызывая метод preventDefault().
Made in HTML/CSS
Таким образом, пользователь будет вынужден вводить текст вручную, что может быть полезно в ситуациях, когда требуется уникальный ввод данных или предотвращение автоматического заполнения.
Made in HTML/CSS
👍6🔥1
VS Faker — это инструмент, который позволяет генерировать фейковые данные для различных целей, таких как тестирование, разработка и демонстрация. Он основан на библиотеке Faker, которая предоставляет широкий набор возможностей для создания реалистичных, но вымышленных данных. Она позволяет генерировать случайные данные, такие как имена, адреса, номера телефонов, электронные адреса и многое другое.
Made in HTML/CSS
Made in HTML/CSS
🔥5
В CSS свойство !important используется для придания приоритета стилю, чтобы он переопределял другие стили, которые могут быть применены к тому же элементу.
Это полезно, когда нужно убедиться, что определенный стиль будет применен, независимо от других стилей, которые могут быть определены в других местах.
Made in HTML/CSS
Это полезно, когда нужно убедиться, что определенный стиль будет применен, независимо от других стилей, которые могут быть определены в других местах.
В нашем примере, несмотря на то, что оба стиля применяются к одному и тому же классу, стиль с !important будет иметь приоритет. Таким образом, текст кнопки будет красным, а не синим.
Made in HTML/CSS
🔥4
7 портфолио фронтендеров, которые вдохновляют.
В этой статье демонстрируются работы фронтенд-разработчиков, отражающих их подходы к проектам. Портфолио служит дополнением к резюме, предоставляя работодателю или клиенту более глубокое понимание умений и опыта автора.
🌐 Читать статью
Made in HTML/CSS
Для фронтенд-разработчика портфолио — это витрина его навыков, стиля и подхода к работе. Без хорошего портфолио трудно выделиться среди кандидатов, которые сотнями присылают отклики на действительно крутые вакансии.
В этой статье демонстрируются работы фронтенд-разработчиков, отражающих их подходы к проектам. Портфолио служит дополнением к резюме, предоставляя работодателю или клиенту более глубокое понимание умений и опыта автора.
🌐 Читать статью
Made in HTML/CSS
👍4🔥1
Стиль clip-path
Одна из интересных функций CSS — это свойство clip-path, которое позволяет изменять форму элементов, создавая нестандартные фигуры. С его помощью можно вырезать определенные области из элемента, придавая ему оригинальный вид.
С помощью clip-path можно создать треугольники, многоугольники и даже более сложные формы, что придаёт дизайну уникальность.
Made in HTML/CSS
Одна из интересных функций CSS — это свойство clip-path, которое позволяет изменять форму элементов, создавая нестандартные фигуры. С его помощью можно вырезать определенные области из элемента, придавая ему оригинальный вид.
С помощью clip-path можно создать треугольники, многоугольники и даже более сложные формы, что придаёт дизайну уникальность.
Made in HTML/CSS
👍8
Mobile simulator проверяет адаптивность фронтенда на различных устройствах. Расширение обеспечивает симуляцию множества устройств Android и iPhone, и позволяет увидеть ваш сайт именно так, как он будет выглядеть на реальном гаджете.
Made in HTML/CSS
Made in HTML/CSS
👨💻4👍3🔥2
cursor: url — это магическое свойство CSS, которое позволяет превратить обычный курсор в уникальное изображение.
Когда пользователь наводит мышь на элемент, курсор оживает, отображая ваше кастомное изображение и создавая неповторимый визуальный эффект.
Made in HTML/CSS
Когда пользователь наводит мышь на элемент, курсор оживает, отображая ваше кастомное изображение и создавая неповторимый визуальный эффект.
Это отличный способ добавить креативности и интерактивности вашему веб-дизайну, делая взаимодействие с сайтом более запоминающимся и приятным.
Made in HTML/CSS
👍10🔥2
text-transform — это удобное свойство CSS, которое позволяет быстро изменять регистр текста на вашей веб-странице.
С его помощью можно легко преобразовать текст в заголовках или абзацах, делая его полностью прописным, строчным или с заглавной первой буквой каждого слова.
Это отличный способ придать тексту единообразие и профессиональный вид, улучшая его читабельность и восприятие.
Made in HTML/CSS
С его помощью можно легко преобразовать текст в заголовках или абзацах, делая его полностью прописным, строчным или с заглавной первой буквой каждого слова.
Made in HTML/CSS
👍5🔥2
Примеры, представленные в статье, предлагают разнообразные способы ограничения ввода символов в текстовое поле, что может быть полезно для улучшения пользовательского интерфейса и повышения качества вводимых данных.
🌐 Читать статью
Made in HTML/CSS
Например, вы можете установить ограничение на максимальное количество символов, которые пользователь может ввести, что особенно полезно для полей с ограниченной длиной, таких как поля для ввода имени или пароля. Кроме того, можно запретить ввод чисел или определенных специальных символов, чтобы предотвратить ошибки ввода и обеспечить корректность данных. Также возможно настроить текстовое поле так, чтобы оно принимало только символы кириллицы или латиницы, что может быть полезно для локализации приложений или сайтов, адаптируя их под конкретные языковые требования пользователей.
🌐 Читать статью
Made in HTML/CSS
🔥5