CSS
Превращайте фрагменты CSS в изображения, которыми хочется делиться, не покидая Mac.
CSS стоит показывать картинкой, когда важны значения: градиент, описание сетки, набор кастомных свойств.
Codeshot определяет CSS по вставленному коду, так что ошибиться с выбором языка невозможно. Вот один и тот же фрагмент в трёх из 30 встроенных тем, отрисованных стилями самого приложения.
:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}:root {
--ink: #0d0d10;
--blue: #1769ff;
}
.snapshot {
display: grid;
gap: clamp(0.5rem, 2vw, 1.5rem);
border-radius: 14px;
box-shadow: 0 18px 40px rgb(23 23 32 / 12%);
}В большинстве CSS-сниппетов суть — в значениях цвета, поэтому берите тему, которая с ними не спорит. Нейтральные темы здесь работают лучше ярких.
Пусть размер следует за содержимым или зафиксируйте соотношение — 1:1, 4:3, 3:2, 16:9, 9:16, 2:3 или 3:4 — а затем экспортируйте в 1×, 2× или 3×, чтобы изображение оставалось чётким на retina-экране. Скопируйте его в буфер обмена сочетанием ⌘⇧C или сохраните через ⌘S.
Посмотрите все 30 тем рядом или прочитайте весь процесс.
Всё работает на вашем Mac. Код никогда его не покидает.