Page 1

===============RESET================ html, body, div, dl, dt, dd, ul, h1, h2, h3, pre, form, label, fieldset, input, p, blockquote, th, td { margin:0; padding:0 } table{ border-collapse:collapse; border-spacing:0; } fieldset, img { border:0 } ul { list-style:none } ================================================ <meta name="viewport" content="width=960; maximum-scale=1.0;"> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!--[if IE 8]> <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE8" /> <![endif]--> <meta name="Description" content="We convert your dreams and designs into fast-loading."> <meta name="Keywords" content=" semantics, markup, web design, web development, scottsdale"> <meta name="author" content="Stephanie Sullivan"> <link rel="shortcut icon" href="favicon.ico" /> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <script type="text/javascript" src="joshhemsley.com/Hemsley_files/jquery.js"></script> <script type="text/javascript" src="ContactForm.js"></script> <link rel="stylesheet" type="text/css" href="stile.css" /> <script type="text/javascript" src="js/jquery-1.8.2.min.js"></script> <!--[if lt IE 9]> <script src="js/html5.js"></script> <link rel="stylesheet" href="css/ie.css" /> <! [endif]-->

IMPORT <style type="text/css"> @import url(foglio_di_stile.css); </style> =============================================== h1, h2, h3{


font-family:Arial, Helvetica, sans-serif; font-weight:normal; } ========================================== p{ text-indent: 10px; } div.contenuto { text-indent: 10%; } =========================================

p:first-child { color:red; } p:first-line { color: blue; } p:first-letter { color: red; font-weight: bold; } =========================================== h1:before { content: url(immagine.gif); } oppure h1:before { content: "Il titolo Ă&#x2039;..."; } ================================ h1 { text shadow: blue 2px 2px 3px; } selettore {text-shadow: <valore colore> <valore x> <valore y> <valore blur>;} p{ text-transform: capitalize; }


