Blog trasferito su
www.NoizExperience.com


03 luglio, 2008

La Bandiera Americana e Italiana con Css

american flag width pure css

Oggi, 4 Luglio, è l'anniversario dell'Indipendenza degli Stati Uniti d'America. E che c'entra col Blog?! Approffitiamone per approffondire i Css e per analizzarne la sua potenza prendendo spunto da questa festa: vediamo come realizzare la bandiera degli Usa e, perchè no, anche quella Italiana.

Guarda l'esempio qui.

Analizzando il css notiamo la presenza di un solo Id per identificare il contorno della bandiera, la classe Blue detta le istruzioni per il rettangolo a sfondo, appunto blu, dove appiono le stelle, poi possiamo notare come il p della classe Blue detti le regole per il posizionamento delle stelline. A seguire poi troviamo le linee bianche e rosse.
#flag {
        width: 398px;
        border: 1px solid #ddd;
        margin: 0 auto;
        position: relative; }
    .blue {
        width: auto !important;
        width: 180px;
        background-color: #00348c;
        color: #fff;
        text-align: center;
        padding: 2px 0 5px 8px !important;
        padding: 2px 0 5px 0;
        position: absolute;
        top: 0;
        left: 0; }
    .blue p {
        letter-spacing: 12px;
        height: 14px;
        font-size: 20px;
        line-height: 14px;
        margin: 0; }
     p.stripe {
         height: 19px;
        font-weight: bold;
         text-align: right;
        padding: 0 5px;
        margin: 0; }
    .red {
        color: #f70029;
        background-color: #f70029; }
    .red::-moz-selection {
        color: #fff;
        background-color: #f70029; }
    .red::selection {
        color: #fff;
        background-color: #f70029; }
    .white {
        color: #fff;
        background-color: #fff; }
    .white::-moz-selection {
        color: #000;
        background-color: #fff; }
    .white::selection {
        color: #000;
        background-color: #fff; }


Il codice Html detta la struttura:
<div id="flag">
<div class="blue"> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;</p> <p>&#9733;&#9733;&#9733;&#9733;&#9733;&#9733;</p>
</div>
<p class="red stripe"></p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"> </p>
<p class="red stripe"> </p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"> </p>
<p class="red stripe"> </p>
<p class="white stripe"></p>
<p class="red stripe"></p>
<p class="white stripe"></p>
<p class="red stripe"></p>
</div>

E la bandiera dell'Italia come si fa? Ancora più semplice ovviamente. Vediamo che dice wikipedia: "La bandiera italiana è un tricolore composto da tre bande verticali di uguali dimensioni. Partendo dall'asta i colori sono: verde, bianco e rosso."

Partiamo col Css:
#italia {width:300px; border:1px solid #ccc; position:relative}
 #italia p {width:100px; height:150px; float:left; margin:0; border:0}
.verde {background-color:#336600;}
.bianco {background-color:#FFFFFF}
.rosso {background-color:#CC0000}


Il codice html ne butta già la struttura:
<div id="italia">
<p id="italia" class="verde"></p>
<p id="italia" class="bianco"></p>
<p id="italia" class="rosso"></p>
</div>


Questi sono solo dei piccoli esempi da cui partire e per rendersi conto di quanto si possa realizzare col Css con un pò di fantasia.


Articoli correlati per categorie



3 commenti!:

marbio ha detto...

Bravo Angelo, un po' di CSS fa sempre bene a tutti! E' un ottimo esercizio per capire come funzionano i CSS.

Ciao

Anonimo ha detto...

ottimo! stò cercando di capirci qualcosa nell'uso del css perchè ho visto che puoi davvero farci grandi cose;) tu quale editor utilizzi?

Angelo ha detto...

Ciao Cirio, in genere mi affido al solo Blocco Note, mentre quando vado di fretta uso Dreamweaver che mi aiuta con l'autocompletamento.. Se ti interessano i Css ti consiglio di seguire il blog spesso perchè è uno degli argomenti più trattati qui.. Ciao, a presto!