Tag: Html

10/06/201418/10/2016 da Mr Codematrix

HTML 5 Video

Una delle novità del Html5 e la possibilità di inserire un proprio video senza gestione di flash o altro.
Ora vediamo un semplicissimo esempio.

<!DOCTYPE html>
<html>
	<head>
		<title>Esempio gestione di un video html5</title>
	</head>
	<body>
		<video width="320" height="240" controls>
		  <source src="esempio.mp4" type="video/mp4">
		  <source src="esempio.ogg" type="video/ogg">
		Il tuo Browser non supporta la gestione video di html5.
		</video> 
	</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Esempio gestione di un video html5</title>

</head>

<body>

Il tuo Browser non supporta la gestione video di html5.

</video>

</body>

</html>

09/05/201418/10/2016 da Mr Codematrix

Precaricamento delle immagini

Vediamo come mettere la classica immagine di caricamento prima del immagine da visualizzare ottimo per la realizzazione di gallerie personalizzate.

Codice Html

<!DOCTYPE html>
<html>
<head>
<title>Precaricamento delle immagini</title>
    <link href='style.css' rel='stylesheet' type='text/css'>  
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="load.js"></script>
</head>
<body>
    <div id="caricatore" class="caricamento"></div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Precaricamento delle immagini</title>

</head>

<body>

</body>

</html>

Foglio di stile

div#caricatore {
  border: 1px solid;
}

div#caricatore.caricamento {
  background: url(./img/caricatore.gif) no-repeat center center;
}

div#caricatore {

border: 1px solid;

}

div#caricatore.caricamento {

background: url(./img/caricatore.gif) no-repeat center center;

}

JQuery

// Quando il DOM(Document Object Model) è pronto!
$(function () {
  var img = new Image();

  $(img)
    //Una volta che immagine è stata caricata esegue questo codice.
    .load(function () {
      // Nascondo immagine    
      $(this).hide();
    
      $('#caricatore')
		//Rimuovo la classe caricamento 
        .removeClass('caricamento')
        //Aggiungo la mia immagine
        .append(this);
      // Aggiungo un effetto di disolvenza al immagine
      $(this).fadeIn();
    })
    
	//Gestione Errori
    .error(function () {
		// Notifico che immagine non è stata caricata
		alert( "Immagine non caricata" )	  
    })
    
    // Imposto la src(sorgente) della nostra nuova immagine
    .attr('src', 'http://codematrix.altervista.org/wp-content/uploads/2012/11/schema.png');
});

// Quando il DOM(Document Object Model) è pronto!

$(function () {

var img = new Image();

$(img)

//Una volta che immagine è stata caricata esegue questo codice.

.load(function () {

// Nascondo immagine

$(this).hide();

$('#caricatore')

//Rimuovo la classe caricamento

.removeClass('caricamento')

//Aggiungo la mia immagine

.append(this);

// Aggiungo un effetto di disolvenza al immagine

$(this).fadeIn();

})

//Gestione Errori

.error(function () {

// Notifico che immagine non è stata caricata

alert( "Immagine non caricata" )

})

// Imposto la src(sorgente) della nostra nuova immagine

.attr('src', 'http://codematrix.altervista.org/wp-content/uploads/2012/11/schema.png');

});

10/04/201418/10/2016 da Mr Codematrix

Input AutoComplete

Oggi vediamo come mamma google può semplificare la vita di un programmatore Web.
Questo snippet importa jquery e il file css sempre di mamma google per creare un
inputbox autocomplete in modo semplice e pratico da portare sul vostro portarle Web.

Pagina Html

<!DOCTYPE html>
<html>
<head>
  <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  
  <script>
  $(document).ready(function() {
    $("input#autocomplete").autocomplete({
    source: [
		"ActionScript",
		"AppleScript",
		"Asp",
		"BASIC",
		"C",
		"C++",
		"Clojure",
		"COBOL",
		"ColdFusion",
		"Erlang",
                "Forth",
		"Fortran",
		"Groovy",
		"Haskell",
		"Java",
		"JavaScript",
		"Lisp",
		"Perl",
		"PHP",
		"Python",
		"Ruby",
		"Scala",
		"Scheme"
	]
});
  });
  </script>
