Jak w prosty sposób zmienić wygląd etykiet

środa, 10 grudnia 2014

Etykiety - gadżet dzięki,któremu łatwiej jest nam coś znaleźć na blogu. Miło jest gdy nawet taki gadżet jak etykiety wygląda tak jak chcemy dlatego w dzisiejszym tutorialu pokarzę wam jak w prosty sposób odmienić nasze etykiety.


Do zmiany wyglądu etykiet będzie nam potrzebny następujący kod:

.label-size a{

 float: left; 

 height: 30px;

 line-height: 30px; 

 position: relative;

 font-size: 14px;

 margin-bottom: 10px;

 margin-left: 10px;

 padding:0 20px 0 20px;

 background:#000;

 color:#fff;

 text-decoration:none;

 -moz-border-radius-bottomright:0px;

 -webkit-border-bottom-right-radius:0px;

 border-bottom-right-radius:0px;

 -moz-border-radius-topright:0px;

 -webkit-border-top-right-radius:0px;

 border-top-right-radius:0px;

 }

.label-size a:hover{background: #ccc;}

Teraz przeanalizujmy nasz kod krok po kroku

.label-size a{

 float: left; - położenie etykiet 

 height: 30px;  - wysokość     

 line-height: 30px; - wysokość  (ważne jest żeby w tych dwóch miejscach były takie same wartości) 

position: relative;

 font-size: 14px; - wielkość czcionki 

 margin-bottom: 10px; - margines dolny 

 margin-left: 10px; - margines lewy 

 padding: 0px 20px 0px 20px;  - wielkość naszych etykiet pierwsza wartość odpowiada za górną krawędź naszych etykiet, druga wartość odpowiada za długość prawego boku,trzecia wartość odpowiada za dolną krawędź etykiety,czwarta wartość odpowiada za długość lewego boku. 

 background:#000; - kolor naszych etykiet

 color:#fff; - kolor tekstu 

 text-decoration:none;

 -moz-border-radius-bottomright:0px;

 -webkit-border-bottom-right-radius:0px; - zaokrąglenie prawego dolnego rogu 

 border-bottom-right-radius:0px;

 -moz-border-radius-topright:0px;

 -webkit-border-top-right-radius:0px; - zaokrąglenie prawego górnego rogu 

 border-top-right-radius:0px;

 }

.label-size a:hover{background: #ccc;} - kolor etykiety po najechaniu na nią myszką 

Ps. Bardzo ważne jest aby przy tym nasze etykiety były wyświetlane w formacie chmury
Ps2. Zapraszam wszystkich fanów DIY do polubienia jedynej takiej strony na Facebooku. Stronę tworzą rękodzielnicy podsyłając do administratorów swoje pomysły wraz ze zdjęciami i dokładnymi instrukcjami STRONA - KLIK  strona dopiero się rozkręca,więc będzie naprawdę miło jak przybędzie trochę lajków :)
Ps3. Dajcie znać w komentarzu co myślicie o nowej szacie graficznej bloga,postawiłam jednak na kafelki - według mnie dzięki nim blog jest bardziej przejrzysty.

Jeśli spodobał Ci się wpis, przekaż go dalej :)