sastgroup.com

Realizzare la chat di Facebook con jQuery e CSS

Posted on 14. Jan, 2010 by daniele.

Grazie a questo tutorial imparerete a realizzare la parte grafica della chat del Social Network più famoso al mondo, utilizzando jQuery e CSS!

Link  Parte 1: http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-1/

Link Parte 2: http://www.sohtanaka.com/web-design/facebook-style-footer-admin-panel-part-2/

Demo: http://www.sohtanaka.com/web-design/examples/footer-panel/

Continue Reading

Un fix che corregge la trasparenza su Internet Explorer 6

Posted on 22. Nov, 2009 by daniele.

Per chi come me sviluppa siti internet deve (purtroppo) testare il proprio sito su tutti i browser. Internet Explorer 6 viene ancora utilizzato e quindi bisogna correggere i bug che si verificano anche in questo browser ormai obsoleto. Con l'arrivo del web 2.0 le GIF sono state sostituite dalle PNG, quest'ultime infatti possono essere salvate eliminando lo sfondo e creando così una trasparenza alle immagini. Purtroppo Internet Explorer 6 non riesce a far visualizzare le PNG trasparenti correttamente rimpiazzando la trasparenza con uno sfondo grigio. Questo piccolo javascript riuscirà a risolvere definitivamente questo "grosso" problema!

 
<!--[if lte IE 6]>
<script type="text/javascript">
function correctPNG() // correctly handle PNG transparency in Win IE 5.5 &…

Continue Reading

[Css-jQuery] Effetto scala grigi all’hover dell’immagine

Posted on 16. Sep, 2009 by daniele.

CODICE HTML

 
<ul class="gallery">
<li>
		<a href="#" class="thumb"><span><img src="image.gif" alt="" /></span></a>
<h2><a href="#">Image Name</a></h2>
</li>
</ul>
 

CODICE CSS

 
ul.gallery {
	width: 708px; /*--Adjust width according to your scenario--*/
	list-style: none;
	margin: 0; padding: 0;
}
ul.gallery li {
	float: left;
	margin: 10px; padding: 0;
	text-align: center;
	border: 1px solid #ccc;
	-moz-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-khtml-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	-webkit-border-radius: 3px; /*--CSS3 Rounded Corners--*/
	display: inline; /*--Gimp Fix aka IE6 Fix - Fixes double margin bug--*/
}
ul.gallery li a.thumb {
	width: 204px; /*--Width of image--*/
	height: 182px; /*--Height of image--*/
	padding: 5px;
	border-bottom: 1px solid #ccc;
	cursor: pointer;
}
ul.gallery li span { /*--Used to crop image--*/
	width: 204px;
	height: 182px;
	overflow: hidden;
	display: block;
}
ul.gallery li a.thumb:hover {
	background: #333; /*--Hover effect for browser with js turned off--*/
}
ul.gallery li h2 {
	font-size: 1em;
	font-weight: normal;
	text-transform:…

Continue Reading

Separatore paragrafi con i CSS!

Posted on 26. Aug, 2009 by daniele.

 
@media screen {
	.page-break	{ height:10px; background:url(page-break.gif) 0 center repeat-x; border-top:1px dotted #999; margin-bottom:13px; }
}
@media print {
	.page-break { height:0; page-break-before:always; margin:0; border-top:none; }
}
 

Continue Reading

Realizzare 3 colonne con il tag

e i CSS

Posted on 09. Aug, 2009 by daniele.

CODICE HTML

 
<ul>
<li class="col1">Eggs</li>
<li class="col1">Ham</li>
<li>
</li>
<li class="col2 top">Bread</li>
<li>
</li>
<li class="col2">Butter</li>
<li>
</li>
<li class="col3 top">Flour</li>
<li>
</li>
<li class="col3">Cream</li>
</ul>
 

CODICE CSS

 
ul {list-style:none;}
li {line-height:1.3em;}
.col2 {margin-left:100px;}
.col3 {margin-left:200px;}
.top {margin-top:-2.6em;} /* the clincher */
 

Continue Reading

Css e le immagini di sfondo

Posted on 25. Oct, 2008 by Administrator.

Sito web: http://www.webdesignerwall.com/tutorials/how-to-css-large-background/

Continue Reading

Costruire un template con i css tutorial passo passo

Posted on 30. Sep, 2008 by Administrator.

Fantastico tutorial che passo passo, sul campo, ci spiega come Costruire un template con i css.

Sito web: http://www.maxdesign.com.au/presentation/wentworth/

Continue Reading