Efekt prostej karteczki z dziurką dla Tagów na blogu – CSS

Czas czytania: 2 minut

Czasami chcemy by na naszej stronie lub blogu tagi wyróżniały się nie co na tle innych elementów strony.
W takim wypadku warto pomyśleć czy nie zastosować na nich jakiegoś efektu lub czy np. nie zmienić całkowicie jego wyglądu. Ja dziś pokażę wam tak jak sugeruje tytuł w jaki sposób wyróżnić tagi poprzez umieszczenie ich na małych karteczkach z dziurkami. Najlepszym porównaniem będą tu karteczki podobne do tych co przyczepia się do bagażu kiedy gdzieś jedziemy.

Jak uzyskać efekt karteczki z dziurką?

Do uzyskania tego efektu warto sobie przypomnieć w jaki sposób tworzymy w CSS różne figury geometryczne. Będziemy bowiem tworzyć zarówno trójkąt jak i okrąg / koło. Oczywiście koło będzie się wpisywać w trójkąt.

Na początek stworzymy sobie przykładowe tagi. Zaczniemy od 3, ale spokojnie może być ich więcej.

<div class="tags">
     <a href="#">tag1</a>
     <a href="#">tag2</a>
     <a href="#">tag3</a>
</div>

Następnie tworzymy w CSS odpowiedni skrypt.

.tags{
    margin:0;
        position:absolute;
    padding:0;
    right:24px;
    bottom:-12px;
    list-style:none;
    }

Podobnie jak wcześniej oprócz zwykłych elementów wykorzystamy nie tylko zwykłe klasy ale również pseudoklasy (before, after).

.tags a{
    float:left;
    height:24px;
    line-height:24px;
    position:relative;
    font-size:11px;
    }
.tags a{
    margin-left:20px;
    padding:0 10px 0 12px;
    background:#0089e0;
    color:#fff;
    text-decoration:none;
    -moz-border-radius-bottomright:4px;
    -webkit-border-bottom-right-radius:4px; 
    border-bottom-right-radius:4px;
    -moz-border-radius-topright:4px;
    -webkit-border-top-right-radius:4px;    
    border-top-right-radius:4px;    
    } 
//tworzymy trójkąt
.tags a:before{
    content:"";
    float:left;
    position:absolute;
    top:0;
    left:-12px;
    width:0;
    height:0;
    border-color:transparent #0089e0 transparent transparent;
    border-style:solid;
    border-width:12px 12px 12px 0;      
    }
//tworzymy kółko
.tags a:after{
    content:"";
    position:absolute;
    top:10px;
    left:0;
    float:left;
    width:4px;
    height:4px;
    -moz-border-radius:2px;
    -webkit-border-radius:2px;
    border-radius:2px;
    background:#fff;
    -moz-box-shadow:-1px -1px 2px #004977;
    -webkit-box-shadow:-1px -1px 2px #004977;
    box-shadow:-1px -1px 2px #004977;
    }
.tags a:hover{background:#555;} 

.tags a:hover:before{border-color:transparent #555 transparent transparent;}

Efekt końcowy

Ostateczny efekt będzie wyglądał podobnie:

See the Pen
Tags by Aura (@Julka85)
on CodePen.

Jeżeli nie chcecie by wasze tagi przesuwały się do góry wystarczy usunąć z .tags:

position:absolute;

Pamiętajcie, że użyte kolory są tylko przekładowe i można użyć innych.

Źródło: http://cssglobe.com/pure-css3-post-tags/

 

tagi po których można znaleźć stronę:

• efekt tagu
• tag, tags
• grafika na stronę
• kurs CSS
• urozmaicenie strony
• tagi na stronie