Freebies

Oh come on! Who doesn't like FREE STUFF?!?

Marquee tag effect with css.

Apparently the marquee tag is getting deprecated, so here's some css that replicates its effect, along with an example.

css marquee code:

/* how to use this;
  create divider with class="marquee",
  create paragraph with stuff you want in marquee nested inside, then put paragraph in divider,
  e.g something like this;
  <div class="marquee">
	<p>
	place text, anchor links, images etc here.
	</p>
  </div>
  copy and paste below code into your style.css file, if you dont have one already...
  Make one! its good practice, trust me. */
  
  /* made by cetfen, credit appreciated, but not necessary, just dont claim this is yours.
  feel free to iterate on this bit of css, im just an amateur at the end of the day. */
  
  @-moz-keyframes marquee {

0% {
	  transform: translateX(100%);
}

100% {
	transform: translateX(-100%);
}

}

@-webkit-keyframes marquee {

0% {
	  transform: translateX(100%);
}

100% {
	  transform: translateX(-100%);
}

}

@keyframes marquee {

0% {
	  -moz-transform: translateX(100%);
	  -webkit-transform: translateX(100%);
	  transform: translateX(100%);
}

100% {
	  -moz-transform: translateX(-100%);
	  -webkit-transform: translateX(-100%);
	  transform: translateX(-100%);
}

}

/* im not sure which of the above is needed, but i suggest you keep them all just in case.
   Also, you might need to tweak the percentages a little depending on how long your webpage,
   and the paragraph in the divider with the marquee class is.
   I learned that the hard way. (rip kittytailwag.gif) */

.marquee {
	overflow: hidden;
	padding: #;
	margin: # #;
}

.marquee > p {
	animation: #s linear #s infinite marquee;
	margin: #;
	white-space: nowrap;
}

.marquee p:hover {
	animation-play-state: paused;
}

/* hashes i.e "#" are values you can adjust to your liking. */

css marquee example:

THIS IS A CSS MARQUEE. Under construction Two deer with a heart inbetween them. AND THIS IS A LINK IN THE CSS MARQUEE.

Site button

My site button, self explanatory.

html code for my site button:

my site button, animated:

my site button, static: