Archive for 'css'


Testo multicolonna con i CSS3!

Posted on 01. Jun, 2010 by daniele.

0

Per oltre sei anni, le colonne CSS3 sono state a nostra disposizione, ma, stranamente, non sono state quasi mai utilizzate. Poiché attualmente sono supportate solo su Mozilla e browser basati su Webkit, ciò significa che Internet Explorer continua a non supportarli. In questo tutorial vi mostreremo come utilizzare questa tecnica CSS scrivendo pochissime righe di codice!

Link: http://net.tutsplus.com/tutorials/html-css-techniques/quick-tip-the-multi-column-css3-module/

Continue Reading

Commenti condizionali per IE

Posted on 15. Jan, 2010 by daniele.

0

Tutti noi sappiamo che (purtroppo) Internet Explorer fa i "capricci" in tutte le varie versioni. Per ovviare a questo problema si usano i commenti condizionali, che permettono di creare una regola CSS personalizzata per ogni versione di IE.

Link: http://davidwalsh.name/ie-conditional-comments

Continue Reading

Trucco CSS per un effetto di scorrimento con sfondo trasparente!

Posted on 02. Dec, 2009 by daniele.

0

transparency

Questo bellissimo effetto CSS di scorrimento sullo sfondo permette di rendere dinamico il tuo sfondo creando un effetto ottico!

Link: http://www.fivefingercoding.com/xhtml-and-css/scrolling-transparent-background-effect

Demo: http://www.fivefingercoding.com/assets/demos/bkgd-scroll-trick/

Continue Reading

Progettare e personalizzare temi per iPhone prima di installarli!

Posted on 22. Oct, 2009 by daniele.

0

default_view

Per chi ama personalizzare le icone e il tema del proprio iPhone, questo articolo vi risulterà sicuramente utile! Lo sviluppatore Giovanni Corti ha creato un Tool che permette di testare e personalizzare in locale il tema del proprio iPhone prima di installarlo utilizzando  HTML, CSS e jQuery.
Per cambiare le pagine basta cliccare su uno dei due punti in basso, mentre per cambiare le icone dovete semplicemente modificare il file css new-icons.css

Scarica il sorgente: http://gizzistar.deviantart.com/art/iPhone-Theme-Creation-Tool-102818288

Continue Reading

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

Posted on 16. Sep, 2009 by daniele.

0

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.

0 

 
@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

Effetto letterpress con i CSS

Posted on 19. Aug, 2009 by daniele.

0

Guarda la Demo: http://line25.s3.amazonaws.com/wp-content/uploads/2009/letterpress/demo/demo.html

 
<style type="text/css">
 
* { margin, padding: 0; }
 
body {
	background: #474747 url(bg.png);
	margin: 70px;
}
 
h1 a {
	display: block; text-decoration: none;
	font: 150px Helvetica, Arial, Sans-Serif; letter-spacing: -5px;  
	text-align: center;
	color: #999; text-shadow: 0px 3px 8px #2a2a2a;
 }
 	h1 a:hover {
 		color: #a0a0a0; text-shadow: 0px 5px 8px #2a2a2a;
 	}
 
h2 {
	font: 70px Tahoma, Helvetica, Arial, Sans-Serif;
	text-align: center;
 
	color: #222; text-shadow: 0px 2px 3px #555;
}
 
pre {
	width: 500px; margin: 0 auto; background: #222; padding: 20px;
	font-size: 22px; color: #555; text-shadow: 0px 2px 3px #171717;
 
	-webkit-box-shadow: 0px 2px 3px #555;
	-moz-box-shadow: 0px 2px 3px #555;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
 
}
</style>
 
 
<h1><a href="http://line25.com">Line25</a></h1>
<h2>Pure CSS Letterpress Effect</h2>
 
<span>
<code>
color: #222;
text-shadow: 0px 2px 3px #555;
</code>
</span>
 
…

Continue Reading

Anteprima dei commenti con mootools

Posted on 12. Aug, 2009 by daniele.

0

CODICE HTML

 
<div id="live-preview-form" class="lp-block">
 
 
		<strong>Your Name:</strong>
<input type="text" name="name" id="name" value="" class="input" />
 
		<strong>Your Email:</strong>
<input type="text" name="email" id="email" value="" class="input" />
 
		<strong>Your Website:</strong>
<input type="text" name="website" id="website" value="" class="input" />
 
		<strong>Your Comment:</strong>
		<textarea name="comment" id="comment" class="input" rows="10"></textarea>
 
</div>
<div id="live-preview-display" class="lp-block">
<div id="lp-avatar"></div>
<div id="lp-name"></div>
<div id="lp-comment"></div>
</div>
 

CODICE CSS

 
.lp-block		{ width:400px; float:left; }
.lp-block input, .lp-block textarea { width:90%; }
#live-preview-display 	{ background:#eee; padding:10px; margin-left:50px; margin-top:20px; }
 
#lp-name { font-weight:bold; }
#lp-avatar { float:right; margin:0 0 20px 20px; }
#lp-comment { padding-top:10px; font-style:italic; line-height:19px; }
 

CODICE JAVASCRIPT/MOOTOOLS

 
(function($){
	window.addEvent('domready',function(){
		//the build process
		var build = function() {
			//vars (fields) and blocks
			var lpcomment = $('lp-comment'), lpname = $('lp-name'), lpavatar = $('lp-avatar');
			var name = $('name'), email = $('email'), website = $('website'), comment = $('comment');
 
			//comment
			lpcomment.set('text',comment.value);
			lpcomment.set('html',lpcomment.get('html').replace(/\n/g,''));
 
			//name & websites
			if(website.value &&…

Continue Reading

Realizzare 3 colonne con il tag

Posted on 09. Aug, 2009 by daniele.

0

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

Miniature di immagini in CSS!

Posted on 31. Jul, 2009 by daniele.

0

CODICE HTML

 
<div class="clipwrapper">
<div class="clip">
     <img src="castle.jpg" />
    </div>
</div>
 

CODICE CSS

 
.clipwrapper{
  position:relative;
  height:225px;
}
.clip{
  position:absolute;
  clip:rect(50px 218px 155px 82px);
}
 

Continue Reading

1 2 »