Share
I tag sono una caratteristica familiare di molti servizi Web 2.0, siti Web e in particolare blog. Durante questo tutorial useremo CSS3 per creare tag tipo ticket, senza fare affidamento su nessuna immagine.
Ecco una rapida analisi del processo:
Iniziamo aggiungendo prima il markup all'interno del capo del nostro documento. Abbiamo aggiunto due fogli di stile: "tut.css" e "tickets.css"; Puoi rimuovere il primo ogni volta che vuoi implementare il tuo lavoro, ma lo useremo nella demo. Il foglio di stile "tickets.css" contiene tutti gli stili che formatteranno i nostri tooltip. Ecco il nostro head markup del documento:
Pure tag CSS3 come biglietti
Ora dobbiamo aggiungere il markup per i tag. Abbiamo utilizzato una divisione per ogni tag con l'attributo class biglietto che useremo per modellare i tag. Quindi abbiamo una span con attributo di classe cerchio. Infine, vedrai un collegamento con il testo per i tag. Ecco il tag markup (ho aggiunto quattro tag come esempio, ma puoi aggiungerne quanti vuoi):
CSS3HTML5DesignSviluppo
Iniziamo disegnando i tag principali div (.biglietto). Qui impostiamo gli stili dei font, impostiamo la posizione su parente in modo che possiamo posizionare gli elementi di posizione assoluta al suo interno (notare che ha !importante perché senza questo non possiamo raggiungere i risultati desiderati), il colore di sfondo, fluttuante verso sinistra che puoi anche impostare destra, poi finalmente un po 'di padding e margini per la spaziatura.
.ticket font-family: Arial; font-size: 12px; font-weight: bold; posizione: relativa! importante; sfondo: # 8dc63f; fluttuare: a sinistra; imbottitura: 7px 3px; margine: 0 5px 5px 0;
I nostri tag dovrebbero apparire così.
Ora modelliamo i due angoli superiori per farlo sembrare un quarto ritaglio di un cerchio. Per creare questo useremo pseudo elementi dopo e prima. Entrambi gli pseudo elementi hanno lo stesso stile, l'unica differenza è che dopo è posizionato a sinistra mentre prima è posizionato a destra.
Inizia impostando il valore del contenuto su nulla, posizione assoluto, z-index a 100 o qualsiasi grande valore positivo, impostare la sua posizione dall'alto, a sinistra o a destra e zero. Imposta lo stile border-bottom e left o right, quindi finalmente impostiamo il raggio-limite 20px (in basso a destra per dopo e in basso a sinistra per prima.
Per saperne di più sulla creazione di forme usando gli stili dei bordi CSS, puoi vederlo
guida.
.biglietto: dopo contenuto: ""; posizione: assoluta! importante; z-index: 100; inizio: 0; a sinistra: 0; border-right: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 20px 0; -webkit-border-radius: 0 0 20px 0; border-radius: 0 0 20px 0; .ticket: before content: ""; posizione: assoluta! importante; z-index: 100; inizio: 0; a destra: 0; border-left: #fff 7px solid; border-bottom: #fff 7px solid; -moz-border-radius: 0 0 0 20px; -webkit-border-radius: 0 0 0 20px; border-radius: 0 0 0 20px;
I nostri tag dovrebbero apparire così.
All'interno dei collegamenti ora possiamo creare l'effetto della cucitura utilizzando bordi e contorni. Modelliamo i collegamenti con a 1px tratteggiato contorno con il 40% di colore bianco trasparente, impostare i bordi con il 30% di colore nero trasparente, imbottitura per rendere le cuciture più realistiche sui bordi, nessuna decorazione di testo, impostare il colore del testo al 50% di bianco trasparente (in modo da non avere per cambiare il colore del testo ogni volta che cambiamo il colore di sfondo dei tag) e impostare lo spazio bianco su nowrap. Infine, impostiamo il colore del testo dello stato al passaggio del mouse su nero trasparente al 50%.
.ticket a outline: 1px rgba (255,255,255,0.4) tratteggiato; border: 1px rgba (0,0,0,0.3) tratteggiato; imbottitura: 4px 10px 4px 20px; decorazione del testo: nessuna; colore: rgba (255,255,255,0,5); white-space: nowrap; .ticket a: hover color: rgba (0,0,0,0,5);
I nostri tag dovrebbero apparire ora come questo. Si noti che entrambi gli angoli di ritaglio si trovano sopra la cucitura.
Per gli angoli in basso useremo anche pseudo elementi dopo e prima ma questa volta all'interno del link. Lo stile di questi due angoli è ovviamente simile agli angoli superiori, cambiamo solo la posizione e il bordo per adattarli alla loro posizione.
.ticket a: after content: ""; posizione: assoluta! importante; z-index: 100; fondo: 0; a sinistra: 0; border-right: #fff 7px solid; border-top: #fff 7px solido; -moz-border-radius: 0 20px 0 0; -webkit-border-radius: 0 20px 0 0; border-radius: 0 20px 0 0; .ticket a: before content: ""; posizione: assoluta! importante; z-index: 1000; fondo: 0; a destra: 0; border-left: #fff 7px solid; border-top: #fff 7px solido; -moz-border-radius: 20px 0 0 0; -webkit-border-radius: 20px 0 0 0; border-radius: 20px 0 0 0;
I nostri tag dovrebbero ora assomigliare a questo.
Nel markup HTML abbiamo già aggiunto un elemento span vuoto con il nome della classe cerchio ed è principalmente usato per creare il nostro effetto bucato. Utilizzeremo nuovamente i bordi e il raggio del bordo per creare cerchi con valori di altezza e larghezza pari a zero. Stabiliremo la loro posizione a assoluto, z-index su un numero positivo elevato, 50% dall'alto, 8px da sinistra con un'ombra di casella per renderlo più realistico, e infine un margine superiore di -5px per allinearlo perfettamente al centro.
.ticket .circle position: absolute! important; z-index: 100; bordo: 5px #fff solido; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; margin-top: -5px; larghezza: 0; altezza: 0; superiore: 50%; a sinistra: 8px; -moz-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); -webkit-box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3); box-shadow: 0 -1px 0 rgba (0,0,0,0,5), 0 1px 0 rgba (255,255,255,0,3);
I nostri tag dovrebbero essere completi!
Il mio approccio per la creazione di questi biglietti ha un problema. I quattro angoli e il foro perforato non cambiano colore se il colore di sfondo viene modificato. In altre parole, non sono trasparenti e devi cambiare il loro colore ogni volta che cambi il colore di sfondo.
Per quanto riguarda la compatibilità con i browser, questo è stato testato su cui lavorare Firefox 4.5+, Chrome 13, Opera 11 e IE9.
Il tuo risultato finale dovrebbe assomigliare all'immagine sopra. Perché il tuo risultato finale assomigli esattamente alla nostra demo, dovresti usare gli stili all'interno di "tut.css", ma sentiti libero di aggiungere le tue modifiche.
Spero che tu abbia imparato alcune tecniche da questo tutorial CSS! Condividi i tuoi pensieri qui sotto :)
Accentsconagua