phpBB2 by Przemo
Support forów phpBB2 modified by Przemo

FAQFAQ - PIERWSZA POMOC!!  regulaminREGULAMIN  SzukajSZUKAJ  UżytkownicyUżytkownicy  GrupyGrupy  StatystykiStatystyki
RejestracjaRejestracja  ZalogujZaloguj  DownloadDownload  katalog Forów DyskusyjnychKatalog Forów   FAQ Video tutoriale

Poprzedni temat «» Następny temat
Przesunięty przez: Boltex
23-02-2014, 19:49
Obramowany tekst
Autor Wiadomość
kamilabc1

Posty: 31
Wysłany: 23-02-2014, 15:41   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.
 
     
Gadatliwa Kasia 

   
#kasztanek9994


Pomógł: 127 razy
Posty: 690
Wysłany: 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>
_________________
- Naprawa polskich znaków w bazach MySQL
- Przenoszenie forum z serwera na serwer
- Tworzenie, kodowanie szablonów i wiele innych
kasztanek9994@gmail.com // gg:3440027
 
     
El_Tequila

Posty: 18
Wysłany: 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


Pomógł: 127 razy
Posty: 690
Wysłany: 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 :roll:
_________________
- Naprawa polskich znaków w bazach MySQL
- Przenoszenie forum z serwera na serwer
- Tworzenie, kodowanie szablonów i wiele innych
kasztanek9994@gmail.com // gg:3440027
 
     
kamilabc1

Posty: 31
Wysłany: 23-02-2014, 19:28   

dzięki wielkie :D do zamknięcia
 
     
namelanzu

Posty: 96
Wysłany: 20-06-2014, 23:41   

kszatanek9994 ŚWIETNY JESTEŚ! Bardzo mi pomogłes. :)
 
     
Wyświetl posty z ostatnich:   
Odpowiedz do tematu
Nie możesz pisać nowych tematów
Nie możesz odpowiadać w tematach
Nie możesz zmieniać swoich postów
Nie możesz usuwać swoich postów
Nie możesz głosować w ankietach
Nie możesz załączać plików na tym forum
Możesz ściągać załączniki na tym forum
Dodaj temat do Ulubionych
Wersja do druku

Skocz do:  

Kopiowanie wszelkich treści zawartych na forum, modyfikacji oraz instrukcji bez zgody administracji i autorów tematów/postów zabronione!

Powered by phpBB modified by Przemo © 2003 phpBB
Strona wygenerowana w 0,06 sekundy. Zapytań do SQL: 12
Polecane serwisy

Najlepsze oprogramowanie do prowadzenia sklepu internetowegoNajlepszy program do sklepu firmowany przez Przem'a

Sklep z gadżetami

serwis laptopów

phpbb

Design Cart - Tworzenie sklepu internetowego

iRonin.IT

• Zamów reklamę