HTML5 CSS3 Animal Face | HTML 5 & CSS 3 - Single Element Graphics - Animal Face

Animal Face created by pure CSS3 plus only one single HTML element.

Demo

Explanation

In this demo, all shapes are created by the box-shadow property.

HTML & CSS

<style>
.box {
 display: block;
 position: absolute;
 /*overflow: hidden; */
 height: 80px;
 width: 80px;
 margin: 80px 80px; 
 /* eye1, eye2, nose_a, nose_b, nose_c, mouth_a, mouth_b, ear1, ear2, face, cheek1, cheek2  */
 box-shadow: 
  135px 10px 0 -30px white, 135px -15px 0 -30px white,
  160px 3px 0 -35px white,  160px 0px 0 -35px white, 160px -3px 0 -35px white, 
  150px 0px 0 -10px red, 160px 0px 0 -15px white, 
  100px -50px 0 -10px red, 100px 50px 0 -10px red, 
  150px 0px 0 10px red, 
  160px 15px 0 -5px red, 160px -15px 0 -5px red;
 border-radius: 40px;
 background: transparent;
 transform: rotate(90deg);
}
</style>
<div class="box"></div>

What CSS3 CANNOT DO

1. CANNOT use multiple :before or :after pseudo-elements, but you can use both :before and :after at the same time.

Demo
Explanation
In this demo, the box element creates 5 round-corner rectangles (blue & red).
The :before pseudo element creates 3 yellow circles.
The :after pseudo element creates 3 green rectangles.
You may be wondering why there are more than 3 shapes. It is the power of box-shadow.

HTML & CSS

<style>
.box {
  display: inline-block;
  /*overflow: hidden; */
  position: relative;
  border-radius: .7em;
  /* the lenght of height and width do not matter */
  height: 2em;
  width: 2em;
  margin: 80px 50px; 
  font-size: 1em;
  /* use 'em' as the unit as it's scalable. change font size to make the shape larger or smaller */
  box-shadow: 2em 2em 0 0 red, 2em -2em 0 0 red, -2em -2em 0 0 red, -2em 2em 0 0 red;
  background: blue;
}
.box:after {
  content: '';
  position: absolute;
  top: .5em;
  left: 2em;
  height: 1em;
  width: 1em;
  background: lime;
  box-shadow: 2em 2em 0 0 green, 2em -2em 0 0 green;
}
.box:before {
  content: 'a';
  position: absolute;
  top: .5em;
  left: -1em;
  height: 1em;
  width: 1em;
  background: yellow;
  border-radius: 1em;
  box-shadow: -2em -2em 0 0 orange, -2em 2em 0 0 orange;
}
</style>
<div class="box"></div>

2. CANNOT use counter inside cacl() function

HTML5 CSS3 Scrolling Slideshow | HTML 5 & CSS 3 - Smooth Scrolling

Smooth scrolling slideshow using pure CSS3 code

In this article, I'm going to demo how to implement image slideshow using

1. CSS2 and Javascript
2. CSS3

And for CSS3 approach, I'll show how to implement

1. Scrolling up
2. Scrolling up and down

If you move the mouse over and out the slideshow, it will be paused and resumed accordingly.
Keypoints in the demo includes:

• setInterval and clearInterval
• transform and translateY
• calc
• animation including animation-play-state

To simplify the example, all the images here are standard AD sidebar images (300px * 250px).

1. CSS2 + Javascript

Demo

Sponsors

• 
• 
• 

CSS

<style type='text/css'>
 	#ad_container {
		margin-bottom: 10px;
		padding: 0;
		height: 304px;
		width: 304px;
		border: 2px solid rgb(111, 126, 255);
		box-shadow: 2px 2px 10px rgb(111, 126, 255);
		border-radius: 15px 15px 0 0;
		overflow: hidden;
	}
	#ad_title {
		margin: 0;
		padding: 0;
		height: 50px;
		line-height: 50px;
		font-size: 24px;
		color: white;
		text-align: center;
		background: rgb(111, 126, 255); 
	}
	#ad_content {
		margin: 5px auto;
		padding: 0;
		height: 250px;
		width: 300px;
		overflow: hidden;
	}

	#ad_content1, #ad_content2 {
		margin: 0;
		padding: 0;
		list-style-type: none;
	}
</style>

HTML

<div id='ad_container'>
		<div id='ad_title'>Sponsors</div>
		<div id='ad_content'>
			<ul id='ad_content1'>
			<!-- MYADS CJ Disney -->
				<li><a href='http://www.kqzyfj.com/click-7744766-11138523' target='_top'>
	<img alt='' border='0' height='250' src='http://www.tqlkg.com/image-7744766-11138523' width='300'/></a></li>
			<!-- MYADS CJ Web Hosting -->
				<li><a href='http://www.anrdoezrs.net/click-7744766-11793715' target='_top'>
	<img alt='' border='0' height='250' src='http://www.awltovhc.com/image-7744766-11793715' width='300'/></a></li>
			<!-- MYADS CJ Hotel -->
				<li><a href='http://www.jdoqocy.com/click-7744766-10691018' target='_top'> <img alt='Hotels.com' border='0' height='250' src='http://www.tqlkg.com/image-7744766-10691018' width='300'/></a></li>
			</ul>
			<ul id='ad_content2'/>
		</div>
</div>

Javascript

<script>
	var ad_content = document.getElementById('ad_content');
	ad_content.scrollTop = 0;

	var ad_content1 = document.getElementById('ad_content1');
	var ad_content2 = document.getElementById('ad_content2');
	ad_content2.innerHTML = ad_content1.innerHTML;

	function scrollUp() {

		if (ad_content.scrollTop >= ad_content1.offsetHeight)
		{
			ad_content.scrollTop = '5px';
		}
		else
		{
			ad_content.scrollTop ++;
		}
	}
	
	var speed = 30;
	var myScroll = setInterval('scrollUp()', speed);
	
	ad_content.onmouseover = function(){
		clearInterval(myScroll);
	}
	ad_content.onmouseout = function(){
		myScroll = setInterval("scrollUp()", speed);
	}
</script>

To make it a smoothing sliding, we need to clone the content of ad_content1 to ad_content2, this is achieved by ad_content2.innerHTML = ad_content1.innerHTML in the Javascript.

2. CSS3

Demo

Sponsors

• 
• 
• 
•