Ogólna pomoc dotycząca stylów - Obramowany tekst
kamilabc1 - 23-02-2014, 15:41
Temat postu: Obramowany tekst
Witam. Jak zrobić takie obramowanie z napisem w środku jak na zdjęciu. Tak żeby było okrągłe, nie kwadratowe . Pozdrawiam.
kasztanek9994 - 23-02-2014, 17:45
| Kod: |
Otwórz styl/nazwa_stylu.css i dodaj:
.server {
display: inline-block;
height: 20px; /*szerokość*/
line-height: 20px; /*jeśli zmienisz szerokość tu dajesz taką samą wartość*/
padding: 0 10px;
font-size: 12px; /*wielkosc czcionki*/
font-weight: bold; /*pogrubienie*/
color: white; /*kolor czcionki*/
text-shadow: rgba(0, 0, 0, 0.2) 0px -1px 0px; /*cień czcionki*/
-moz-border-radius: 3px; /*zaokrąglone rogi*/
-webkit-border-radius: 3px; /*zaokrąglone rogi*/
border-radius: 3px; /*zaokrąglone rogi*/
background:#6C0; /*tło*/
}
|
Tam gdzie chcesz tego użyć wpisujesz:
| Kod: |
<span class="server">Tu wpisujesz swój tekst</span> |
El_Tequila - 23-02-2014, 17:46
Wystarczy zrobić w jakimś programie graficznym 
Osobiście polecam photoshop'a
Link do obrazka wyżej:
https://imagizer.imageshack.us/v2/30x15q90/401/w644.png
kasztanek9994 - 23-02-2014, 17:49
chodzi o to, że on już ma na forum zrobione to właśnie w formie obrazka, ale chcesz zastosować CSS
[ Dodano: 23-02-2014, 19:19 ]
Lepszy sposób żeby uzyskać taki efekt w kodzie .css
1. Otwieramy plik nazwa_stylu/nazwa_stylu.css i dodajemy gdzieś na górze
| Kod: |
.rameczka {
display: inline-block;
height: 19px; /*szerokość*/
line-height: 19px; /*jeśli zmienisz szerokość tu dajesz taką samą wartość*/
padding: 1px 8px;
font-size: 12px; /*wielkosc czcionki*/
font-weight: bold; /*pogrubienie*/
color: white; /*kolor czcionki*/
text-shadow: rgba(0, 0, 0, 0.8) 0px 0px 1px; /*cień czcionki*/
-moz-border-radius: 3px; /*zaokrąglone rogi*/
-webkit-border-radius: 3px; /*zaokrąglone rogi*/
border-radius: 3px; /*zaokrąglone rogi*/
}
|
2. Jeśli chcemy użyć powyższego kodu:
| Kod: | | <div style="background:kolortła" class="rameczka">Dowolny tekst</div> |
Przykład na kolorze tła zielonym (ON)
| Kod: | | <div style="background:#6C0" class="rameczka">ON</div> |
Przykład na kolorze tła czerwonym (OFF)
| Kod: | | <div style="background:#FF0000" class="rameczka">OFF</div> |
Paletę kolorystyczną możecie znaleźć w google 
kamilabc1 - 23-02-2014, 19:28
dzięki wielkie  do zamknięcia
namelanzu - 20-06-2014, 23:41
kszatanek9994 ŚWIETNY JESTEŚ! Bardzo mi pomogłes. 
|
|
|
