CSS -- Sztuczki

Wszystko o HTML, XHTML, XML, CSS.
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

Postautor: linksworld » 30 paź 2005, 00:05:10

---------- 00:01 30.10.2005 ----------

Pomocy. :)
Chciałbym, by moja strona była podobna pod kilkoma względami do "http://addons.mozilla.org/" i "http://mozilla.org/".

:arrow: Niektóre elementy są w formacie "wypukłych okienek"
:arrow: Całe komórki tabel są łączami bez skryptów
:arrow: Baardzo szybko się ładuje
:arrow: Ma możliwość wyszukiwania

PS: Jak sama nazwa tematu mówi, to ma być czysty CSS :!:

---------- 00:05 ----------

Zobaczcie np.:

Adres: https://addons.mozilla.org/themes/moreinfo.php?id=1404
a w nim część z napisem "Install Now"
Jeśli przeciągniecie z wciśniętym lewym przyciskiem myszy po pustej części tego łącza, zostanie zaznaczony tekst.
Obrazek jest tłem w komórce, a tło tabeli to ten kolor.
Tabela ma jeszcze jakieś parametry, dzięki czemu jest "wypukła".
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
bakterix
Posty: 95
Rejestracja: 03 lip 2005, 09:14:23
Reputacja: 1
Lokalizacja: Puławy
Płeć: Niewybrana
User Agent: Firefox Linux 1024x768
Kontakt:

Postautor: bakterix » 30 paź 2005, 01:56:20

Sorka za odpowiedź w tym stylu ale skoro używasz FF to znajdź sobie wtyczke o nazwie "Web Developer" jest bardzo pomocna w analiwowaniu stron i znią każdą nawet najbardziej zagmatfaną strone zroumiesz łącznie ze wszystkimi sztuczkami czy to css czy js.
Awatar użytkownika
ZeroKelvin
Posty: 734
Rejestracja: 16 sie 2005, 23:04:29
Reputacja: 2
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: ZeroKelvin » 30 paź 2005, 07:36:48

dla niego chyba trudno jest zapisac strone na hdd i analizowac ja! chlopie, pomysl sam jak cos zrobic, google nie boli!
those who watch their backs meet death from the front
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows 1024x768
Kontakt:

Postautor: linksworld » 01 lis 2005, 14:55:06

Nie myślcie, że jestem tępy :!:
WebDeveloper mam od dawna...
I całe G z niego mam...
Używając WinHTTrack pobierałem całe witryny i też całe G z tego mam...
Do tej pory mam phpBB, Operę i jeszcze jakieś strony na hd.
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 01 lis 2005, 17:53:04

1.wypukłe ramki to border-style:inset;
2.możliwośc wyszukiwania to napewno nie css(to nie język skryptowy)
3.szybko się ładuje...optyamlizacja kodu strony...
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: linksworld » 01 lis 2005, 18:05:28

---------- 19:02 01.11.2005 ----------

Wiesz, porni, od niedawna mam do czynienia z CSS...
Nie mógłbyś mi podać przykładowego kodu z tym "border-style:inset" :?:

I jeszcze jedno: te ramki wokół "div-a" są zaokrąglone na brzegach.

---------- 19:05 ----------

By sprawdzić, czy to działa zrobiłem plik test.html o zawartości:

CodeColon Select All Code

<html>
<
head>
<
style>
A
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#003399;
displayblock;
&
#125;

A:hover
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationunderline;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

BODY
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

P
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

TD
&#123;
font-familyVerdana;
font-size10pt;
font-weightnormal;
font-stylenormal;
displayblock;
border-styleinset;
-
moz-border-radius2px;
border-size2px;
&
#125;
</style>
</
head>
<
body>
<
center>
<
TABLE>
<
TR height=18px>
<
TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now&nbsp;&nbsp;</A>&nbsp;&#40;147 KB File&#41;</TD>
</TR>
</
TABLE>
<
img src="file:///D:/Dokumenty/Moje%20obrazy/mozilla%20design/left%20nav%20panel/edges/logobg.png">
</
center>

</
body>
</
html
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 01 lis 2005, 18:05:52