h1 { text-transform: uppercase; } p{ white-space: pre; } div { white-space: nowrap; } h1 { letter-spacing: 5px; } div.testo { word-spacing: 5px; } ====================================================== SELEZIONE COLORE TESTO p.giallo::selection {background:#FFDF00;} p.giallo::-moz-selection {background:#FFDF00;} p.arancione::selection {background:#F90;} p.arancione::-moz-selection {background:#F90;} p.viola::selection {background:#C680FF;} p.viola::-moz-selection {background:#C680FF;} ======================================================== GRADIENTE body{ background-color: #440951; background-image: -moz-linear-gradient(top, #b032cb, #440951); background-image: -webkit-gradient(linear, left top,left bottom, from(#b032cb), to(#440951)); background-image: linear-gradient(top, #b032cb, #440951); } CODICE X EXPLORER filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, StartColorStr=#b032cb, EndColorStr=#440951); /* vale solo per IE */

OPPURE p{ background: -moz-linear-gradient(100% 100% 90deg, #B032CB, #440951) repeat scroll 0 0 transparent; height: 160px; margin: 10px auto; width: 220px;


} =========================================================================== =========== BORDER RADIUS -webkit-border-radius: 10px 20px 30px 60px; -moz-border-radius: 10px 20px 30px 60px; border-radius: 10px 20px 30px 60px; =========================================================================== ========== FONT FACE @font-face { font-family: "CantarellRegular"; font-style: normal; font-weight: normal; src: url('cantarell-regular-webfont.eot') format("eot"), url('cantarell-regular-webfont.woff') format("woff"), url('cantarell-regular-webfont.ttf') format("truetype"), url('cantarell-regular-webfont.svg') format("svg"); } @font-face { font-family: "CantarellBold"; font-style: normal; font-weight: normal; src: url('cantarell-bold-webfont.eot') format("eot"), url('cantarell-bold-webfont.woff') format("woff"), url('cantarell-bold-webfont.ttf') format("truetype"), url('cantarell-bold-webfont.svg') format("svg"); } h1, h2, h3, h4, h5, h6 { font-family: 'CantarellRegular', Arial, sans-serif; font-style: normal; border-bottom: 1px dotted rgb(51, 51, 51); } ================================================ ANCORA <a name=“ancora”> <a href=“#ancora” > vai qui </a> =============================================== 1.Valore doppio nei margini quando si usa la proprietà float nei div Molto spesso capita di voler “affiancare” 2 div, magari uno che contiene del testo e l’altro delle immagini. Se impostiamo un margine a volte il valore risulta doppio in IE 6. #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; } Soluzione


Aggiungete la proprietà display:inline e tutto si sistemerà. #content { float: left; width: 500px; padding: 10px 15px; margin-left: 20px; display:inline; } __________________________________________________________________________________ 2. Le proprietà di margin e padding compromettono le dimensioni e la posizione dei contenuti. Quando si vuole specificare la larghezza per ogni div non bisogna specificare le proprietà di padding e margin. #main-div{ width: 150px; border: 5px; padding: 20px; } Soluzione Create un div all’interno del precedente e impostate qui il margin e il padding, in questo modo. #main-div{ width: 150px; } #main-div div{ border: 5px; padding: 20px; } _____________________________________________________________________________________ 3. La trasparenza delle PNG non mantenute Questo è uno dei problemi più frequenti, cioè le immagini salvate in PNG, con sfondo trasparente non vengono visualizzate correttamente su internet explorer 6. Soluzione Impostate questa proprietà: .trans { background-color: transparent; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src=”yourPNG.png”, sizingMethod=”crop”); } _____________________________________________________________________________ 4. Il “pallino” delle liste non è allineato con il testo Questo succede quando abbiamo un top padding negli elementi della lista (<li>..) Soluzione Mettete un top margin, anziché un top padding. _______________________________________________________________________________


5. Se hai 2 o 3 colonne messe una vicino all’altra tramite la proprietà float a volte l’ultima colonna va sotto le altre Altro problema che a me è capitato qualche volta, dove l’ultima colonna, invece di stare di fianco alle altre va sotto. #content { float:left; width: 300px; margin-right: 10px; display:inline; } #sidebar { float:left; width: 100px; display:inline; } Soluzione Mettete la proprietà overflow:hidden in tutti i div. #content { float:left; width: 300px; margin-right: 10px; display:inline; overflow:hidden; } #sidebar { float:left; width: 100px; display:inline; overflow:hidden; } ________________________________________________________________________________________ 6. Box Model Il bug più comune, più conosciuto e più mal digerito da ogni sviluppatore e designer. Immaginiamo di avere un box di questo tipo: div#box { width: 100px; border: 2px solid black; padding: 10px; } IE6 calcolerà la larghezza complessiva del box in 100px, mentre tutti i browser moderni la calcoleranno in 124px, poichè alla width di 100px sommiamo 10px di padding sinistro, 10px di padding destro e 4px totali di bordi laterali. Per ovviare a questo bug utilizziamo dichiarazioni specifiche per i browser: div#box {


width: 100px; _width: 124px; border: 2px solid black; padding: 10px; } _____________________________________________________________________________________ 7. Capolettera p.xx_text:first-letter { color:#A156A2; float:left; font-family:Georgia, "Times New Roman", Times, serif; font-size:63px; font-weight:bolder; line-height:42px; padding:5px 8px 0px; } _______________________________________________________ p:first-letter { font-size: 62px; color:#369 line-height: 58px; float: left; padding: 0 5px 0; display:block; background-color:#99C; ____________________________________________________________________________________ 8. Formattazione di un HR hr { height:0; border-top:1px solid #a156a2; border-bottom:none; border-right:none; border-left:none; } _____________________________________________________________________________________ 9. clearfix .clearfix { clear:both; height:0; line-height:6px; margin:0; padding:0; background-color:#000 } _____________________________________________________________________________________ 10. Collegamento Immagine senza bordo a img{border:0 none !important;}


_____________________________________________________________________________________ 11. Menu orizzontale <head> <title>Figura 5.13</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> body { background:#FFF; color:#000; font:80% Verdana, Geneva, Arial, Helvetica, sans-serif; } .menuNavigazione { margin:0; padding:5px 0; } .menuNavigazione li { display:block; float:left; } .menuNavigazione li a.on{ background-color:#FFFFFF; color:#307CD2; text-decoration:none; } a, a:link, a:visited { background:#307cd2; color:#FFF; height:0; padding:5px 15px; text-decoration:none; margin:-5px 0; border-right:2px solid #fff; } a:hover, a:focus, a:active { background:#FFF; color:#000; text-decoration:underline; } </style> </head> ________________________________ <body> <ul class="menuNavigazione"> <li> <a class="on" href="#">Prima Voce</a></li> <li><a href="#">Seconda Voce</a></li> <li><a href="#">Terza Voce</a></li> <li><a href="#">Quarta Voce</a></li> <li><a href="#">Quinta Voce</a></li> </ul> </body> </html> ____________________________________________________________________________________ 12. Formattazione paragrafi


h1.titolo { text-align: center } p.articolo { text-align: justify } ___________________________________________________________________________________ 13. Form Mail <body> </form><form action=â&#x20AC;?....." method="post"> <fieldset> <legend>Dati anagrafici</legend> <label for="Nome">Nome</label><br /> <input type="text" size="50" id="Nome" name="Nome" /><br /> <label for="Cognome">Cognome</label><br /> <input type="text" size="50" id="Cognome" name=" Cognome " /><br /> <label for="DataNascita">Data di Nascita</label><br /> <input type="text" size="20" id=" DataNascita " name=" DataNascita " /><br /> </fieldset> <fieldset> <legend>Indirizzo</legend> <label for="via">VIA</label><br /> <input type="text" size="50" id="via" name="via" /><br /> <label for="civico">Numero civico</label><br /> <input type="text" size="3" id="civico" name="civico" /><br /> <label for="cap">CAP</label><br /> <input type="text" size="5" id="cap" name="cap" /><br /> <label for="citta"> Citt&agrave; </label><br /> <input type="text" size="30" id=" citta " name=" citta " /> <br /><br /> <input name="ckprivacy" type="checkbox" />Consenso <textarea id="txtprivacy" rows="3" style="font-size:11px; width: 398px;">Il Mittente prende atto che il trattamento dei propri dati personali &egrave; necessario per evadere la sua richiesta. Tali dati non saranno comunicati o diffusi a terzi, senza il consenso del mittente. Titolare del trattamento dei dati personali del mittente &egrave; la societ&agrave; xxxxxx S.p.A., il trattamento dei dati del mittente &egrave; effettuato nel rispetto del Dlgs 196/2003</textarea></div> <br /><br /> <input type="submit" name="button" id="button" value="Invia" onclick="javascript:Email();"/> </fieldset> </form> <p>&nbsp;</p> <p>&nbsp; </p> <p>&nbsp;</p> </form> <script type="text/javascript" language="javascript" > function Email() { var nome = document.getElementById("txtnome").value ; var cognome = document.getElementById("txtcognome").value; var datnas = document.getElementById("txtdatadinascita").value ; var via = document.getElementById("txtvia").value;


var civico = document.getElementById("txtNumerocivico").value ; var note = document.getElementById("txtnote").value; var check = document.getElementById("ckprivacy"); if (check.checked == true){ if ((nome != '') && (cognome != '') && (mail != '')){ if ((mail.indexOf("@") == (-1)) || (mail == '') || (mail == "undefined") ) { alert("Inserire un indirizzo email valido."); document.getElementById("txtmail").focus(); }else{ location.href = 'mailto:' + 'panan@tiscali.it ' + '?Subject=' + 'dati registrazione' + '&Body=Nome:' + nome + '%0D%0ACognome:' + cognome + '%0D%0AData di nascita:' + datnas + '%0D%0AVia:' + via + '%0D%0ANumerocivico:' + civico + '%0D%0ACap:' + cap + '%0D%0A%0D%0A %0D%0AIl Mittente prende atto che il trattamento dei propri dati personali e\' necessario per evadere la sua richiesta. Tali dati non saranno comunicati o diffusi a terzi, senza il consenso del mittente. Titolare del trattamento dei dati personali del mittente e\' la societa\'xxxxxx S.p.A., il trattamento dei dati del mittente e\' effettuato nel rispetto del Dlgs 196/2003'; } }else{ alert('ATTENZIONE!! I campi Nome, Cognome e mail sono obbligatori.'); } }else{ alert('Devi compilare i campi'); } } </script> </body> __________________________________________________________________________________________ ________ 14. Esempio di < /hr> hr { height:0; border-top:1px solid #70594c; border-bottom:none; border-right:none; border-left:none; padding:4px 4px; margin-left:45px; margin-right:45px;} __________________________________________________________________________________________ ________ 15. Niente bordi ad immagini a img { border:0 none !important; } __________________________________________________________________________________________ ________ 16. CARATTERI SPECIALI (devono essere digitati in caratteri minuscoli) Ă &agrave;


é &eacute; è &egrave; À &Agrave; È &Eacute; ì &igrave; __________________________________________________________________________________________ _ 17. FILTRO OPACITA' filter: alpha(opacity=25); -moz-opacity: 0.25; opacity: 0.25; __________________________________________________________________________________________ ________ 18. LINK SCRIPT <script type="text/javascript" src="highslide/highslide-with-gallery.js"></script> <link rel="stylesheet" type="text/css" href="highslide/highslide.css" /> __________________________________________________________________________________________ ________ 19. WEB FONT @font-face { font-family: Gentium; src: url(Gentium.eot) /* can't use format() */; } /* Font definition for other browsers */ @font-face { font-family: Gentium; src: url(Gentium.ttf) format("opentype"); } h1 { font-family: "bitsumis", sans-serif;} 20. SPRITE OVERFLOW <div class="affiliates"> <a href="#"><img src="rokkan.gif" alt="" /></a> <a href="#"><img src="designcubicle.gif" alt="" /></a> </div> .affiliates a { width: 204px; height:182px; overflow: hidden; float: left; } .affiliates img { border: none; } .affiliates a:hover img { margin-top: -182px; }


__________________________________________________________________________________________ ________ Immagine di sfondo al 100% <body> <div id="bg"> <div> <table cellpadding="0" cellspacing="0"> <tr> <td><img alt="" src="esempio_immagine-di-sfondo-a-tutto-schermo_files/bg.jpg" /></td> </tr> </table> </div> </div> </body> __________________________________CSS html, body, #bg, #bg table, #bg td { height:100%; overflow:hidden; width:100%; } #bg div { height:200%; left:0; position:absolute; top:0; width:200%; } #bg img { margin:0 auto; min-height:50%; min-width:50%; } #bg td { text-align:left; vertical-align:top; } ==================================== TRANSITION div{-webkit-transition: 500ms; -o-transition: 500ms; transition: 500ms;} div:hover{ -webkit-transform: perspective(1300px) rotateX(-180deg); -ms-transform: perspective(1300px) rotateX(-180deg); -o-transform: perspective(1300px) rotateX(-180deg); transform: perspective(1300px) rotateX(-180deg);}


-webkit-transform: translateX(100%); -ms-transform: translateX(100%); -o-transform: translateX(100%); transform: translateX(100%); -webkit-transform: rotateY(50deg); -ms-transform: rotateY(50deg); -o-transform: rotateY(50deg); transform: rotateY(50deg); -webkit-transform: rotateX(90deg) translateZ(1em); -ms-transform: rotateX(90deg) translateZ(1em); -o-transform: rotateX(90deg) translateZ(1em); transform:rotateX(90deg) translateZ(1em); rotateX(90deg) translateZ(1em);

.parent { perspective: 1000px; } .child { transform: rotateY(50deg); } ==================================== <!DOCTYPE html> <html lang="en"> <meta content="text/html; charset=UTF-8" http-equiv="Content-Type"> <meta charset="utf-8"> <title>Kendo UI - The Art of Web Development</title> <meta content="Richard Shepherd" name="author"> <meta name="description" content="The HTML5-based, jQuery-powered A-Z solution."> =========================================================================== ============= <link rel="shortcut icon" href="favicon.ico"> <link type="image/x-icon" href="favicon.gif" rel="shortcut icon"> =========================================================================== ============ <!--[if lt IE 9]> <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> =========================================================================== ===========


<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, userscalable=no"/> =========================================================================== ======= <html class="js flexbox canvas canvastext webgl no-touch geolocation postmessage nowebsqldatabase indexeddb hashchange history draganddrop no-websockets rgba hsla multiplebgs backgroundsize borderimage borderradius boxshadow textshadow opacity cssanimations csscolumns cssgradients no-cssreflections csstransforms no-csstransforms3d csstransitions fontface video audio localstorage sessionstorage webworkers applicationcache svg inlinesvg smil svgclippaths wfffdaxwebpro-n4-active wf-ffdaxwebpro-n7-active wf-chaparralprocaption-i4-active wf-active" lang="en"> =========================================================================== ======= hr { border-bottom: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(0, 0, 0, 0.2); } =========================================================================== ======= <!--[if lt IE 9]> <script src="html5.js"></script> <![endif]--> =========================================================================== ======== li:nth-child(odd) { color: red; } li:nth-child(even) { color: blue; } li:first-child { color: red; } li:nth-child(1) { color: red; } =========================================================================== =========== background-image: url(/images/5.png), url(/images/bluesky.png); background-position: 30px 10px, 0 0; background-repeat: no-repeat, repeat-x; background: url(/images/5.png) 30px 10px no-repeat, url(/images/bluesky.png) 0 0 repeat-x =========================================================================== ============== p { color: rgba(100%, 50%, 0%, 0.1) } =========================================================================== ============== <article> <header> <hgroup> <h1>Titolo dell'articolo</h1> <h2>Sottotitolo dell'articolo</h2> </hgroup> <p><time datetime="2010-03-20">20 Marzo, 2010</time></p> </header> <p>Lorem Ipsum dolor set amet</p> </article> =========================================================================== ========= <body> <figure> <img src="http://ejohn.org/files/jeresig-wordpress-sm.jpg"/> </figure>


</body> =========================================================================== === ie-ccs.js <script type="text/javascript" src="[JS library]"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <noscript><link rel="stylesheet" href="[fallback css]" /></noscript> <![endif]--> ================================================================== <script type="text/javascript" src="jquery.js"></script> <!--[if (gte IE 6)&(lte IE 8)]> <script type="text/javascript" src="selectivizr.js"></script> <![endif]--> =========================================================================== Just change your link from: <a href="yourdoc.pdf">Download</a> to: <a href="yourdoc.pdf" onclick="pageTracker._trackPageview('/download/yourdoc.pdf');">Download</a> =========================================================================== ===== Le righe successive sono classi condizionali per internet explorer: [if lt IE 7] se incontra una versione inferiore di internet explorer 7, [if IE 7] esattamente la versione 7 di explorer [if gt IE 8] versioni superiori di internet explorer 8

======================================== RESET MEYER /* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ 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; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; }


Codice  
Read more
Read more
Similar to
Popular now
Just for you