Create Box Model Visibility in CSS

<html> <head> <title></title> <style type=”text/css”> * .box { display: static; overflow: visible; visibility: visible; width: 160px; height: 150px; padding: 30px; border-top: 30px solid gray; border-bottom: 30px solid black; border-left: 30px solid gray; border-right: 30px solid black; margin-left: 230px; margin-top: 80px; background-color: #ccc; } </style> </head> <body> <h1>Box Model</h1> <div class=”box”></div> </body> </html>

Create Accordion with CSS

<!DOCTYPE html> <html> <head> <style type=’text/css’> nav a { display: block; } summary { cursor: pointer; } summary::-webkit-details-marker { display: none; } </style> </head> <body> <details> <summary>Heading #1</summary> <nav> <a href=”#”>Link A</a> <a href=”#”>Link B</a> <a href=”#”>Link C</a> </nav> </details> </body> </html>

Text Shadow

<html> <head> <title>Text Shadow </title> <style rel=”stylesheet” type=”text/css”> h1 { font-family: arial; } h1.complex { text-shadow: 3px 3px red, yellow -3px 3px 2px, 3px -3px } </style> </head> <body> <h1 class=”complex”>Complex text shadow</h1> </body> </html>

Create page number in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> .online { border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; border: 2px solid #AAA; width: 20px; text-align: center; padding: 2px; display: inline-block; } .test { display: inline-block; } </style> </head> <body> <div class=”test”> <div class=”online”>0</div> <div class=”online”>1</div> <div class=”online”>2</div> <div class=”online”>3</div> <div class=”online”>4</div> <div class=”online”>5</div> <div class=”online”>6</div> <div class=”online”>7</div> <div class=”online”>8</div>

Image Slideshow using CSS3

<!DOCTYPE html> <html> <head> <style type=’text/css’> body:hover { -webkit-animation-play-state: paused; -moz-animation-play-state: paused; } #tech-slideshow { height: 221px; width: 332px; position: relative; overflow: hidden; } #tech { height: 221px; width: 660px; background: url(image.jpg); position: absolute; top: 0; left: 0; height: 100%; -webkit-animation-play-state: paused; -webkit-animation: moveSlideshow 10s linear infinite; -moz-animation-play-state: paused; -moz-animation: moveSlideshow 10s linear infinite; }

Fly up when hovering effect in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> ul { list-style-type: none; } li { float: left; margin: 5px; } a { display: block; line-height: 2500px; height: 100px; width: 100px; border-radius: 0 100px 100px 100px; text-align: center; background-color: #ccc; color: transparent; text-shadow: 0px 0px 100px rgba(0, 0, 0, 0); -webkit-transition: all .6s ease-in; } a:hover { background-color:

Enlarge grid cell in animation in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> ul, li { list-style: none; padding: 0; margin: 0; } ul { width: 400px; } li, .item { width: 100px; height: 100px; } li { float: left; margin: 5px; position: relative; } .item { background-color: #eee; border: 1px solid #ccc; position: absolute; z-index: 1; -webkit-transition: all 0.1s ease-in-out; }

Create CSS3 animation on width

<!DOCTYPE html> <html> <head> <style type=’text/css’> #demo { width: 100px; height: 100px; background: red; transition: width 1s; -moz-transition: width 1s; -webkit-transition: width 1s; -o-transition: width 1s; } #demo:hover { width: 300px; } </style> </head> <body> <div id=”demo”></div> </body> </html>

Create two borders in css

<!DOCTYPE html> <html> <head> <style type=’text/css’> #borders { position: relative; z-index: 10; padding: 30px; background: #fff; border: 2px solid #390; } #borders:before { content: “”; display: block; position: absolute; z-index: -1; top: 2px; left: 2px; right: 2px; bottom: 2px; border: 2px solid #36F } </style> </head> <body> <div id=”borders”></div> </body> </html>