czyli próby z CSS i HTML
forum o css
Kategorie: Wszystkie | omówienia | pytania | wątpliwości
RSS
wtorek, 20 kwietnia 2010

W ostatniej notce pisałam o nowych funkcjach w CSS3. Dzisiaj skupię się na okrągłych narożnikach. Spróbuję przybliżyć sposób w jaki je można uzyskać. Oczywiście bez korzystania z programu graficznego, tylko css.

1. Po pierwsze: element musi być otoczony borderem lub mieć odznaczającą się kolorem powierzchnię. Może mieć też i to, i to.
2. Po drugie: musimy w css wpisać kody dla każdej przeglądarki, która uwzględnia tę właściwość. Chodzi o to, aby odwiedzający nasz blog goście zobaczyli nasze dzieło:)

Za zaokrąglone rogi odpowiada właściwość border-radius i taki zapis w przyszłości będzie standardem.
Na razie jest tylko w Operze, będzie także w IE9 , inne przeglądarki obecnie dodają własne rozszerzenie.
I tak:
-moz-border-radius      - Firefoks, Galeon, Netscape
-webkit-border-radius   - Chrome, Safari
-icab-border-radius       - Mac 
-khtml-border-radius     - Konqueror
border-radius               - Opera, IE9 

A oto gotowa ramka otaczająca blockquote a pod nią zapis w css:

 

Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.

 

blockquote {
margin: 10px 10px 10px 20px;
padding: 0 10px 0 15px;
font-style:italic;
border: 2px solid #bdb76b;
-moz-border-radius: 10px;
border-radius: 10px;
-khtml-border-radius: 10px;
-icab-border-radius: 10px;
 -webkit-border-radius: 10px;

}

Dla ułatwienia pracy - link do generatora, nie tylko przedstawi nam wygląd naszych narożników, ale także poda zapis, który należy wkleić do arkusza CSS.

poniedziałek, 12 kwietnia 2010

Od jakiegoś czasu wiadomo było, że pewne efekty uzyskiwane w programie graficznym, będzie można zrobić za pomocą CSS. W przyszłości. Jakże się zdziwiłam i ucieszyłam zarazem, kiedy na blogu noa-1 mogłam podziwiać nowe właściwości CSS3 zastosowane w praktyce. Noa skierowała moją ciekawość do odpowiednich źródeł. Efektem ich przejrzenia jest dzisiejsza notka. Na początek coś mocnego, przycisk zrobiony całkowicie za pomocą CSS.

 

Piękny widok. Życzmy sobie, aby wszystkie przeglądarki obsługiwały właściwości zastosowane w buttonie. Widok piękny, niestety rzeczywistość piękna już tak nie jest. Niewiele jest tych przeglądarek, a jak już obsługują właściwość, to każda wymaga innego zapisu (czytaj: własnego). Wyjątkiem jest tu Opera, która wymaga zapisów standardowych. Jej minusem natomiast jest brak obsługiwania gradientów. Niespodzianką na plus jest IE9, która również stosuje standard (czyli to co w przyszłości będzie obwiązywać wszystkie przeglądarki).


Zaokrąglanie rogów obsługuje: Mozilla, Firefoks 3.5,  Galeon, Netscape (przeglądarki z silnikiem Gecko)
Mac,
Safari, Chrome
Konqueror
IE9
Opera

Cieniowany tekst:
Safari, Chrome
Opera 9.5
Firefoks 3.5

Gradient:
Safari, Chrome
Firefoks 3.6
IE9

Cień pod przyciskiem:
Safari, Chrome
Firefoks 3.5
Opera 10.5
IE9

Na koniec logo Opery, wygląd w różnych przeglądarkach. Oczywiście zrobione w css:)



Obrazek buttonu ściągnęłam z któregoś źródła, gdyż Opera nie obsługuje gradientów, niestety nie mogę trafić do linku z adresem. Gdy go znajdę, natychmiast wpiszę.
Znalazłam! Oto link

środa, 10 marca 2010

Wreszcie pojawił się nowy kod HTML w szablonie domyślnym, a ja zamiast się z tego cieszyć, czuje się rozgoryczona i zniechęcona. Nie wiem, czy jeszcze będzie mi się chciało zaczynać od nowa, czy znajdę determinację, aby rozgryźć tyle niewiadomych. Nowy kod mnie przeraził, jest długi, niesamowicie rozbudowany i niezrozumiały zarówno w zastosowaniu jak i w samych znacznikach. Nowy HTML ma być w szablonach domyślnych, czyli każdy, kto założy nowy blog, nie będzie mógł pobrać żadnego z dotychczas zrobionych szablonów, nie są bowiem kompatybilne. Setki szablonów można dać do kosza. Może nie tak od razu, ale przyszłości nie mają. Właśnie zrobiłam sześć nowych, wielkanocnych, możliwe, że będą ostatnimi w moim wydaniu.

