.: HosiriS :.

Informatica e non solo

Archive for the ‘CSS’ Category

Effetto lightbox con i CSS3

Posted by hosiris su marzo 28, 2011

In questo post vedremo come creare un effetto lightbox senza dover per forza usare del codice Javascript, alleggerendo un po’ il carico sul browser. Premetto che non è una mia soluzione (quando vedi certe cose ti dici sempre: “ma perché non ci ho pensato io? in fondo non è difficile”), ma cercherò di tradurre le parti più importanti.

Iniziamo con l’inserire il seguente codice sulla nostra pagina HTML:

<div id="container">
    <div id="header">
        <h1>Lightbox CSS</h1>
    </div>
    <div id="content">
        <h2>Cliccare sui link per vedere l'effetto in azione</h2>
        <p>Questo è un codice di esempio che mostra come lavora l'effetto lightobox. Clicca <a href="#lightbox">qui</a></p>
    </div>
</div>
<!--[if IE]>
<div class="ie-bg"></div>
<![endif]-->

Adesso inseriamo i vari elementi che saranno visualizzati dopo il click, utilizziamo una lista come segue:

<ul id="lightboxes">
    <li id="lightbox">
        <div class="box">
            <h3>Qui</h3>
            <p>
                Dopo il click viene visualizzata questa parte.
            </p>
            <a href="#" class="close" title="close window">x</a>
        </div>
    </li>
</ul>

Adesso non ci resta che creare il nostro foglio di stile. Inseriamo il seguente codice:

#lightboxes {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
list-style-type: none;
text-align: left;
overflow: hidden;}
#lightboxes li {
width: 100%;
height: 9999px;
position: relative;
background: rgba(0,0,0,.5);}
#lightboxes .box {
position: absolute;
width: 400px;
height: 400px;
left: 50%;
top: 50px;
border: 10px solid #999;
margin-left: -230px;
background-color: #fff;
padding: 20px;}
#lightboxes h3 {
font-weight: normal;
font-size: 1.8461em;
margin: 0 0 0.4583em 0;}
#lightboxes a.close {
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 20px;
line-height: 20px;
text-align: center;
background-color: #ddd;
text-decoration: none;
font-weight: bold;
color: #999;
font-size: 1.2em;}
#lightboxes a.close:hover {
background-color: #999;
color: #fff;}
#lightboxes #close {
background-color: transparent;
z-index: -1;}
</style>
<!--[if IE]>
<style type="text/css">
html {
overflow-y: auto;}
#lightboxes {
position: relative;}
#lightboxes .ie-bg {
background: #000;
position: absolute;
z-index: -1;
width: 100%;
height: 100%;
filter: alpha(opacity=75);}
</style>
<![endif]-->

Da notare che come sempre IE deve creare problemi e che quindi è stato necessario aggiungere una parte specifica con un div a parte.
Il codice non mi sembra particolarmente complesso (ecco perchè mi sono detto… ma guarda queste che colpo di genio) ed anche il funzionamento è abbastanza logico: al click del link veniamo indirizzati verso il div associato che anziché venir mostrato a parte (di sotto, di lato…) viene visualizzato sopra il precedente testo.
Come aggiungere più link? Facile capire che ad ogni nuovo link deve corrispondere un elemento nella lista con un elemento class uguale all’ancora del link.

Fonte originale by Jenna Smith con il codice completo per un primo esempio.

Posted in CSS, Programmazione | Leave a Comment »

Diamo un aspetto migliore ai nostri DIV

Posted by hosiris su marzo 20, 2011

Sareste interessati a dei div come i seguenti?

Si lo so, può sembrare qualcosa di molto difficile, ma è sufficiente una buona conoscenza dei CSS3 per poterli realizzare senza l’utilizzo di immagini.
In questo PDF ho raccolto una serie di script che ci permettono di realizzare delle soluzioni come quelle nell’immagine.
Tutto quello che vi serve fare è inserire lo script nella home page, e definire un div con class box1… box16 in base a quello che più vi piace.

Buon divertimento!

Posted in CSS, Programmazione | 1 Comment »

Disegnare attraverso i CSS

Posted by hosiris su marzo 8, 2011

Di seguito presento una breve lista delle forme realizzabili attraverso i CSS.

QUADRATO

#square {
width: 100px;
height: 100px;
background: #ccc;
}

RETTANGOLO

#square {
width: 200px;
height: 100px;
background: #ccc;
}

CERCHIO

#circle {
width: 100px;
height: 100px;
background: #ccc;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
}

ELLISSE

#oval {
width: 200px;
height: 100px;
background: #ccc;
-moz-border-radius: 100px / 50px;
-webkit-border-radius: 100px / 50px;
border-radius: 100px / 50px;
}

TRIANGOLO VERTICE ALTO

#triangle-up {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-bottom: 100px solid #ccc;
}

TRIANGOLO VERTICE BASSO

#triangle-down {
width: 0;
height: 0;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
border-top: 100px solid #ccc;
}

TRIANGOLO VERTICE SINISTRA

#triangle-left {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-right: 100px solid #ccc;
border-bottom: 50px solid transparent;
}

TRIANGOLO VERTICE DESTRA

#triangle-right {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-left: 100px solid #ccc;
border-bottom: 50px solid transparent;
}

TRIANGOLO TOP-LEFT

#triangle-topleft {
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-bottom: 50px solid transparent;
border-left: 50px solid #ccc;
border-right: 50px solid transparent;
}

TRIANGOLO TOP-RIGHT

#triangle-topright {
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid #ccc;
}

TRIANGOLO BOTTOM-LEFT

#triangle-bottomleft {
width: 0;
height: 0;
border-top: 50px solid transparent;
border-bottom: 50px solid #ccc;
border-left: 50px solid #ccc;
border-right: 50px solid transparent;
}

TRIANGOLO BOTTOM-RIGHT

#triangle-bottomleft {
width: 0;
height: 0;
border-top: 50px solid #ccc;
border-bottom: 50px solid transparent;
border-left: 50px solid transparent;
border-right: 50px solid #ccc;
}

PARALLELOGRAMMA

#parallelogram {
width: 150px;
height: 100px;
-webkit-transform: skew(20deg);
-moz-transform: skew(20deg);
-o-transform: skew(20deg);
background: #ccc;
}

TRAPEZIO

#trapezoid {
border-bottom: 100px solid #ccc;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}

INFINITO

#infinity {
position: relative;
width: 212px;
height: 100px;
}
#infinity:before, #infinity:after {
content: "";
position: absolute;
top: 0; left: 0;
width: 60px;
height: 60px;
border: 20px solid red;
-moz-border-radius: 50px 50px 0 50px;
border-radius: 50px 50px 0 50px;
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
}
#infinity:after {
left: auto;
right: 0;
-moz-border-radius: 50px 50px 50px 0;
border-radius: 50px 50px 50px 0;
-webkit-transform:rotate(45deg);
-moz-transform:rotate(45deg);
-ms-transform:rotate(45deg);
-o-transform:rotate(45deg);
transform:rotate(45deg);
}

Posted in CSS, Programmazione | Leave a Comment »