6 utili code snippets per i vostri progetti pronti all’uso

6 utili code snippets per i vostri progetti pronti all’uso

Nell’articolo di oggi vi presento 6 utilissimi code snippets per i vostri progetti, utilissimi per velocizzare le vostre fasi di sviluppo!

Standard html5 template

<!doctype html>
<html lang="it-IT">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>Titolo</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>
<h1>Targetweb Start page!</h1>
</body>
</html>

Clearfix CSS

.clearfix:before, .container:after { content: ""; display: table; }
.clearfix:after { clear: both; }

/* IE 6/7 */
.clearfix { zoom: 1; }

Per usarlo vi basterà usare la classe all’interno dell’elemento a cui volete dare il clearfix (destro e sinistro).

Reset CSS

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; }

Implementare font con la tecnica @font face

Avete un font e volete usarlo sul vostro prossimo progetto? Usate questo codice:

@font-face{ 
  font-family: 'Targetweb';
  src: url('trg.eot');
  src: url('trg.eot?#iefix') format('embedded-opentype'),
    url('trg.woff') format('woff'),
    url('trg.ttf') format('truetype'),
    url('trg.svg#webfont') format('svg');
}

h1 { font-family: 'Targetweb', sans-serif; }

Meta tag per lo sviluppo responsive

<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">

Implementare media con HTML5 (Audio e Video)

<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>

Questo articolo ti è stato utile? Condividilo sui tuoi social network preferiti!

Image Credits “Code” disponibile su Shutterstock – Code image

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.

Up Next:

Come creare pagina autori Wordpress con lista e profili social

Come creare pagina autori Wordpress con lista e profili social