Tego (zaokrąglone ramki) się nie da za pomocą css'a zrobić. Czytałem jakiegoś arta kiedyś to to się za pomocą grafiki robi.
Przykładowe zastosowanie??:
HTML:

CodeColon Select All Code

<div id="div"> </div

CSS:

CodeColon Select All Code

#div &#123;
height100px;
width100px;
border-styleoutset;
&
#125;
 

PS.Pomyliło mi się,inset to będzie wypukłe do wewnątrz...
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Flock Windows
Kontakt:

Postautor: linksworld » 01 lis 2005, 18:23:53

---------- 19:14 01.11.2005 ----------

Widziałem gdzieś jeszcze coś takiego:

CodeColon Select All Code

-moz-border-radius:8px


To jest zaokrąglenie rogów. Można to zastosować w kodzie podanym przeze mnie :?:

---------- 19:18 ----------

Jakto nie w CSS :?:
Wejdź na Mozilla Update i wybierz "Zaznacz wszystko".

Co widzisz w okolicy napisu "Install Now" :?:
Tekst, tekst i jeszcze raz tekst.

---------- 19:19 ----------

¬rodło okienka "Install Now" wygląda tak:

CodeColon Select All Code

<div class="install"><b><a href="http://ftp.mozilla.org/pub/mozilla.org/themes/lo-fi_0.7/lo-fi_0.7-0.7-fx+mz.jar" onclick="return installTheme&#40;event,'LO-FI_0.7 0.7'&#41;;" title="Install LO-FI_0.7 0.7 &#40;Right-Click to Download&#41;">Install Now</a></b>&nbsp;&#40;346&nbsp;KB&nbsp;File&#41;</div> 


---------- 19:23 ----------

A tutaj fragment CSS-a:

CodeColon Select All Code

.key-point:before &#123;
    
line-height0.1;
    
font-size1px;
    
backgroundtransparent url&#40;"../../images/key-point_tr.gif"&#41; no-repeat top right;
    
margin: -15px -15px 0 -15px;
    
height15px;
    
displayblock;
    
bordernone;
    
contenturl&#40;"../../images/key-point_tl.gif"&#41;;
&#125;
.key-point &#123;
    
background#EFF8CE url&#40;"../../images/key-point_back.gif"&#41; right repeat-y;
    
padding15px;
    
margin-top18px;
&
#125;
.key-point:after &#123;
    
displayblock;
    
padding-top15px;
    
line-height0.1;
    
font-size1px;
    
content:  url&#40;"../../images/key-point_bl.gif"&#41;;
    
margin: -15px;
    
height8px;
    
backgroundtransparent url&#40;"../../images/key-point_br.gif"&#41; scroll no-repeat bottom right ;
&#125;
.install a &#123;
    
backgroundurl&#40;../../images/install.png&#41; no-repeat;
    
padding3px 0 8px 30px;
    
displayblock;
    
text-decorationnone;
&
#125;

.install a strong &#123;
    
text-decorationunderline;
&
#125;

.install-box &#123;
    
width18em;
&
#125; 
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 01 lis 2005, 18:24:55

Taak ale te efekty obsługuje IE i niektóre tylko FF i Opera...
Miszczu jak jest grafika na background to sie nie zaznaczy...
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Flock Windows
Kontakt:

Postautor: linksworld » 01 lis 2005, 18:30:48

---------- 19:29 01.11.2005 ----------

Jeśli ktokolwiek z Was rozumie ten kod, proszę "tłumaczcie go".

Offtopic: Przetestujcie przeglądarkę Flock

---------- 19:30 ----------

A te "content: url("../../images/key-point_tl.gif");" i cośtam:after i cośtma:before :?:

Można robić :after i :before :?:
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 01 lis 2005, 18:48:43

Z przykrością stwierdzam że z czego wiem czegoś takiego NIE MA w CSS 2.0
Awatar użytkownika
linksworld
Posty: 370
Rejestracja: 09 paź 2005, 14:02:14
Reputacja: 0
Płeć: Niewybrana
User Agent: Flock Windows
Kontakt:

