| <h1><span>Life</span><span>is a</span><span>gradient</span></h1> |
Uses the border-image property to frame an image in a somehow photo-realistic way. Additionally, a "handwritten" caption can be applied. There are some pixel based calculations in here, which is not ideal. And, of course: IE. But whatever. The jQuery part is not really neccessary; it simply helps to keep the HTML part a little cleaner. Of course, you can remove it and some of the CSS if you don't want captions at all.
A Pen by Tobias Reinhardt on CodePen.
| <div class="circle"> | |
| <div class="text">Our Team</div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=69"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=64"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=65"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=52"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=41"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=33"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=22"/></div> | |
| <div class="image-wrapper"><img class="image" src="http://i.pravatar.cc/300?img=15"/></div> |
| <div class="container"> | |
| <span class="flipper"> | |
| <span class="front">.</span> | |
| <span class="back">(</span> | |
| </span> | |
| <span class="flipper"> | |
| <span class="front">.</span> | |
| <span class="back">^</span> | |
| </span> | |
| <span class="flipper"> |
| <div id="App"></div> |
| <div> | |
| <canvas id="canvas" ></canvas> | |
| </div> |
