The compact storyteller
Medium rectangle
300 × 250A near-square composition for a clear headline, a recognizable visual, and one next step.
Exact 300 px wide × 250 px high, including the border. No resizing. Scroll the preview when needed.
Two formats. One exact canvas.
Use the CSS and Animated GIF buttons above to compare the same original creative. The CSS container is exactly 300 × 250 CSS pixels; the GIF’s encoded canvas is exactly 300 × 250 image pixels. The 2-pixel creative border is inside those dimensions, not added to them. The previews never shrink to fit a smaller column.
Both versions show three scenes, two seconds per scene, repeated three times. The GIF contains nine encoded frames and no infinite-loop extension; it plays for 18 seconds and ends on the third scene. Play restarts the selected example; Stop shows its final frame. Reduced-motion preferences use a still preview.
Download editable HTML + CSS source · Download the CSS stylesheet · Download the animated GIF
View the complete 300 × 250 HTML + CSS source
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><meta name="robots" content="noindex,follow"><meta name="ad.size" content="width=300,height=250"><title>ClickToll 300 × 250 CSS banner example</title><style>
/* ClickToll original creative. Dimensions are the OUTER border box, in CSS pixels. */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0;width:300px;height:250px;background:#fff9ed}
.ct-creative{position:relative;display:block;width:300px;min-width:300px;max-width:300px;height:250px;min-height:250px;max-height:250px;overflow:hidden;isolation:isolate;border:2px solid #17131f;color:#17131f;text-decoration:none;font-family:Arial,Helvetica,sans-serif;line-height:1;contain:layout paint}
.ct-creative:focus-visible{outline:3px solid #17131f;outline-offset:-5px}
.ct-scene{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:18px 18px 23px;overflow:hidden;background:#b9ff00;opacity:0;animation-duration:6s;animation-timing-function:steps(1,end);animation-iteration-count:3;animation-fill-mode:both}
.ct-scene:nth-child(1){animation-name:ct-first}
.ct-scene:nth-child(2){animation-name:ct-second}
.ct-scene:nth-child(3){animation-name:ct-third}
.ct-lime{background:#b9ff00}.ct-pink{background:#ff2e9a}.ct-cyan{background:#00e5ff}.ct-yellow{background:#ffd21f}
.ct-brand{position:relative;z-index:2;display:block;font-size:13px;font-weight:900;letter-spacing:-.5px;white-space:nowrap}
.ct-copy{position:relative;z-index:2;display:block;font-family:'Arial Black',Arial,Helvetica,sans-serif;font-weight:900;font-size:43px;line-height:.98;letter-spacing:-2px;text-transform:uppercase;white-space:pre-line}
.ct-bottom{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:8px;border-top:2px solid #17131f;padding-top:10px}
.ct-caption{font-size:10px;font-weight:700;line-height:1.3;max-width:132px}
.ct-cta{display:block;flex-shrink:0;padding:9px 12px;background:#fff9ed;border:2px solid #17131f;box-shadow:3px 3px 0 #17131f;font-size:11px;font-weight:900;white-space:nowrap}
.ct-rainbow{position:absolute;bottom:0;left:0;right:0;height:7px;border-top:2px solid #17131f;background:linear-gradient(90deg,#ff2e9a 0 20%,#ffd21f 20% 40%,#b9ff00 40% 60%,#00e5ff 60% 80%,#8253eb 80%)}
.ct-art{position:absolute;right:-21px;top:-29px;width:118px;height:118px;border:15px solid #17131f;border-radius:50%;opacity:.12;pointer-events:none}
.ct-art::after{content:'';position:absolute;inset:9px;border:9px solid #17131f;border-radius:50%}
@keyframes ct-first{0%,33.332%{opacity:1}33.333%,100%{opacity:0}}
@keyframes ct-second{0%,33.332%{opacity:0}33.333%,66.665%{opacity:1}66.666%,100%{opacity:0}}
@keyframes ct-third{0%,66.665%{opacity:0}66.666%,100%{opacity:1}}
html[data-paused] .ct-scene{animation-play-state:paused}
html[data-frame] .ct-scene{animation:none!important;opacity:0!important}
html[data-frame="0"] .ct-scene:nth-child(1),html[data-frame="1"] .ct-scene:nth-child(2),html[data-frame="2"] .ct-scene:nth-child(3){opacity:1!important}
@media(prefers-reduced-motion:reduce){.ct-scene{animation:none!important;opacity:0}.ct-scene:nth-child(3){opacity:1}}
</style></head><body><a class="ct-creative" href="https://clicktoll.com/display-advertising/" target="_top" aria-label="Explore the ClickToll display advertising guide"><span class="ct-scene ct-lime" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">MAKE IT
MATTER.</strong><span class="ct-bottom"><span class="ct-caption">One idea. One next step.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-yellow" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">ONE CLEAR
PROMISE.</strong><span class="ct-bottom"><span class="ct-caption">Keep the promise clear.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span><span class="ct-scene ct-cyan" aria-hidden="true"><span class="ct-brand">ClickToll.com</span><span class="ct-art"></span><strong class="ct-copy">A BETTER
NEXT STEP.</strong><span class="ct-bottom"><span class="ct-caption">Ideas for better banners.</span><span class="ct-cta">Explore ↗</span></span><span class="ct-rainbow"></span></span></a><script>
/* Playback controls affect CSS keyframes; no image or animation framework is required. */
(()=>{'use strict';const root=document.documentElement;
const preview=new URLSearchParams(location.search).has('preview');
if(preview){root.setAttribute('data-paused','');root.setAttribute('data-frame','0');}
window.addEventListener('message',event=>{
if(event.source!==parent||event.origin!==location.origin||!event.data||event.data.type!=='clicktoll-banner')return;
const action=event.data.action;
if(action==='play'){
root.setAttribute('data-frame','0');void document.body.offsetWidth;
root.removeAttribute('data-frame');root.removeAttribute('data-paused');
}else if(action==='stop'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','2');
}else if(action==='reset'){
root.setAttribute('data-paused','');root.setAttribute('data-frame','0');
}
});})();
</script></body></html>View the exact-size animated GIF embed
<a href="https://clicktoll.com/display-advertising/">
<img src="https://clicktoll.com/assets/banners/300x250/clicktoll-300x250-animated.gif"
width="300" height="250"
style="display:block;width:300px;height:250px;min-width:300px;max-width:none;flex:none;border:0"
alt="Explore the ClickToll display advertising guide">
</a>Where this canvas fits
An in-content or side-column placement where a concise offer can be understood as a single composition. Treat the placement specification as the source of truth; a familiar format name does not guarantee availability in every campaign or market.
A useful way to compose the message
Build three visual layers: brand recognition, the useful promise, and the action. Keep one layer dominant rather than giving every element equal weight. Sketch the recognition cue, the useful promise, and the action before adding decorative detail. Review the composition at the intended size, not only enlarged inside a design tool.
The mistake to avoid
Shrinking a full landing-page message into the available space. Move the explanation to the destination and keep the creative focused. A clear, narrow promise is easier to carry from the banner to its destination. Check that the action label accurately describes the page or resource the visitor will encounter.
What the blank canvas includes
The download is a simple SVG at exactly 300 × 250 pixels, with a visible frame and editable text labels. Open it in a compatible vector editor as a planning canvas. Replace the labels with your approved creative, then export or package the final artwork to the recipient’s requirements.
Before you deliver
Check the actual output dimensions, file weight, supported format, destination, language, creative version, and any animation or click-handling rules. A browser preview is not a substitute for the receiving platform’s approval process. The ad specifications page explains the difference between a static image and an HTML creative package.
Compare a related shape
See the 336 × 280 format to compare the proportions. Keep the underlying offer consistent while deliberately rebuilding line breaks, spacing, and visual hierarchy for the new canvas.