HTML/CSS

Elvira

5 лет назад

#

Эффективное создание компонентов с помощью styled system

Для стилизации react компонентов наша команда использует
styled-components.

О styled-components уже есть статьи на Хабре, поэтому подробно останавливаться на этом не будем.

Знакомство с Styled components

Лучше, быстрее, мощнее: styled-components v4

Написав много компонентов мы обнаружили, что почти в каждом компоненте мы копируем повторяющиеся свойства.

Источник

Kirol

5 лет назад

#

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Узнайте, как использовать мощный примитив SVG-фильтра feTurbulence для создания собственных текстур и эффектов искажений.

Предлагаемая серия статей "Эффекты фильтрации SVG" Sara Soueidan, внештатного разработчика UI/UX интерфейса и автора многих технических статей, проживающей в Ливане, посвящена работе фильтров SVG и состоит из следующих статей:

Эффекты фильтрации SVG

Эффекты фильтрации SVG. Часть 1. SVG фильтры 101

Эффекты фильтрации SVG. Часть 2. Контурный текст при помощи feMorphology

Эффекты фильтрации SVG. Часть 3. Эффект постеризации изображения при помощи feComponentTransfer

Эффекты фильтрации SVG. Часть 4. Двухцветные изображения при помощи feComponentTransfer.

Эффекты фильтрации SVG. Часть 5. Соответствие текста текстуре поверхности при помощи feDisplacementMap

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Источник

Kirol

5 лет назад

#

Дайджест свежих материалов из мира фронтенда за последнюю неделю №353 (17 — 24 февраля 2019)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Mikasa

5 лет назад

#

Полупрозрачный фон

Я хотел бы показать как быстро сделать полупрозрачный фон. Если в CSS использовать команду opacity, то фон конечно же станет прозрачным, но вместе с ним также и всё остальное что на нём находится.

Как же исправить эту проблему? Я порылся в Интернете и нашёл замечательный способ, о котором я вам сейчас и поведаю.

Допустим, это ваш сайт (html):

<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" href="style.css">
		<title>
			Полупрозрачный фон
		</title>
	</head>
		<body>
			<div class="mid">
				<p>Ваш текст</p>
				Ваш текст. Ваш текст.
			</div>
		</body>
</html>

Строчка "" подключает файл стилей CSS.

Источник

IvanNik

5 лет назад

#

Дайджест свежих материалов из мира фронтенда за последнюю неделю №349 (21 — 27 января 2019)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Den

5 лет назад

#

Как CSS специфичность работает в браузере

Многие считают CSS сложным. Они придумывают разные оправдания: не хватает способностей понимать CSS или CSS сам по себе плох. Но реальность такова, что люди просто не нашли время, чтобы действительно изучить его. Если вы читаете эту статью, значит заинтересованы в изучении CSS и это здорово!

Что такое CSS специфичность?

Вы когда-нибудь писали стиль, а он не работает, потом вы добавляете
!important (или нет), и все же он не работает? Затем вы смотрите на Devtools и понимаете, что другой стиль где-то перекрывает ваш?

В этом и заключается специфичность CSS! Именно так браузер выбирает, какой из конкурирующих селекторов применить к элементу. Когда браузер видит, что два или более селектора совпадают с одним и тем же элементом, и у селекторов есть конфликтующие правила, ему нужен способ выяснить, какое из правил применить к этому элементу. То, как это происходит, называется «значение специфичности CSS».

Прежде чем мы углубимся в CSS специфичность, запомните эти вещи:

Источник

IvanNik

5 лет назад

#

Thimble (Mozilla) переезжает на Glitch

С середины декабря 2018 года на сайте проекта Thimble от Mozilla появилось объявление о переезде на платформу проекта Glitch. Переезд должен полностью состояться до 16 декабря 2019 года.

Обе платформы уже обсуждались на Хабре. Статьи о Thimble – статья 1, статья 2. Статья о Glitch.

Источник

Kirol

5 лет назад

#

Дайджест свежих материалов из мира фронтенда за последнюю неделю №348 (14 — 20 января 2019)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Mikasa

5 лет назад

#

Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления) Часть 1