</head>
<body style="font-size:60%;">
	<input id="autocomplete" />
</body>
</html>

<!DOCTYPE html>

<html>

<head>

$(document).ready(function() {

$("input#autocomplete").autocomplete({

source: [

"ActionScript",

"AppleScript",

"Asp",

"BASIC",

"C",

"C++",

"Clojure",

"COBOL",

"ColdFusion",

"Erlang",

"Forth",

"Fortran",

"Groovy",

"Haskell",

"Java",

"JavaScript",

"Lisp",

"Perl",

"PHP",

"Python",

"Ruby",

"Scala",

"Scheme"

]

});

</script>

</head>

</body>

</html>

29/03/201418/10/2016 da Mr Codematrix

Effetto Scroll sul Background

Oggi vediamo come creare una immagine con una trasparenza nel testo che scrollando verso il basso da idea che il background si muova verso il basso.

Pagina Html

<!DOCTYPE html>
<html>
<head>
	<title>Effetto scroll immagine</title>
	<link href='style.css' rel='stylesheet' type='text/css'>
</head>
<body>
	<div id="img_height">
		<div><img src="banner.png"/></div>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Effetto scroll immagine</title>

</head>

<body>

</div>

</body>

</html>

Foglio di Stile

/*Imposto Immagine di background che ci sara sotto al nostro banner*/
body
{
	background-image: url('scroll_down.jpg');
	background-position: top center;
	background-repeat: no-repeat;
	background-color: #000;
}

/*Altezza della immagine di background*/
#img_height
{
	height: 6000px;
}

/*Imposto varie caratteristiche del nostro div*/
div div
{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	display: block;
	text-align: center;
}

/*Dimensioni dei bordi delle immagini*/
img
{
	border-left: 10px solid #000;
	border-right: 10px solid #000;
	border-top: 70px solid #000;
	border-bottom: 2000px solid #000;
}

/*Imposto Immagine di background che ci sara sotto al nostro banner*/

body

{

background-image: url('scroll_down.jpg');

background-position: top center;

background-repeat: no-repeat;

background-color: #000;

}

/*Altezza della immagine di background*/

#img_height

{

height: 6000px;

}

/*Imposto varie caratteristiche del nostro div*/

div div

{

position: fixed;

top: 0;

left: 0;

width: 100%;

display: block;

text-align: center;

}

/*Dimensioni dei bordi delle immagini*/

img

{

border-left: 10px solid #000;

border-right: 10px solid #000;

border-top: 70px solid #000;

border-bottom: 2000px solid #000;

}

Da questo link puoi scaricare una versione demo di questo codice.

20/03/201418/10/2016 da Mr Codematrix

Testo con effetto stampato in css

Oggi vediamo come dare al nostro testo un effetto stampato molto utile per creare dei
banner semplice senza usare nessun editor grafico.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Effetto stampato  sul testo con css senza javascript</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<h1>CODEMATRIX</h1>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Effetto stampato sul testo con css senza javascript</title>

</head>

<body>

<h1>CODEMATRIX</h1>

</body>

</html>

Foglio di Stile

h1 {
	/*Applico un ombra con un colore piu chiaro del testo in modo tale che genere un effetto stampato*/
	text-shadow: 0px 1px 1px #088a38;
	/*Colore testo*/
	color: #205e07;
	/*Tipo di Font e grandezza*/
	font: 80px 'COMIC SANS MS';
	/*Colore background*/
	background: green
	/*Nel caso voglio aggiungere un bel background personalizzato*/
	background-image:url("background.jpg");
}

h1 {

/*Applico un ombra con un colore piu chiaro del testo in modo tale che genere un effetto stampato*/

text-shadow: 0px 1px 1px #088a38;

/*Colore testo*/

color: #205e07;

/*Tipo di Font e grandezza*/

font: 80px 'COMIC SANS MS';

/*Colore background*/

background: green

/*Nel caso voglio aggiungere un bel background personalizzato*/

background-image:url("background.jpg");

}

28/02/201418/10/2016 da Mr Codematrix

ToolTip animato con Css

Oggi vediamo come creare un tooltip animato in css senza utilizzare Javascript o Flash.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>ToolTip solo con css senza javascript e flash</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<br><br><br>
	<div align="center">
		<i class="tooltip-block"><b>Test</b><span class="tooltip">Funziono a Bestia</span></i>
	</div>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>ToolTip solo con css senza javascript e flash</title>

</head>

<body>

<i class="tooltip-block"><b>Test</b><span class="tooltip">Funziono a Bestia</span></i>

</div>

</body>

</html>

Foglio di Stile

.tooltip-block {
	/* Forza il tooltip nel elemento relativo non nella pagina */
	position:relative; 
	cursor:help;
}
 
.tooltip {
	display:block;
	position:absolute;/*Posizione assoluta*/
	width:150px;/*Larghezza*/
	padding:5px 15px;/*Padding*/
	left:50%;/*Sinistra 50%*/
	bottom:25px;/**/
	margin-left:-95px;/*Margine a sinistra*/
	/* Tooltip Style */
	color:#fff;/*Colore*/
	border:2px solid rgba(35,35,35,0.9);/*Bordo*/
	background:rgba(50,50,50,0.9);/*Cambia il sfondo della immagine*/ 
	text-align:center;/*Allineamento del testo a destra*/
	border-radius:3px;/*Bordo*/
	opacity:0;/*Opacità*/
	box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);/* Il nostro box shadow */
	/*--------------------------------------------------------------------------------------------------------*/
	/*Effetto transistion del css3 in scale vuol dire che aumenta o diminuisce effetto secondo asse x e asse y*/
	-webkit-transition:all 0.2s ease-in-out;
	-moz-transition:all 0.2s ease-in-out;
	-0-transition:all 0.2s ease-in-out;
	-ms-transition:all 0.2s ease-in-out;
	transition:all 0.2s ease-in-out;
	-webkit-transform:scale(0);
	-moz-transform:scale(0);
	-o-transform:scale(0);
	-ms-transform:scale(0);
	transform:scale(0);
	/*--------------------------------------------------------------------------------------------------------*/
	/*Imposto il font*/
	font-size:15px;
	font-weight:normal;
	font-style:normal;
}
 /*Posizione margini bordi prima e dopo */
.tooltip:before, .tooltip:after{
	content:"";
	position:absolute;
	bottom:-13px;
	left:50%;
	margin-left:-9px;
	width:0;
	height:0;
	border-left:10px solid transparent;
	border-right:10px solid transparent;
	border-top:10px solid rgba(0,0,0,0.1);
}
.tooltip:after{
	bottom:-12px;
	margin-left:-10px;
	border-top:10px solid rgba(35,35,35,0.9);
}
/*Genera animazione quando viene messo il puntore su esso*/ 
.tooltip-block:hover .tooltip, a:hover .tooltip {
	/*Setto opacità in modo tale che dia un piccolo effetto di trasparenza*/
	opacity:0.9;
	/*Modifica la scale del transform da 0 a 1 generando la seguente animazione*/
	-webkit-transform:scale(1);
	-moz-transform:scale(1);
	-o-transform:scale(1);
	-ms-transform:scale(1);
	transform:scale(1);
}

.tooltip-block {

/* Forza il tooltip nel elemento relativo non nella pagina */

position:relative;

cursor:help;

}

.tooltip {

display:block;

position:absolute;/*Posizione assoluta*/

width:150px;/*Larghezza*/

padding:5px 15px;/*Padding*/

left:50%;/*Sinistra 50%*/

bottom:25px;/**/

margin-left:-95px;/*Margine a sinistra*/

/* Tooltip Style */

color:#fff;/*Colore*/

border:2px solid rgba(35,35,35,0.9);/*Bordo*/

background:rgba(50,50,50,0.9);/*Cambia il sfondo della immagine*/

text-align:center;/*Allineamento del testo a destra*/

border-radius:3px;/*Bordo*/

opacity:0;/*Opacità*/

box-shadow:0px 0px 3px rgba(0, 0, 0, 0.3);/* Il nostro box shadow */

/*--------------------------------------------------------------------------------------------------------*/

/*Effetto transistion del css3 in scale vuol dire che aumenta o diminuisce effetto secondo asse x e asse y*/

-webkit-transition:all 0.2s ease-in-out;

-moz-transition:all 0.2s ease-in-out;

-0-transition:all 0.2s ease-in-out;

-ms-transition:all 0.2s ease-in-out;

transition:all 0.2s ease-in-out;

-webkit-transform:scale(0);

-moz-transform:scale(0);

-o-transform:scale(0);

-ms-transform:scale(0);

transform:scale(0);

/*--------------------------------------------------------------------------------------------------------*/

/*Imposto il font*/

font-size:15px;

font-weight:normal;

font-style:normal;

}

/*Posizione margini bordi prima e dopo */

.tooltip:before, .tooltip:after{

content:"";

position:absolute;

bottom:-13px;

left:50%;

margin-left:-9px;

width:0;

height:0;

border-left:10px solid transparent;

border-right:10px solid transparent;

border-top:10px solid rgba(0,0,0,0.1);

}

.tooltip:after{

bottom:-12px;

margin-left:-10px;

border-top:10px solid rgba(35,35,35,0.9);

}

/*Genera animazione quando viene messo il puntore su esso*/

.tooltip-block:hover .tooltip, a:hover .tooltip {

/*Setto opacità in modo tale che dia un piccolo effetto di trasparenza*/

opacity:0.9;

/*Modifica la scale del transform da 0 a 1 generando la seguente animazione*/

-webkit-transform:scale(1);

-moz-transform:scale(1);

-o-transform:scale(1);

-ms-transform:scale(1);

transform:scale(1);

}

20/02/201418/10/2016 da Mr Codematrix

Effetto polaroid in css

Gia abbiamo trattato del uso del Shadow Box (visibile qui)ma oggi vedremo come utilizzarlo insieme ad altri caratteristice del css per generare una
foto in stile polaroid.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Immagine stile polaroid</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<img src="myimg.jpg" class="polaroid"></img>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Immagine stile polaroid</title>

</head>

<body>

</body>

</html>

Foglio di Stile

img.polaroid {  
	background:#000; /*Cambia il sfondo della immagine*/  
	border:solid #fff; /*Imposto il bordo*/
	border-width:5px 5px 20px 5px; /*Imposto il bordo*/
	box-shadow:1px 1px 7px #333;/* Il nostro box shadow */
	-webkit-box-shadow:1px 1px 5px #333;/*Per i browser come Chrome e Safari */
	-moz-box-shadow:1px 1px 5px #333;/* Per Firefox */
	-o-box-shadow: 1px 1px 5px #333; /* Per Opera */	
	height:250px; /*Imposto altezza a 250px*/  
	width:250px; /*Imposto la lunghezza a 250px*/  
}

img.polaroid {

background:#000; /*Cambia il sfondo della immagine*/

border:solid #fff; /*Imposto il bordo*/

border-width:5px 5px 20px 5px; /*Imposto il bordo*/

box-shadow:1px 1px 7px #333;/* Il nostro box shadow */

-webkit-box-shadow:1px 1px 5px #333;/*Per i browser come Chrome e Safari */

-moz-box-shadow:1px 1px 5px #333;/* Per Firefox */

-o-box-shadow: 1px 1px 5px #333; /* Per Opera */

height:250px; /*Imposto altezza a 250px*/

width:250px; /*Imposto la lunghezza a 250px*/

}

10/02/201418/10/2016 da Mr Codematrix

Font Personalizzato in Css

Oggi vedremo come utilizzare un font personalizzato usando il css.
Prima di tutto dobbiamo trovare o creare un nuovo font io ne ho trovato uno in formato tff,
ma lo snippet scritto funziona anche con altri tipi di file.

Pagina Html

<!DOCTYPE html>
<html>
<head>
<title>Font Personalizzato</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<p>Test</p>
</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>Font Personalizzato</title>

</head>

<body>

</body>

</html>

Foglio di Stile

@font-face {
    font-family: 'BloodLust';
    src: url('bloodlust.eot?') format('eot'),
         url('bloodlust.woff') format('woff'),
         url('bloodlust.ttf')  format('truetype'),
         url('bloodlust.svg#svgFontName') format('svg');
    }
	
p{font-family:"BloodLust", Times, serif;}

p{font-size:200px}

@font-face {

font-family: 'BloodLust';

src: url('bloodlust.eot?') format('eot'),

url('bloodlust.woff') format('woff'),

url('bloodlust.ttf') format('truetype'),

url('bloodlust.svg#svgFontName') format('svg');

}

p{font-family:"BloodLust", Times, serif;}

p{font-size:200px}

20/01/201418/10/2016 da Mr Codematrix

Css First Letter

Oggi vediamo come utilizzare una funzionalità in css per creare un effetto tipico delle favole che consiste di dare un tocco particolare alla prima lettera del inizio della storia.
Questo effetto verrà dato al primo carattere di ogni paragrafo.

Pagina html

<!DOCTYPE html>
<html>
<head>
<title>First-Letter</title>
	<link href='style.css' rel='stylesheet' type='text/css'>		
</head>
<body>
	<p>C'<br><br>era una volta</p>

</body>
</html>

<!DOCTYPE html>

<html>

<head>

<title>First-Letter</title>

</head>

<body>

<p>C'<br><br>era una volta</p>

</body>

</html>

Foglio di Stile

p:first-letter {
	display:block; 		/* Ogni paragrafo si comporto come un blocco */
	margin:5px 0 0 5px;	/* Margini */
	float:left;		/* Allineamento a destra */
	color:#CFB53B;          /* Colore */
	font-size:70px;		/* Grandezza Font */  		
	font-family:Verdana;    /* Tipo di font */
}

p:first-letter {

display:block; /* Ogni paragrafo si comporto come un blocco */

margin:5px 0 0 5px; /* Margini */

float:left; /* Allineamento a destra */

color:#CFB53B; /* Colore */

font-size:70px; /* Grandezza Font */

font-family:Verdana; /* Tipo di font */

}

10/01/201418/10/2016 da Mr Codematrix

Gestione cursori in CSS

Oggi vediamo attraverso i css come cambiare il cursore del mouse con una semplice riga di codice che indica lo stile dello span.

<span style="cursor: default">Cursore Default</span>

<span style="cursor: wait">Caricamento</span>

<span style="cursor: crosshair">Croce</span>

<span style="cursor: text">Inserimento testo</span>

<span style="cursor: pointer">Classica manina dei link</span>

<span style="cursor: help">Aiuto</span>

<span style="cursor: move">Spostamento</span>

<span style="cursor: n-resize">Ridimensionamento verticale</span>

<span style="cursor: ne-resize">Ridimensionamento obbliquo</span>

<span style="cursor: e-resize">Ridimensionamento orrizontale</span>

<span style="cursor: se-resize">Ridimensionamento obbliquo</span>

<span style="cursor: default">Cursore Default</span>

<span style="cursor: wait">Caricamento</span>

<span style="cursor: crosshair">Croce</span>

<span style="cursor: text">Inserimento testo</span>

<span style="cursor: pointer">Classica manina dei link</span>

<span style="cursor: help">Aiuto</span>

<span style="cursor: move">Spostamento</span>

<span style="cursor: n-resize">Ridimensionamento verticale</span>

<span style="cursor: ne-resize">Ridimensionamento obbliquo</span>

<span style="cursor: e-resize">Ridimensionamento orrizontale</span>

<span style="cursor: se-resize">Ridimensionamento obbliquo</span>

Cookie	Durata	Descrizione
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

CodeMatrix Blog

Il sapere umano appartiene al mondo.

Tag: Html

HTML 5 Video

Precaricamento delle immagini

Input AutoComplete

Effetto Scroll sul Background

Testo con effetto stampato in css

ToolTip animato con Css

Effetto polaroid in css

Font Personalizzato in Css

Css First Letter

Gestione cursori in CSS

Ads Blocker Detected!!!