The majority of this inspiration came from this article.
The first effect is a subtle light shadow to accent black text on a black/grey background. Obviously getting light on dark or dark on light work, but getting dark on dark seems to work better than ‘light on light’ with this nifty and subtle text-shadow effect:
text-shadow: 0px 1px 1px #4d4d4d; background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-mosaic-tiles.png");
THIS IS AWESOME
That’s all fine and well, but can we apply the same concept to, say, a Divi blurb module? Yup…
.blurb-1 .et-pb-icon { border: 3px solid; border-color: #000000; font-size: 48px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; padding: 25px; background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png"); text-shadow: 0px 1px 1px #4d4d4d; }
Cool Title
Cool circle effect
The second is similar, but adds a top white shadow as well which creates an ’embossed’ look:
text-shadow: -1px -1px 1px #fff, 1px 1px 1px #000; background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png");
THIS IS AWESOME
Now what about combining them for a ‘pop-out’ transformation?
.blurb-2 .et-pb-icon { border: 3px solid; border-color: #000000; font-size: 48px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; padding: 25px; background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png"); text-shadow: 0px 1px 1px #4d4d4d; transition: all 800ms ease; } .blurb-2 .et-pb-icon:hover { color:#222 !important; text-shadow: 0px -1px 1px #ddd; }
Cool Title
Cool circle effect
Or maybe the opposite?
.blurb-3 .et-pb-icon { border: 3px solid; border-color: #000000; font-size: 48px; -moz-border-radius: 100px; -webkit-border-radius: 100px; border-radius: 100px; padding: 25px; background-image : url("http://orangepulley.com/wp-content/uploads/2015/09/black-jeans-texture.png"); text-shadow: 0px -1px 1px #ddd; transition: all 800ms ease; } .blurb-3 .et-pb-icon:hover { color:#000 !important; text-shadow: 0px 1px 1px #4d4d4d; }
Cool Title
Cool circle effect
The next effect (RETRO) works by adding hefty letter spacing and dropping two cascading layers, one dark and one light:
color: #d7ceb2;
text-shadow: 3px 3px 0px #2c2e38, 5px 5px 0px #5c5f72;
letter-spacing: 10px;
THIS IS AWESOME
Native Texas, Logan Seth Ramirez is a computer science graduate from Trinity University and lives in San Antonio with his wife and four children. Along with being a web hero, he authored The Groom Wore White Socks, sings and songwrites as Logan Seth, and his favorite Spanish word is cacahuates.
Recent Comments