Jak zrobić ładne ramki wyróżniające blok tekstu [CSS]?
![Jak zrobić ładne ramki wyróżniające blok tekstu [CSS]?](/files/groups/editors/tipsy/wyk1-240x180.jpg "Jak zrobić ładne ramki wyróżniające blok tekstu [CSS]?")
W wielu miejscach w Sieci natknąć się można na pola z wyróżnionych tekstem. Czasami jest to ostrzeżenie, a czasami służy jako podkreślenie lub oddzielenie pewnej porcji tekstu od innej. W tym tipsie pokażemy, jak zrobić takie ładne boksy.
Zaczynamy od znalezienia ładnej ikony reprezentującej (np. "!", jeśli mowa o ostrzeżeniu, lub np. ikony "i", jeśli mowa o treści informacyjnej). Dobry i darmowy zestaw ikon, idealnie nadający się do naszych celów, znaleźć można na stronie http://www.famfamfam.com/lab/icons/silk/.
Z całej paczki interesują nas dwie ikony, a zwłaszcza ta o nazwie exclamation.png.
Cały kod ogranicza się zaledwie do kilku linijek CSS:
.alert {
background: #fff6bf url(bioneural/exclamation.png) center no-repeat;
background-position: 15px 50%; /* x-pos y-pos */
text-align: left;
padding: 5px 20px 5px 45px;
border-top: 2px solid #ffd324;
border-bottom: 2px solid #ffd324;
}
Od teraz, aby skorzystać z nowej ramki należy w poście umieścić podobny kod:
<p class="alert">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
W rezultacie otrzymamy podobny widok jak ten poniżej:
źródło: bioneural.net
Warto przeczytać
Popularne
Nazwa padła ofiarą szantażystów, inni polscy hosterzy też zagrożeni?
19
Premiera Diablo 3 wzbudziła dyskusję na temat gier, które zawsze chcą być online
19
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Nowy problem z Windows 8: bootuje się za szybko
10
Amerykańscy rodzice straszeni „e-narkotykami” dostępnymi w Sieci
21
Z okazji wypuszczenia akcji Facebooka przypomnijmy sobie, kim jest Zuckerberg
10
Blueseed: libertariańska sztuczna wyspa przyciągnęła już ponad sto startupów z całego świata
8
Rewolucja w Firefoksie, nowa łatka czterokrotnie ograniczyła zużycie pamięci
20
-
Darmowy Internet od Aero2. Jak go zdobyć i jakie są prawdziwe koszta? Instrukcja krok po kroku
11
CVDazzle: makijaż jest w stanie pokonać automatyczne systemy ulicznego monitoringu
3
-
Programowanie w środowisku Android – wprowadzenie do projektowania aplikacji dla urządzeń mobilnych
17
Co czeka programistów po czterdziestce?
27
Ubuntu 12.04 LTS już dostępny: stabilna dystrybucja na następne pięć lat?
28
Społeczność
stop_gupota "Fanatyczny" Diablo 3 jest dopiero od 10 dni.-
Mas Ciekawa informacja, ale akurat projekt wytopu stali przez chłopów to był...
-
_Igancio Poziom artykułu jest bardzo niski ! Niczego się nie dowiedziałem , wygląda...
-
voluu A ja mam problem. MIanowicie, po dodaniu kodu z tego poradnika miniaturki...
-
Sebek Pozycjonowanie stron za pośrednictwem firm oferujących
swoje usługi nie...
-
asdosad jak to zrobić na xp??
-
lol Jak ktoś tu wcześniej zauważył - artykuł jest o niczym, a właściwie ukrytą...
- Najdmen.pl: Konta www z wyłączonym licznikiem transferu od IONIC.pl (1)
- 2BE.PL: [Oferta] Promocja jak złoto w 2BE.PL (1)
- gardius: Dobra hurtownia sportowa (1)
- gardius: Tanie książki gdzie warto kupować? (1)
- Najdmen.pl: PROMOCJA, 500 DOMEN .EU ZA 1 PLN NETTO ! (1)
- VMLine: [Oferta] Serwery VPS Xen-HVM/OpenVZ z darmową administracją (2)
- Marek: Generowanie PDFa (2)
Polecane książki
Praca
Czytaj Webhosting
Chcesz być na bieżąco z naszymi informacjami? Zapisz się na Newsletter.
Śledź nas: 
Zarejestruj domenę
Sprawdź dostępność swojej domeny:
| .pl: | 0 zł | .com: | 19.90 zł | |
|---|---|---|---|---|
| .com.pl: | 0 zł | .eu: | 19.90 zł |