Graphic designer Ed Nacional harnesses the power of CSS to create a promo site for video app Telecast.
Telecast is an iOS app that brings users three five-minute packages of highly-curated video daily, cutting through the saturated digital video world. The promo site is an elevator pitch for the product, and though the site is small and to the point, it packs in neat CSS uses.
The first thing you notice is the gradient effect at the top of the large hero images. The colouring is created with CSS gradients applied to a masking layer with its opacity reduced to let the photo behind show through. The colours were created by graphic designer and illustrator Ed Nacional.
The Telecast logo itself was basically begging to be recreated in CSS
“The decision to fix the hero image background and fade it out as the iPad scrolled up began as a code accident we thought looked cool,” reveals Grant Custer, the interaction designer and coder. He adds that such accidents are a benefit of the combination between design and code. Be sure to check out the logo in the fixed bottom navigation, which is also controlled with styling. Custer adds, “The Telecast logo itself was basically begging to be recreated in CSS.” So it was.
