CSS trick and rules III

Proseguiamo con gli utilissimi pezzetti di codice con cui sviluppare e mantenere il proprio sito Web; nel primo appuntamento “9 semplici snippet CSS” e nel secondo “CSS trick and rules II“, abbiamo visto alcuni frammenti utili per implementare regole CSS nei nostri lavori quotidiani.

Come ulteriore supporto vedremo anche due comode estenzioni gratuite che vi permettono di creare/modificare/esportare/importare gli Snnippets direttamente da Dreamweaver al fine di risparmiare tempo e portare questi pezzetti di codice sempre con voi.

Partiamo con alcuni nuovi Snippets davvero utili e soprattutto validi.

Style Button like a link

.submit {
	background:transparent;
	border-top:0;
	border-right:0;
	border-bottom:1px solid #00F;
	border-left:0;
	color:#00F;
	display:inline;
	margin:0;
	padding:0;}

*:first-child+html .submit {		/* hack per IE 7 */
	border-bottom:0;
	text-decoration:underline;}

* html .submit {				/* hack per IE 5/6 */
	border-bottom:0;
	text-decoration:underline;}

Opacity to images onMouseover in CSS

.opacityit img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=40);
    -moz-opacity: 0.4;}

.opacityit:hover img{
    filter:progid:DXImageTransform.Microsoft.Alpha(opacity=100);
    -moz-opacity: 1;}

Center horizontally a DIV using CSS

#wrapper{
  text-align:center;}

#centered{
  position:relative;
  width:200px;
  margin:0 auto;
  text-align:left;}

Automatic link icons with CSS

/*Apply the icon to any link ending with '.pdf'*/
a[href$='.pdf'] {
    display:inline-block;
    padding-left:20px;
    line-height:18px;
    background:transparent url(Images/PDFIcon.gif) center left no-repeat;}

/*Apply an icon for external links*/
a[href^="http:"] {
    display:inline-block;
    padding-right:14px;
    background:transparent url(/Images/ExternalLink.gif) center right no-repeat;}

CSS opacity

.my-opacity {
	filter:alpha(opacity=50); /* msie */
	-moz-opacity: 0.50; /* firefox 1.0 */
	-khtml-opacity: 0.50; /* webkit */
	opacity: 0.50; /* css 3 */}

IE6,IE7 hack

#MyDiv {
    margin : 10px 10px 10px 10px;}

/* IE6 Only */
* html #MyDiv {
    margin : 5px 5px 5px 5px;}

/* IE7 Only */
*:first-child+html #MyDiv {
    margin : 2px 2px 2px 2px;}

Replacing text with images

span.imgreplace {
    background:url(tick.gif);
    margin-left:0.5em;
    text-indent:21px;
    position:absolute;
    overflow:hidden;
    width:20px;
    height:19px}

Occupiamoci ora di vedere le due estenzioni per le operazioni di import/export dei Snippets. Partiamo con il Blog di Scott Fegette che presentò nel lontano Settembre 2005 questa comodissima Dreamweaver Snippets; compatibile anche con la versione CS4, l’estenzione vi permette dal pannello Snippets di Dreamweaver di esportare/importare il frammenti che avete creato o importarne degli altri; comoda, veloce ed essenziale.

Proseguiamo con il noto Tom Muck che nella vasta gamma di estenzioni gratuite e a pagamento offre la sua Sniplets. Una volta installata, l’estenzione inserirà una comoda Icona nella Toolbar del programma offrendo anche una comoda Shell con il tasto destro, dandovi l’opportunità di eseguire le varie operazioni per creare/editare e ordinare i vostri Snippets.

Con questo post spero di aver condiviso alcune informazioni comode ed essenziali per chi lavora con il software di casa Adobe e vuole risparmiare tempo, sviluppando in modo modulare e non ricorsivo.