PS. Minęło trochę czasu, coś się zmieniło. Nowy kod jest kompatybilny, czyli można ze starego szablonu przejść na nowy z nowym kodem HTML i odwrotnie:)

środa, 17 lutego 2010

Kolejnym sposobem na wyróżnienie komentarzy jest metoda E-maupy. Od poprzednio omawianej metody DeBergeraca różni się tym, że tylko przy komentarzu autora blogu widnieje awatar. 
1. Zaczynamy od przygotowania sobie obrazka o rozmiarze 48 X 48px (może być większy, lub nieco mniejszy) i wrzuceniu go do zasobów blogu czyli w PLIKI. Nazwa pliku jest obojętna, może to być avatar, ale niekoniecznie. Rozszerzenie jpg, gif, png.

2. Następnie udajemy sie na blog E-maupy http://maupa.blox.pl/2007/07/Komentarze-autora.html#ListaKomentarzy i klikamy w wyróżnione słowo "TUTAJ". Otworzy nam się nowa strona a na niej skrypt. Nic w nim nie poprawiamy, lecz zapisujemy go na nasz dysk, ja zapisuję na pulpit, mam go pod ręką;) Aby zapisać, należy kliknąć w słowo PLIK na pasku przeglądarki, a tam juz tylko w słowo zapisz i gotowe. Ściągnięty z blogu e-maupy plik wrzucamy do zasobów naszego blogu (tam gdzie obrazek awatara).



3. Powracamy znowu na blog E-maupy, aby skopiować Odwołanie do skryptu. Wklejamy go w polu na kod HTML (USTAWIENIA / BOCZNA SZPALTA).



Do pola na kod HTML, dojdziemy robiąc kilka kroków;)

4. Jeszcze tylko pozostało wpisać nam style w arkusz css i będzie gotowe. Wpiszemy nową klasę: .KomentarzAutora. Klikamy w WYGLĄD, potem w EDYCJA CSS i na końcu arkusza css wpisujemy ten oto kod:

.KomentarzAutora {
background: url(/resource/nazwa_pliku.zrozszerzeniem) no-repeat top left;
padding-left: 50px;
}

Pamiętać należy o wpisaniu swojej nazwy pliku wraz z rozszerzeniem.
Ile będzie wynosił padding-left, zależy od szerokości obrazka, ja założyłam, że skoro obrazek ma 48px to odstęp 50px powinien wystarczyć, ale można dać więcej.
Pisałam tę instrukcję bardzo szczegółowo, bo wiem, że dla początkujących coś co nam wydaje sie oczywiste i wiadome, może takie nie być:)

wtorek, 09 lutego 2010

No to mnie dopadło. Instrukcje, tłumaczenia innym, a sama nie potrafię wyjaśnić zaistniałej sytuacji.
Chciałam sprawdzić metodę eMaupy na wyróżnienie komentarzy ale tylko właściciela bloga, awatar byłby tylko przy jego odpowiedzi. Wrzuciłam do zasobów ładny obrazek, zrobiłam wszystko czego autor wymagał i moim oczom ukazał się, a owszem owszem obrazek, ale nie ten, który umieściłam w zasobach. Jako awatar wystąpił mój z koteczkiem. Muszę dodać, że działo się to na blogu roboczym, na którym w zasobach nie ma tego pliku. Skoro tak, to z wszystkich moich blogów, na których piszę, usunęłam pliki z obrazkiem kotka, Naiwnie ufając nauce, że jeśli czegoś nie ma, to się nie pokaże. Ha, a nie! W dalszym ciągu na Blogu Irytka i w Szablonach Irytka w komentarzach jako awatar widnieje mój koteczek! I co ja mam o tym myśleć? Dlaczego tak się dzieje? Wolałabym mieć kontrolę nad tym co i kiedy się ukazuje na moich blogach. Czy ktoś mógłby mi wytłumaczyć to zjawisko? Niby kota nie ma, a jednak jest.

Wnioski po kilku dniach:
Jesli mamy wyróżnione komentarze metodą DeBergeraca (czyli każdy wpisujący zostawia swój awatar), a blogów posiadamy kilka, to na wszystkich będzie jeden i ten sam obrazek. Nie możemy na jednym blogu np. mieć kotka na obrazku, a na drugim np. filiżankę. Skrypt do wyróżnienia komentarzy działa podobnie jak moje logo, obrazek jest w zasobach jednego bloga, ale każdy, kto wklei w swoim polu na kod HTML wywołanie do skryptu, zobaczy pod zakładkami owe logo, choć w zasobach bloga nie ma tego obrazka.

Jeśli dojdziemy do wniosku, że teraz chcemy przy komentarzach mieć tylko swój awatar, bez awatarów gości, to musimy usunąć z bloga wszystkie elementy skryptu DeBergeraca, czyli jego odwołanie z pola na kod HTML. No i obrazek, jeżeli nam się już opatrzył. Metodę z jednym awatarem przybliżę w kolejnej notce.

 
1 , 2 , 3 , 4 , 5 ... 11