CSS Examples

This page features a brief collection of CSS examples and some pure CSS background patterns.

Border Gradient

0000<style>
0001.grad_outer {
0002  padding: 6px;
0003  text-align: center;
0004  background: linear-gradient(to right bottom, #00f, #f00);
0005  border-radius: 11px;
0006}
0007
0008.grad_inner {
0009  padding: 6px;
0010  background-color: #000;
0011  color: #0f0;
0012  border-radius: 7px;
0013}
0014
0015.grad_outer:hover {
0016  background: linear-gradient(to right bottom, #009, #900);
0017}
0018
0019.grad_outer:active {
0020  background: linear-gradient(to right bottom, #0ff, #ff0);
0021}
0022</style>
0023<div class=grad_outer>
0024  <div class=grad_inner>CSS 3 simulated border gradient</div>
0025</div>

Demo

Bouncing Balls

0000<style>
0001#bb {
0002  position: relative;
0003  top: 0;
0004  bottom: 0;
0005  height: 48px;
0006  margin: 0;
0007  padding: 0;
0008  text-align: center;
0009}
0010
0011#bb span {
0012  display: inline-block;
0013  vertical-align: middle;
0014  width: 8px;
0015  height: 8px;
0016  margin: 24px auto;
0017  background-color: #000;
0018  border-radius: 24px;
0019  animation: bb 0.9s infinite alternate;
0020}
0021
0022#bb span:nth-of-type(2) {
0023  animation-delay: 0.3s;
0024}
0025
0026#bb span:nth-of-type(3) {
0027  animation-delay: 0.6s;
0028}
0029
0030@keyframes bb {
0031  0% {
0032    width: 16px;
0033    height: 16px;
0034    opacity: 0.9;
0035    transform: translateY(0);
0036  }
0037
0038  100% {
0039    width: 16px;
0040    height: 16px;
0041    opacity: 0.1;
0042    transform: translateY(-12px);
0043  }
0044}
0045</style>
0046<div id=bb><span></span><span></span><span></span></div>

Demo

Fade In

0000<style>
0001body {
0002  animation: fade_in ease-in 1s;
0003}
0004
0005@keyframes fade_in {
0006  from {
0007    opacity: 0;
0008  }
0009
0010  to {
0011    opacity: 1;
0012  }
0013}
0014</style>
0015<body id=fade_in>
0016  <p>
0017    text text text text text text text text text text text text 
0018    text text text text text text text text text text text text 
0019    text text text text text text text text text text text text 
0020    text text text text text text text text text text text text 
0021    text text text text text text text text text text text text 
0022    text text text text text text text text text text text text 
0023    text text text text text text text text text text text text
0024  </p>
0025</body>

Demo

Flip On Hover

0000<style>
0001.flip {
0002  background-image: url("flip-on-hover.jpg");
0003  background-repeat: no-repeat;
0004  width: 16px;
0005  height: 16px;
0006  transition: transform 0.5s;
0007}
0008
0009#flip {
0010  background-position: 0 0;
0011  transform: rotate(-360deg);
0012}
0013
0014#flip:hover {
0015  background-position: 0 -17px;
0016  transform: rotate(360deg);
0017}
0018</style>
0019<div id=flip class=flip></div>

Demo

Horizontal Flip

0000<style>
0001#hflip {
0002  animation: hflip 30s infinite;
0003}
0004
0005@keyframes hflip {
0006  from {
0007    transform: rotateY(0deg);
0008  }
0009
0010  to {
0011    transform: rotateY(360deg);
0012  }
0013}
0014</style>
0015<div id=hflip><img src="horizontal-flip.jpg" width=32 height=32 alt=DEMO title=DEMO /></div>

Demo

Hover To View

0000<style>
0001.htv {
0002  width: 48px;
0003  height: 36px;
0004}
0005
0006.htv:hover {
0007  width: 160px;
0008  height: 120px;
0009}
0010
0011#htv_demo {
0012  background-image: url("hover-to-view.jpg");
0013}
0014</style>
0015<div id=htv_demo class=htv title="Happy hovers"></div>

Demo

Icon Dock

0000<style>
0001#idock {
0002  text-align: center;
0003  width: 99%;
0004  height: 40px;
0005  margin: 0;
0006  padding: 0;
0007}
0008
0009#idock img {
0010  margin-top: 0;
0011  margin-bottom: -7px;
0012  border: 2px solid #ccc;
0013  border-radius: 12px;
0014  opacity: 0.8;
0015}
0016
0017#idock img:hover {
0018  margin-top: -7px;
0019  margin-bottom: 0;
0020  border: 2px outset #666;
0021  box-shadow: #ccc 0 0 4px 4px;
0022  opacity: 1;
0023}
0024</style>
0025<div id=idock>
0026  <img src="icon-dock.jpg" width=32 height=32 alt=DEMO title=DEMO />
0027  <img src="icon-dock.jpg" width=32 height=32 alt=DEMO title=DEMO />
0028  <img src="icon-dock.jpg" width=32 height=32 alt=DEMO title=DEMO />
0029  <img src="icon-dock.jpg" width=32 height=32 alt=DEMO title=DEMO />
0030  <img src="icon-dock.jpg" width=32 height=32 alt=DEMO title=DEMO />
0031</div>

Demo

Live Thumbs

