Brainleaf
Web Resources

In questo articolo vedremo come approcciare una tecnica di scrittura CSS denominata Objective CSS. Questa tecnica consiste nell'approcciare il CSS come se si trattasse di un vero e proprio linguaggio ad oggetti, quando in realtà così non è. Vediamo quindi come realizzare dei semplici bottoni.

La Classe base

Come prima cosa realizzeremo una classe di base dalla quale si genereranno tutti gli altri stili di bottoni. In questa classe andranno inserite tutte quelle regole base che vogliamo vengano applicate ad ogni bottone.


.objective-btn {
    display: inline-block;
    margin: 0 5px 5px 0;
    padding: 10px 20px;
    background-color: #ccc;
    color: #333;
    text-decoration: none;
    -webkit-transition: background 0.2s ease, color 0.2s ease;
            transition: background 0.2s ease, color 0.2s ease;
}

.objective-btn:hover {
    background-color: #efefef;
    color: #555;
}

Una volta ottenuta la classe base, possiamo testare il bottone in questo modo


<a href="#" class="objective-btn">Basic Button</a>

Demo

Di seguito il risultato del bottone di base
Basic Button

Estendere la Classe ".objective-btn"

Proprio come in un linguaggio ad oggetti, ciò che faremo adesso è estendere la classe principale con alcune classi che agiranno come "modificatori". Con queste classi estenderemo quindi le proprietà del bottone ottenedo nuovi elementi derivati.



/* Large Button */
/* ===================================== */
.objective-btn.large {
    font-size: 1.3em;
    padding: 15px 25px;
}

/* Small Button */
/* ===================================== */
.objective-btn.small {
    font-size: 0.7em;
    padding: 5px 7px;
}

/* Rounded Corner Button */
/* ===================================== */
.objective-btn.rounded {
    border-radius: 6px;
}

/* Cyan Button */
/* ===================================== */
.objective-btn.cyan {
    color: #fff;
    background-color: cyan;
}

/* Cyan Button */
/* ===================================== */
.objective-btn.magenta {
    color: #fff;
    background-color: magenta;
}

Vediamo adesso come utilizzare le nuove classi all'interno del markup html


<a href="#" class="objective-btn">Basic Button</a>
<a href="#" class="objective-btn rounded">Rounded Corner Button</a>
<a href="#" class="objective-btn rounded cyan">Rounded Corner & Cyan Button</a>
<a href="#" class="objective-btn rounded magenta">Rounded Corner & Magenta Button</a>
<a href="#" class="objective-btn large">Large Button</a>
<a href="#" class="objective-btn small">Small Button</a>

Di seguito il risultato dei bottoni modificati
Basic Button Rounded Corner Button Rounded Corner Button & Cyan Rounded Corner & Magenta Button Small Button Large Button

Ovviamente gli esempi proposti sono veramente basilari, ma questa tecnica è veramente potente ed utile in molti diversi scenari ed è applicabile a qualsiasi elemento.

Joomla SEF URLs by Artio