Эта статья будет интересна, кто столкнулся с разного рода проблемами после обновления Google PageSpeed и претензиям со стороны заказчиков или начальника, почему упал бал или возникло такое количество замечаний. А так же тем, кто производит оптимизацию сайтов.

В первую очередь стоит упомянуть, что вот
в этой статье, на мой взгляд, всё очень грамотно и доступно расписано.

Я же от себя добавлю больше
практических советов, а так же будет интересно послушать вашу точку зрения и увидеть ваши наработки.

Источник

Den

5 лет назад

#

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

Введение

В рамках своего проекта я столкнулся с задачей сделать текущий сайт компании мультиязычным. Более точно: создать возможность быстро и просто перевести сайт на английский, польский, итальянский и т.д.

Поиск в интернете показал, что существующие варианты создания мультиязычного сайта крайне громоздки и неэффективны. Подключать сторонние библиотеки зачастую проблемно, а советы по написанию своего решения связаны с большим объёмом однотипной работы.

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

Исходные файлы примера сайта с автоматическим переводом можно скачать
на github

Источник

Elvira

5 лет назад

#

Элементарный Canvas

Если вы изучаете веб совсем недавно, но уже успели увидеть различные красивые эффекты на сайте, по типу системы частиц или какие либо игры разработанные на canvas'e и вас это заинтриговало, но изучать что-то новое очень страшно, то я вам готов продемонстрировать, как за 50 строк js кода можно сделать что-то интересное на canvas'e.

Скажу сразу, я хочу объяснить логику работы с canvas'ом. Код очень простой, я надеюсь, это подтолкнет вас к изучению такого инструментария как canvas. А так же это очень хорошая практика для начинающего JS программиста.

Перейдем к коду. Напишем простую генерацию квадратов разного цвета на полотне. Код вы можете увидеть сразу весь, далее я объясню его.

Что нам нужно сделать?

Источник

Mikasa

5 лет назад

#

Дайджест свежих материалов из мира фронтенда за последнюю неделю №347 (7 — 13 января 2019)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

Mikasa

5 лет назад

#

Подводные камни пользовательских CSS-свойств

Автор курса Нетологии «HTML-верстка» Стас Мельников рассказал о нюансах, которые могут усложнить работу с пользовательскими CSS-свойствами.

Правила синтаксиса названий пользовательских свойств

Мы привыкли, что встроенные CSS-свойства нечувствительны к регистру. Поэтому следующие способы объявления свойства
border дадут одинаковый результат:

Источник

Den

5 лет назад

#

Post & Pre Processing CSS

Привет, читатель. На пути изучения верстки ты постиг CSS и хочешь продвинуться дальше? Тогда тебе под кат. Осторожно, много кода.

Источник

Den

5 лет назад

#

Дайджест свежих материалов из мира фронтенда за последнюю неделю №344 (17 — 23 декабря 2018)

Предлагаем вашему вниманию подборку с ссылками на новые материалы из области фронтенда и около него.

Источник

123

8

104

55

Стена группы

Эффективное создание компонентов с помощью styled system

Эффекты фильтрации SVG. Часть 6. Создание текстуры с помощью feTurbulence

Дайджест свежих материалов из мира фронтенда за последнюю неделю №353 (17 — 24 февраля 2019)

Полупрозрачный фон

Дайджест свежих материалов из мира фронтенда за последнюю неделю №349 (21 — 27 января 2019)

Как CSS специфичность работает в браузере

Thimble (Mozilla) переезжает на Glitch

Дайджест свежих материалов из мира фронтенда за последнюю неделю №348 (14 — 20 января 2019)

Оптимизация сайта для GooglePage Speed (учтены все особенности после его обновления) Часть 1

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

Элементарный Canvas

Дайджест свежих материалов из мира фронтенда за последнюю неделю №347 (7 — 13 января 2019)

Подводные камни пользовательских CSS-свойств

Post & Pre Processing CSS

Дайджест свежих материалов из мира фронтенда за последнюю неделю №344 (17 — 23 декабря 2018)

Авторизация

Войти с помощью

Пользователи

Записи групп

Облако тегов