8 Code Snippets untuk Project Website Anda - Code Script yang Anda butuhkan untuk membuat sebuah Website baru Anda yang patut diperhitungkan. Beberapa pilihan yang dapat anda gunakan untuk memaksimalkan kualitas dan kinerja Website/blog Anda, banyak cara sebenarnya namun ke
8 Code Snippets ini menurut saya Recommended Tips.
 |
| 8 Code Snippets untuk Project Website Anda |
Oke, lanjut bacanya sob. Jadi berikut ini ke 8 Code Snippets yang dapat anda gunakan.
1. Basic HTML5 Page Template
Pertama untuk membuat Website Anda dapat meng include kan basic template HTML 5 ini.
<!doctype html>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Default Page Title</title>
<link rel="shortcut icon" href="favicon.ico">
<link rel="icon" href="favicon.ico">
<link rel="stylesheet" type="text/css" href="styles.css">
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"> </script>
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
</body>
</html>
2. Clearfix for CSS Floats
Anda bisa lebih mendalami tentang CSS Clearfix jika belum paham betul, sudah banyak yang membahasnya.
.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }
/* IE 6/7 */
.clearfix { zoom: 1; }
3. CSS Browser Resets
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
outline: none;
}
html { height: 101%; } /* always display scrollbars */
body { font-size: 62.5%; line-height: 1; font-family: Arial, Tahoma, Verdana, sans-serif; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: bold; }
input { outline: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { border: 0; max-width: 100%; }
a { text-decoration: none; }
a:hover { text-decoration: underline; }
4. Full CSS3 Gradients
background-color: #000;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#bbb', endColorstr='#000');
background-image: -webkit-gradient(linear, left top, left bottom, from(#bbb), to(#000));
background-image: -webkit-linear-gradient(top, #bbb, #000);
background-image: -moz-linear-gradient(top, #bbb, #000);
background-image: -ms-linear-gradient(top, #bbb, #000);
background-image: -o-linear-gradient(top, #bbb, #000);
background-image: linear-gradient(top, #bbb, #000);
5. CSS3 Transforms
-webkit-transform: perspective(250) rotateX(45deg);
-moz-transform: perspective(250) rotateX(45deg);
-ms-transform: perspective(250) rotateX(45deg);
-o-transform: perspective(250) rotateX(45deg);
transform: perspective(250) rotateX(45deg);
6. Custom @font-face Typography
@font-face{
font-family: 'MyFont';
src: url('myfont.eot');
src: url('myfont.eot?#iefix') format('embedded-opentype'),
url('myfont.woff') format('woff'),
url('myfont.ttf') format('truetype'),
url('myfont.svg#webfont') format('svg');
}
h1 { font-family: 'MyFont', sans-serif; }
7. HTML Meta Tags for Responsive Layouts
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="HandheldFriendly" content="true">
8. HTML5 Embedded Media
<video poster="images/preview.png" width="1280" height="720" controls="controls" preload="none">
<source src="media/video.mp4" type="video/mp4"></source>
<source src="media/video.webm" type="video/webm"></source>
<source src="media/video.ogg" type="video/ogg"></source>
</video>
<audio controls="controls" preload="none">
<source src="music.ogg" type="audio/ogg">
<source src="music.mp3" type="audio/mpeg">
</audio>
Oke, demikian artikel tentang
8 Code Snippets untuk Project Website Anda. Semoga dapat menginspirasi Anda.