Postautor: linksworld » 01 lis 2005, 19:08:24

---------- 19:55 01.11.2005 ----------

Hmm... no to jak wyjaśnisz to:

CodeColon Select All Code

.key-point:after &#123;
   
displayblock;
   
padding-top15px;
   
line-height0.1;
   
font-size1px;
   
content:  url&#40;"../../images/key-point_bl.gif"&#41;;
   
margin: -15px;
   
height8px;
   
backgroundtransparent url&#40;"../../images/key-point_br.gif"&#41; scroll no-repeat bottom right ;
&#125; 


---------- 20:03 ----------

Nie da się zaokrąglić tabelki :?: W Operze/Firefoksie/Mozilli/Flock-u się da :!:
Sprawdź to w jednej z nich :!:

CodeColon Select All Code

<html>
<
head>
<
style>
A
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#003399;
displayblock;
&
#125;

A:hover
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationunderline;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

BODY
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

P
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

TD
&#123;
font-familyVerdana;
font-size10pt;
font-weightnormal;
font-stylenormal;
displayblock;
-
moz-border-radius22px;
&
#125;

TABLE
&#123;
-moz-border-radius22px;
&
#125;
</style>
</
head>
<
body>
<
center>
<
TABLE border=1px>
<
TR height=18px>
<
TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now&nbsp;&nbsp;</A>&nbsp;&#40;147 KB File&#41;</TD>
</TR>
</
TABLE>
</
center>
</
body>
</
html


---------- 20:07 ----------

Lepszy przykład :!: Sprawdźcie to:

CodeColon Select All Code

<html>
<
head>
<
style>
A
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#003399;
displayblock;
&
#125;

A:hover
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationnone;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

A:active
&#123;
text-decorationunderline;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
color#333333;
displayblock;
&
#125;

BODY
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

P
&#123;
font-familyVerdana;
font-size10pt;
font-weightbold;
font-stylenormal;
displayblock;
&
#125;

TD
&#123;
font-familyVerdana;
font-size10pt;
font-weightnormal;
font-stylenormal;
displayblock;
border0px;
&
#125;

TABLE
&#123;
-moz-border-radius22px;
background#EFF8CE;
&#125;
</style>
</
head>
<
body>
<
center>
<
TABLE border=1px>
<
TR height=18px>
<
TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now&nbsp;&nbsp;</A>&nbsp;&#40;147 KB File&#41;</TD>
</TR>
</
TABLE>
<
img src="file:///D:/Dokumenty/Moje%20obrazy/mozilla%20design/left%20nav%20panel/edges/logobg.png">
</
center>
</
body>
</
html


---------- 20:08 ----------

Do moderatorów: zamknijcie już ten temat...
:arrow: Przyszłe forum, na które wszystkich Was zapraszam.
Awatar użytkownika
fuma
Przyjaciel CBA
Posty: 11168
Rejestracja: 01 sie 2005, 14:57:56
Reputacja: 201
Lokalizacja: z jajka niespodzianki :P
Płeć: Mężczyzna
User Agent: Firefox Windows 1024x768

Postautor: fuma » 01 lis 2005, 19:17:16

I po co zakładałeś ten temat jak sam do tego doszedłeś :?: Następnym razem pomyśl zanim załorzysz kolejny temat.
porni
Posty: 1354
Rejestracja: 08 lip 2005, 18:33:05
Reputacja: 8
Płeć: Niewybrana
User Agent: Firefox Windows
Kontakt:

Postautor: porni » 01 lis 2005, 19:48:31

Pozatym narazie nie radze Ci używać efektów innych niż -moz-border-radius bo nie są lub są kiepsko interpretowane przez normalne przeglądarki-FF,Opera.Ten akurat jest, ale inne typu filter: Chroma napewno nie(ew. Opera 9 ale watpie).One wogóle nie wchodzą w skład specyfkacji CSS więc poki co nie radze.Może CSS 3.0

Wróć do „HTML, CSS”

Kto jest online

Użytkownicy przeglądający to forum: Obecnie na forum nie ma żadnego zarejestrowanego użytkownika i 1 gość