No. 1 Background Gambar
<style class="no repeat-styles"> *{ margin:0px; padding:0px;} body { background:url(http://Link Gambar.jpg); background-size:cover; background-repeat:no-repeat; font-family: "Open Sans", sans-serif; font-size: 11px; } </style>
No. 2 Background Gambar
<style class="top-styles"> body { background-image: url("http://Lin Gambar.jpg"); background-repeat: repeat-x; } </style>
No. 3 Background Gambar
<style class="left-styles"> body { background-image: url("https://Link Gambar.jpg"); background-repeat: repeat-y; } </style>
No. 4 Background Gambar
<style class="center-styles"> body { background-image:url(Link Gambar.jpg ); background-repeat:initial; } </style>
No. 5 Background Warna
<style class="warna-styles"> body { background-color:#000; } </style>
No. 6 Background Warna
<style class="warna-styles"> /*Time for the CSS*/ * {margin: 0; padding: 0;} body {background: #000;} </style>
No. 7 Background Gambar
<style class="bk-center-styles"> body {background-image: url(http://Link Gambar.jpg) ;color:red;height:100%;overflow:hidden;} </style>
No. 8 Background Gambar
<style class="Gambar-Warna-styles">
body {
background-image : url("https://Link Gambar.png");
background-image : repeat;
background-color : #000;
}
</style>
No. 9 Kotak Area
.kotak { padding:10px; margin-top:5px; margin-bottom:10px; border-left: 10px solid #0b5394; border-top:1px solid #ddd; border-bottom:1px solid #eee; border-right:1px solid #eee; box-shadow:0px 3px 3px #aaaaaa; background: url(https://#.png) no-repeat center center;} <div class="kotak"> Your Text center </div> <div class="kotak" style="overflow-x: scroll; overflow-y:hidden; padding: 10px; width: 548px;"> Your Text scroll left right </div> <div class="kotak" style="overflow: auto; height: 80px;" > Your Text scroll up and down </div>
No.10 Kotak Area Shine
<style type="text/css">
.Mys2010:hover:after, .Mys2010:hover:before {left: 70%;opacity: 1;}
.Mys2010:hover .info:after {-moz-transform: rotate(-200deg);-ms-transform: rotate(-200deg);-webkit-transform: rotate(-200deg);transform: rotate(-200deg);opacity: 1;right: -170%;display: block}
.Mys2010:hover .info:before {opacity: 1;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat;-moz-transition-property: "background, opacity";-o-transition-property: "background, opacity";-webkit-transition-property: "background, opacity";transition-property: "background, opacity";-moz-transition-duration: ".6s, .6s";-o-transition-duration: ".6s, .6s";-webkit-transition-duration: ".6s, .6s";transition-duration: ".6s, .6s"}
.info {background: -moz-linear-gradient(70deg, #888888, #aaaaaa);background: -webkit-linear-gradient(70deg, #888888, #aaaaaa);background: -ms-linear-gradient(70deg, #888888, #aaaaaa);background: -o-linear-gradient(70deg, #888888, #aaaaaa);background: linear-gradient(20deg, #888888, #aaaaaa);border-radius: 5px;position: relative;overflow: hidden;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9), 0px 0px 10px rgba(0, 0, 0, 0.2);border-left: 1px solid rgba(255, 255, 255, 0.2);border-right: 1px solid rgba(255, 255, 255, 0.4);border-bottom: 1px solid rgba(255, 255, 255, 0.2);padding: 30px;font-family: sans-serif}
.info:before {opacity: 0;content: "";position: absolute;pointer-events: none;top: 0;left: 0;right: 0;bottom: 0;background: -moz-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: -webkit-linear-gradient(left, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);background: linear-gradient(to right, rgba(255, 255, 255, 0) 20%, #ffffff 75%, rgba(255, 255, 255, 0) 90%);-moz-background-size: 100% 1px, 100% 100%;-o-background-size: 100% 1px, 100% 100%;-webkit-background-size: 100% 1px, 100% 100%;background-size: 100% 1px, 100% 100%;background-repeat: no-repeat}
.info:after {opacity: 0;position: absolute;pointer-events: none;top: -200%;width: 400%;right: -105%;bottom: -100%;content: "";background: -moz-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0.4) 50%);-moz-background-size: 50% 100%;-o-background-size: 50% 100%;-webkit-background-size: 50% 100%;background-size: 50% 100%;background-repeat: no-repeat;-moz-transform: rotate(-90deg);-ms-transform: rotate(-90deg);-webkit-transform: rotate(-90deg);transform: rotate(-90deg);-moz-transition-property: all;-o-transition-property: all;-webkit-transition-property: all;transition-property: all;-moz-transition-duration: 0.6s;-o-transition-duration: 0.6s;-webkit-transition-duration: 0.6s;transition-duration: 0.6s}
</style>
<div class="Mys2010">
<div class="info">
Your Text
</div>
</div>
No. 11 Link Gambar
<img src="Link Gambar.jpg" alt="judul" width="100" height="100" />
No. 12 Link Gambar
<img src="Link Gambar.jpg"style="float:right;" alt="judul" width="100" height="100" />
No. 13 Kotak Iframe
<iframe border="0" src="http://Your Link" style="border: 0px; height: 350px; width: 800px;"></iframe>
No. 14 Kotak Area Warna
<style class="box color-styles"> * { padding : 0px; margin : 0px; } .kotak { width : 300px; height : 150px; color : #fff; background-color : blue; float : left; } </style> <div class="kotak"> Your Text </div>
No. 15 Background Gradient
<style>
body{
background: #dad;
background: -webkit-linear-gradient(45deg, #dad, green);
background: -moz-linear-gradient(45deg, #dad, green);
background: -o-linear-gradient(45deg, #dad, green);
background: linear-gradient(45deg, #dad, pink);
min-height: 100%;
}
</style>
No. 16 Top Title
<style class="TopTitle-styles">/* Simple Reset */
html {
font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
-o-transition-duration: 0.3s;
-moz-transition-duration: 0.3s;
-webkit-transition-duration: 0.3s;
transition-duration: 0.3s;
padding: 0px 0;
position: fixed;
top: 0;
width: 100%;
background: #dcecf4;
border-bottom: 3px solid #63a5c4;
}
</style>
<header>
<div class="page-wrap clearfix">
<center>
<h1>
<a href="http://css.com">Myscript2010</a></h1>
</center>
</header>
<section id="main">
<div class="page-wrap">
<link rel="stylesheet" type="text/css" href="https://sites.google.com/site/pelajaranku1/fileku/fixed.css"> <header> <div class="page-wrap clearfix"> <center> <h1> <a href="http://css.com">Myscript2010</a></h1> </center> </header> <section id="main"> <div class="page-wrap">
No. 17 Double Link
<p align="center"> <a class="Mys2010" href="http://Link Title" target="_blank" title="Judul"><span>Judul</span> <a class="Mys2010" href="http://Link Title" target="_blank" title="Judul" style="margin-left: 300px"><span>judul 2</span></a> </div>
No. 18 Top Bottom Link Img
*:before, *:after { box-sizing: border-box; } .hide { display: none !important; } button { margin: 0; padding: 0; border: 0; outline: 0; background: transparent; } /* GRADIEND */ .ap { position: fixed; right: 0; bottom: 0; left: 0; height: 60px; margin: auto; font-family: Arial, sans-serif; font-size: 14px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; color: #333; background: #000; border-top: 2px solid #f0f; z-index: 9999; } <!-- GRADIEND --> <div class="ap" id="ap"> <div align="center"> <div style="background-image: url('http:https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiUNZmvBsD876qhyphenhyphenQC_U3OgCJyYxPQLJ1Ht761d9ExRZqSkJuxxJ6M4UCBAKsbzPkzWCX9j5vM1d7terN82Am_sWgOmnSX6gRaCdVx4itfa4X-0HGAvSGP7nGgCKu2nhyphenhyphenCqdsw0fa6Ssdw/s1600-r/sky_blue_gradient_background_mys2010.jpg" alt="img gradiend" width="700" height="170"'); background-repeat: no-repeat; background-position: center;"> <p style="text-align: center;"> <b><font size="2" color="green"face="arial"> TEKS<b> Diatas Gambar</p> </p> </div> </div> </div> </div> </div> </div>
No. 19 Figure
<figure> <div class="picture"> <a href="http://Link Title" target="_blank" title="Judul"> <img src="http://Link Gambar" alt=""/> <div class="image-overlay-link"></div> </a> </div> </figure>
No. 20 Top Bottom Link Redirect
/* GRADIEND */
.ap {
position: fixed;
right: 0;
bottom: 0;
left: 0;
height: 60px;
margin: auto;
font-family: Arial, sans-serif;
font-size: 14px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: #333;
background: #000;
border-top: 2px solid #f0f;
z-index: 9999;
}
<!-- GRADIEND -->
<div class="ap" id="ap">
<div align="center">
<script type="text/javascript"><!--
function delayer(){
window.location = "http://demoshow-mys2010.blogspot.co.id/2016/01/sahre-playing-with-math-in-js.html"}//-->
</script></head><body onLoad="setTimeout('delayer()', 35000)"><h2>
Waiting for a change in background</h2><p>
<img src="http://www.dynamicdrive.com/dynamicindex4/ajaxloadr.gif" name="e902" border="0" width="28" height="29" /></a>
<p style="text-align: center;">
No. 21 Title center
/* HIDE */
body {#);
font-size: 17px;color:green ;height:100%;overflow:hidden;text-shadow: 0 -0px 0 black, 0 0px 30px aqua, 0 0px 50px aqua;}
div {
display: table-cell;
text-align: center;
vertical-align: middle;
}
All Sources
Edited by. Myscript2010
Edited by. Myscript2010