0000<style>
0001.lt_list {
0002  position: relative;
0003}
0004
0005.lt_item object {
0006  position: absolute;
0007  width: 180px;
0008  height: 120px;
0009  display: none;
0010}
0011
0012.lt_item:hover object {
0013  display: inline-block;
0014}
0015</style>
0016<div class=lt_list>
0017  <div class=lt_item>
0018    <a href="https://www.duckduckgo.com/" 
0019       title="Search with DuckDuckGo">DuckDuckGo</a> 
0020    <object data="https://www.duckduckgo.com/" 
0021            type="text/html">object data</object>
0022  </div>
0023</div>

Demo

Show On Hover

0000<style>
0001.soh div {
0002  max-width: 200px;
0003}
0004
0005.soh div:hover {
0006  font-weight: bold;
0007}
0008
0009.soh div div {
0010  display: none;
0011  max-width: 300px;
0012}
0013
0014.soh div:hover div {
0015  background-color: #ffc;
0016  color: #000;
0017  font-size: 85%;
0018  font-weight: normal;
0019  display: inline-block;
0020  border: 1px #000 solid;
0021  margin: 8px 8px 12px 8px;
0022  padding: 4px;
0023}
0024
0025.soh div:hover div:hover {
0026  font-weight: normal;
0027}
0028</style>
0029<div class=soh>
0030  <div>LATEST HEADLINES
0031    <div>Mysterious secret stuff revealed!</div>
0032  </div>
0033  <div>TIMELINE
0034    <div>All clocks are ticking fine.</div>
0035  </div>
0036</div>

Demo

True Center

0000<style>
0001#tc {
0002  position: absolute;
0003  top: 25%;
0004  right: 25%;
0005  bottom: 25%;
0006  left: 25%;
0007  width: 50%;
0008  height: 50%;
0009  overflow: auto;
0010}
0011</style>
0012<div id=tc>
0013Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed 
0014doeiusmod tempor incididunt ut labore et dolore magna aliqua. Ut 
0015enimad minim veniam, quis nostrud exercitation ullamco laboris nisi 
0016utaliquip ex ea commodo consequat. Duis aute irure dolor 
0017inreprehenderit in voluptate velit esse cillum dolore eu fugiat 
0018nullapariatur. Excepteur sint occaecat cupidatat non proident, sunt 
0019inculpa qui officia deserunt mollit anim id est laborum.Lorem ipsum 
0020dolor sit amet, consectetur adipisicing elit, sed doeiusmod ...
0021</div>

Demo

Background Patterns

Cube

0000<style>
0001body {
0002  background-size: 80px 140px;
0003  background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px;
0004  background-image: linear-gradient(30deg, #999 12%, transparent 12%, 
0005                                    transparent 88%, #999 88%, #999), 
0006                    linear-gradient(150deg, #999 12%, transparent 12%, 
0007                                    transparent 88%, #999 88%, #999), 
0008                    linear-gradient(30deg, #999 12%, transparent 12%, 
0009                                    transparent 88%, #999 88%, #999), 
0010                    linear-gradient(150deg, #999 12%, transparent 12%, 
0011                                    transparent 88%, #999 88%, #999), 
0012                    linear-gradient(60deg, #ccc 25%, transparent 25%, 
0013                                    transparent 75%, #ccc 75%, #ccc), 
0014                    linear-gradient(60deg, #ccc 25%, transparent 25%, 
0015                                    transparent 75%, #ccc 75%, #ccc);
0016}
0017</style>
0018<body>...</body>

Demo

Delta

0000<style>
0001body {
0002  background-size: 90px 90px;
0003  background-position: 0 0, 45px 45px, 90px 90px;
0004  background-image: linear-gradient(30deg, #999 10%, transparent 10%, 
0005                                    transparent 90%, #999 90%, #999), 
0006                    linear-gradient(150deg, #999 10%, transparent 10%, 
0007                                    transparent 90%, #999 90%, #999), 
0008                    linear-gradient(30deg, #999 10%, transparent 10%, 
0009                                    transparent 90%, #999 90%, #999);
0010}
0011</style>
0012<body>...</body>

Demo

Delta Min

0000<style>
0001body {
0002  background-size: 90px 90px;
0003  background-position: 0 0, 45px 45px, 90px 90px;
0004  background-image: linear-gradient(30deg, #999 5%, transparent 5%, 
0005                                    transparent 95%, #999 95%, #999), 
0006                    linear-gradient(150deg, #999 5%, transparent 5%, 
0007                                    transparent 95%, #999 95%, #999), 
0008                    linear-gradient(30deg, #999 5%, transparent 5%, 
0009                                    transparent 95%, #999 95%, #999);
0010}
0011</style>
0012<body>...</body>

Demo

Drops

0000<style>
0001body {
0002  background-size: 24px 24px;
0003  background-position: 24px 24px;
0004  background-image: linear-gradient(45deg, #ccc 2px, #fff 2px);
0005}
0006</style>
0007<body>...</body>

Demo

Notepad

0000<style>
0001body {
0002  background-size: 100% 32px;
0003  background-image: linear-gradient(90deg, transparent 160px, 
0004                                    #00f 160px, #ccc 161px, 
0005                                    transparent 161px), 
0006                    linear-gradient(#ccc 1px, transparent 1px);
0007}
0008</style>
0009<body>...</body>

Demo