Web design can serve as a playful exploration ground for learning new techniques. In today’s guide, we’ll dive into the creation of an underwater CSS text effect, not just for the visual outcome, but to deepen our understanding of how different CSS properties harmonize to create dynamic text effects.
Your Web Designer Toolbox
Unlimited Downloads: 500,000+ Web Templates, Icon Sets, Themes & Design Assets Starting at only $16.50/month!
Setting up the Structure
Our journey into the deep sea starts with a simple HTML structure: a div
element with the class underwater
, wrapping around an h1
tag.
<div class="underwater"> <h1>1stWebDesigner</h1> </div>
Achieving the Underwater Effect
For our underwater CSS text effect, we introduce a range of CSS properties such as background-image
, animation
, and -webkit-background-clip
.
@import url('https://fonts.googleapis.com/css2?family=Maven+Pro:wght@700&display=swap'); body{ /* Using a dark background color for optimal contrast */ background-color: #000; font-family: 'Maven Pro', sans-serif; } .underwater h1{ /* Font settings: sizing and a semi-transparent color */ font-size: 2.5rem; color: #2c3e5010; /* Assigning an underwater image as the background */ background-image: url('https://w7.pngwing.com/pngs/183/509/png-transparent-under-water-scenery-sunlight-underwater-ray-star-ocean-atmosphere-cloud-computer-wallpaper.png'); /* Clipping the background image to the outline of the text */ -webkit-background-clip:text; /* Setting a 10s infinite animation for a dynamic effect */ animation: waterEffect 10s infinite; } /* Animation to simulate flowing water */ @keyframes waterEffect { 0% { background-position: left 0 top 0; } 100% { background-position: left 100% top 0; } }
Explaining Key CSS Properties and Values
Breaking down our CSS code, the first point of interest is the background-image
property. By setting an underwater image as the background, we immediately set the tone for our effect.
The -webkit-background-clip:text
property clips the background image to the shape of the text. It allows the underwater image to fill the text, setting the stage for our effect.
The color
property plays a vital role as well. We’re using a semi-transparent color (color: #2c3e5010;
), where the last two digits 10
represent the alpha channel in hexadecimal format, controlling the transparency. This enables the background image to shine through, enhancing the underwater illusion.
The animation
property sets our waterEffect
animation into motion. Defined by the @keyframes
rule, it continuously shifts the background-position
from left 0 top 0
to left 100% top 0
, creating the illusion of water flowing over the text.
The Result
See the Pen
Underwater Text Effect by 1stWebDesigner (@firstwebdesigner)
on CodePen.
Exploring Other Methods
Different methods can achieve similar effects. An alternate approach involves utilizing the clip-path
property with CSS animations, yielding a wavy text appearance akin to an underwater CSS text effect. This method manipulates the clip region of an element over time, evoking a dynamic sense of movement reminiscent of water’s rhythmic flow. In addition, the technique doesn’t necessitate a background image, instead, it transforms the appearance of the text directly. By turning to this method, you’re exposed to yet another aspect of CSS and its potential for dynamic text effects.
This post may contain affiliate links. See our disclosure about affiliate links here.