Difference between revisions of "OCTOPUS Colori"
From OCTOPUSCINEMA
m |
m |
||
| Line 10: | Line 10: | ||
<style> | <style> | ||
#vg { width: 100%; margin: 1.5em 0; } | #vg { width: 100%; margin: 1.5em 0; } | ||
| − | #vg .win { position: relative; border-radius: | + | #vg .win { position: relative; border-radius: 16px; overflow: hidden; |
| − | background: #000; box-shadow: 0 18px 40px rgba(0,0,0,.35); } | + | background: #000; border: 1px solid #888; |
| + | box-shadow: 0 18px 40px rgba(0,0,0,.35); } | ||
#vg .bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; | #vg .bar { position: absolute; top: 0; left: 0; right: 0; height: 40px; | ||
display: flex; align-items: center; gap: 8px; padding: 0 12px; z-index: 2; | display: flex; align-items: center; gap: 8px; padding: 0 12px; z-index: 2; | ||
| Line 18: | Line 19: | ||
#vg .bar i:nth-child(2) { background: #febc2e; } | #vg .bar i:nth-child(2) { background: #febc2e; } | ||
#vg .bar i:nth-child(3) { background: #28c840; } | #vg .bar i:nth-child(3) { background: #28c840; } | ||
| − | #vg .bar span { | + | #vg .bar span { position: absolute; left: 50%; transform: translateX(-50%); |
| + | max-width: 60%; color: #fff; font-size: 13px; | ||
text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; | text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; | ||
| − | text-overflow: ellipsis; } | + | text-overflow: ellipsis; pointer-events: none; } |
#vg video { display: block; width: 100%; height: auto; | #vg video { display: block; width: 100%; height: auto; | ||
aspect-ratio: 2048 / 1080; object-fit: contain; background: #000; } | aspect-ratio: 2048 / 1080; object-fit: contain; background: #000; } | ||
| − | #vg .dots { display: flex; justify-content: center; align-items: center; gap: | + | #vg .dots { display: flex; justify-content: center; align-items: center; gap: 11px; |
| − | margin: 14px auto 0; padding: | + | margin: 14px auto 0; padding: 12px 20px; width: max-content; |
background: rgba(0,0,0,.75); border-radius: 999px; } | background: rgba(0,0,0,.75); border-radius: 999px; } | ||
| − | #vg .dots button { width: | + | #vg .dots button { width: 11px; height: 11px; padding: 0; border: 0; cursor: pointer; |
| − | border-radius: 50%; background: rgba(255,255,255,.45); color: #fff | + | border-radius: 50%; background: rgba(255,255,255,.45); color: #fff; |
line-height: 1; display: flex; align-items: center; justify-content: center; | line-height: 1; display: flex; align-items: center; justify-content: center; | ||
| − | transition: background .2s; } | + | transition: background .2s; flex: none; } |
#vg .dots button:hover { background: rgba(255,255,255,.7); } | #vg .dots button:hover { background: rgba(255,255,255,.7); } | ||
| − | #vg .dots button.active { | + | #vg .dots button.active { width: 22px; height: 22px; font-size: 14px; background: none; } |
| + | #vg .dots button.active:hover { background: rgba(255,255,255,.15); } | ||
</style> | </style> | ||
<div id="vg" data-base="/products/colori/" data-clips="Hero-1.mp4|Hero-2.mp4|Hero-3.mp4" data-titles="First video title|Second video title|Third video title"> | <div id="vg" data-base="/products/colori/" data-clips="Hero-1.mp4|Hero-2.mp4|Hero-3.mp4" data-titles="First video title|Second video title|Third video title"> | ||
Revision as of 15:17, 14 September 2026
The first video tool – for building video tools.
Build grades, optical simulations, film emulation, diagnostic tools, color operations - anything. And then run them instantly on your local machine with real-time tactile control.
Free Download
No credit card required.
For Windows & macOS.
Keep your Adobe workflow.
With Colori for Premiere, you can send your Colori tools straight to Premiere.
Learn more about Colori for Premiere ›
Instant tactile feedback. Colori tools run in real-time on your machine’s GPU. Manipulate sliders, pick colors and more with instant feedback.