Jessica Lord jlord

CSS Typing Animation

A CSS typing animation, inpsired by Lea's, but the "cursor" is relative to the type so that you aren't limited to just monospace typeface, and this does not require background/span color matching so are free to use any background you want.

Here is the codepen.

woo!

@jllord

	<html>
	<!-- the head tag holds information and resources for the page -->
	<head>
	<!-- the title tag holds the page title -->
	<title>Hello WWW!</title>
	</head>

	<style>
	/* changing background color and the margin (spacing) between the edges and our content */
	body {

	<html>
	<!-- I'm ommiting a lot of stuff, keeping this to the point -->
	<head>
	<!-- load in tabletop and mustache -->
	<script src="/wp-content/themes/Starkers/tabletop.js" type="text/javascript"></script>
	<script src="/wp-content/themes/Starkers/ICanHaz.js" type="text/javascript"></script>
	</head>
	<style>
	/* confine your image to a circle */
	.instaImgCirc img {border-radius: 1000px;}

	<html>
	<body>

	<div class="span1">
	<h3>Lastest Instagram</h3>
	<div id="instagram"></div>
	</div>
	</div><!-- end span1 -->
	<div class="span2">
	<div id="pocketReader"></div>

	<?php
	$posttext = $post->post_content;
	$regex = '~<img [^\>]*\ />~';
	preg_match_all($regex, $posttext, $images);
	$posttext = preg_replace($regex, '', $posttext); ?>

	<div id="thePostText">
	<?php echo $posttext; ?>
	</div>

	/*!
	ICanHaz.js version 0.10 -- by @HenrikJoreteg
	More info at: http://icanhazjs.com
	*/
	(function () {
	/*
	mustache.js — Logic-less templates in JavaScript

	See http://mustache.github.com/ for more info.
	*/

	<html>
	<head>
	<title>I'm learning</title>
	<link rel="stylesheet" href="leaflet.css" />
	<script src="leaflet.js"></script>
	<script src="http://zeptojs.com/zepto.js" type="text/javascript"></script>
	<script src="map.js" type="text/javascript"></script>
	<script src="tabletop.js" type="text/javascript"></script>
	<style>
	body {margin: 0; padding: 0; text-align: center;}

	<!doctype html>
	<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
	<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
	<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
	<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title></title>
	<meta name="description" content="">

	<html>
	<head>
	<link href='http://fonts.googleapis.com/css?family=Arvo:400,700,400italic,700italic' rel='stylesheet' type='text/css'>
	</head>
	<style>
	h2 {font-family: 'Arvo', serif; font-weight: 400; font-size: 16px; color: #333; margin: 0px;}
	a {text-decoration: none; }

	#sidebar { position: relative; float: left; width: 360px;}
	#sidebar h2 { margin-left: 8px; }