Difference between revisions of "OCTOPUS Colori"
From OCTOPUSCINEMA
m |
m |
||
| Line 9: | Line 9: | ||
<html> | <html> | ||
<style> | <style> | ||
| − | #vg { | + | #vg { width: 100%; margin: 1.5em 0; } |
| − | #vg .win { border-radius: 10px; overflow: hidden; background: # | + | #vg .win { position: relative; border-radius: 10px; overflow: hidden; |
| − | + | background: #000; box-shadow: 0 18px 40px rgba(0,0,0,.35); } | |
| − | #vg .bar { height: | + | #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; | |
| − | #vg .bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; } | + | background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0)); } |
| + | #vg .bar i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; flex: none; } | ||
#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 video { display: block; width: 100%; background: #000; } | + | #vg .bar span { margin-left: 6px; color: #fff; font-size: 13px; |
| − | #vg .dots { display: flex; justify-content: center; gap: | + | text-shadow: 0 1px 2px rgba(0,0,0,.6); white-space: nowrap; overflow: hidden; |
| − | #vg .dots button { width: | + | text-overflow: ellipsis; } |
| − | border-radius: 50%; background: # | + | #vg video { display: block; width: 100%; height: auto; |
| − | #vg .dots button | + | aspect-ratio: 2048 / 1080; object-fit: contain; background: #000; } |
| − | #vg .dots button. | + | #vg .dots { display: flex; justify-content: center; align-items: center; gap: 9px; |
| − | + | margin: 14px auto 0; padding: 7px 13px; width: max-content; | |
| + | background: rgba(0,0,0,.75); border-radius: 999px; } | ||
| + | #vg .dots button { width: 15px; height: 15px; padding: 0; border: 0; cursor: pointer; | ||
| + | border-radius: 50%; background: rgba(255,255,255,.45); color: #fff; font-size: 9px; | ||
| + | line-height: 1; display: flex; align-items: center; justify-content: center; | ||
| + | transition: background .2s; } | ||
| + | #vg .dots button:hover { background: rgba(255,255,255,.7); } | ||
| + | #vg .dots button.active { background: none; font-size: 11px; } | ||
</style> | </style> | ||
| − | <div id="vg" data-base="/products/colori/" data-clips="Hero-1.mp4|Hero-2.mp4|Hero-3.mp4"> | + | <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 class="win"> | <div class="win"> | ||
| − | <div class="bar"><i></i><i></i><i></i></div> | + | <div class="bar"><i></i><i></i><i></i><span id="vgt"></span></div> |
<video id="vgv" muted playsinline preload="auto"></video> | <video id="vgv" muted playsinline preload="auto"></video> | ||
</div> | </div> | ||
Revision as of 15:10, 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.