Text Idea

Text that has a moving background inside. Done with HTML & CSS made with love and motivated with coffee.

May 22, 2016
Random Idea
By Chad Trikyas Mooney
Here is something I was playing with and I really like the outcome.
I thought I would share the code.
Sorry If indentation isn't correct. I am still getting used to this site.

<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Chad Trikyas Mooney</title>
<link href="https://fonts.googleapis.com/css?family=Alegreya+Sans+SC:400,500" rel="stylesheet" type="text/css">
<style type="text/css">
body {
  margin: 0;
  padding: 0;
  font-size: 14px;
}
.container {
  margin-left: 25%;
}
.text, .texts {
  background-image: url(/images/20-FREE-BEAUTIFUL-HI-RES-WOOD-TEXTURE-WALLPAPER-BACKGROUNDS-18-Dark-Gray-Wood-Panels.jpg);
  background-position: center;
  -webkit-text-fill-color: transparent;
  -webkit-background-clip: text;
  -webkit-animation: moving 250s linear infinite;
}
.text {
  font-size: 100px;
  font-family: Impact, Charcoal, sans-serif;
  -webkit-box-reflect: below -45px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(25%, transparent), to(rgba(255,255,255,0.80)));
}
.texts {
  margin-top: 1.2vh;
  font-size: 28px;
  font-weight: 900;
  letter-spacing: 0.40vh;
  font-family: 'Alegreya Sans SC', sans-serif;
  -webkit-box-reflect: below -15px -webkit-gradient(linear, left top, left bottom, from(transparent), color-stop(25%, transparent), to(rgba(255,255,255,0.80)));
}
@-webkit-keyframes moving {
0% {
background-position: 0 0;
}
100% {
background-position: 5000px 0;
}
</style>
</head>
<body>
<!--
FOR BEHANCE.NET ONLY!!!
I noticed on "behance.net" all my class = ""   is showing as data - class - portfolio = ""
If you copy this code from https://www.behance.net/trikyas please make sure you change them. 
-->
<div class="container">
  <div class="text">♜TRIKYAS◘COM♜</div>
  <br>
  <div class="texts">❝ IF YOU THINK MATH IS HARD¸ TRY WEB DESIGN ❞</div>
</div>
</body>
</html>
 
Feel free to do what ever you want with this code. 
I grabbed the background image from "Will More" and you can find more of his work here:
http://www.dzzyn.com/20-free-beautiful-hi-res-wood-texture-wallpaper-backgrounds/

You may also like these.

Carousel
Rotating carousel with effects
2016
My Site
A website built without Bootstrap. Only a basic website Designed and Created by me.
2015
Basic Portfolio
A site that is "unique" and user friendly, using CSS3 animations and transitions. The background gracefully fades in and out over a 30 second infinite loop. All the font colours change to suit the background image that is being shown. Links all have a hover effect using transitions at 0.75s. I wanted to create something that shows more of my personality and steps out of the "generic" look that I always see online.
2016
Logo
A Logo created in Adobe Illustrator CC A special thanks to: Rudolph Liao
2016
My facebook cover
My first attemp at designing my facebook cover.
2016
Back to Top