Strona 1 z 1

: 30 paź 2005, 00:05:10
autor: linksworld
---------- 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".

: 30 paź 2005, 01:56:20
autor: bakterix
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.

: 30 paź 2005, 07:36:48
autor: ZeroKelvin
dla niego chyba trudno jest zapisac strone na hdd i analizowac ja! chlopie, pomysl sam jak cos zrobic, google nie boli!

: 01 lis 2005, 14:55:06
autor: linksworld
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.

: 01 lis 2005, 17:53:04
autor: porni
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...

: 01 lis 2005, 18:05:28
autor: linksworld
---------- 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:

Kod: Zaznacz cały

<html>
<head>
<style>
A
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
&#125;

A:hover
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

BODY
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

P
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

TD
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
border-style: inset;
-moz-border-radius: 2px;
border-size: 2px;
&#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> 

: 01 lis 2005, 18:05:52
autor: porni
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:

Kod: Zaznacz cały

<div id="div"> </div> 
CSS:

Kod: Zaznacz cały

#div &#123;
height: 100px;
width: 100px;
border-style: outset;
&#125;
 
PS.Pomyliło mi się,inset to będzie wypukłe do wewnątrz...

: 01 lis 2005, 18:23:53
autor: linksworld
---------- 19:14 01.11.2005 ----------

Widziałem gdzieś jeszcze coś takiego:

Kod: Zaznacz cały

-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:

Kod: Zaznacz cały

<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:

Kod: Zaznacz cały

.key-point:before &#123;
    line-height: 0.1;
    font-size: 1px;
    background: transparent url&#40;"../../images/key-point_tr.gif"&#41; no-repeat top right;
    margin: -15px -15px 0 -15px;
    height: 15px;
    display: block;
    border: none;
    content: url&#40;"../../images/key-point_tl.gif"&#41;;
&#125;
.key-point &#123;
    background: #EFF8CE url&#40;"../../images/key-point_back.gif"&#41; right repeat-y;
    padding: 15px;
    margin-top: 18px;
&#125;
.key-point:after &#123;
    display: block;
    padding-top: 15px;
    line-height: 0.1;
    font-size: 1px;
    content:  url&#40;"../../images/key-point_bl.gif"&#41;;
    margin: -15px;
    height: 8px;
    background: transparent url&#40;"../../images/key-point_br.gif"&#41; scroll no-repeat bottom right ;
&#125;
.install a &#123;
    background: url&#40;../../images/install.png&#41; no-repeat;
    padding: 3px 0 8px 30px;
    display: block;
    text-decoration: none;
&#125;

.install a strong &#123;
    text-decoration: underline;
&#125;

.install-box &#123;
    width: 18em;
&#125; 

: 01 lis 2005, 18:24:55
autor: porni
Taak ale te efekty obsługuje IE i niektóre tylko FF i Opera...
Miszczu jak jest grafika na background to sie nie zaznaczy...

: 01 lis 2005, 18:30:48
autor: linksworld
---------- 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 :?:

: 01 lis 2005, 18:48:43
autor: porni
Z przykrością stwierdzam że z czego wiem czegoś takiego NIE MA w CSS 2.0

: 01 lis 2005, 19:08:24
autor: linksworld
---------- 19:55 01.11.2005 ----------

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

Kod: Zaznacz cały

.key-point:after &#123;
   display: block;
   padding-top: 15px;
   line-height: 0.1;
   font-size: 1px;
   content:  url&#40;"../../images/key-point_bl.gif"&#41;;
   margin: -15px;
   height: 8px;
   background: transparent 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 :!:

Kod: Zaznacz cały

<html>
<head>
<style>
A
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
&#125;

A:hover
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

BODY
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

P
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

TD
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
-moz-border-radius: 22px;
&#125;

TABLE
&#123;
-moz-border-radius: 22px;
&#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:

Kod: Zaznacz cały

<html>
<head>
<style>
A
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
&#125;

A:hover
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

A:active
&#123;
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
&#125;

BODY
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

P
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
&#125;

TD
&#123;
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
border: 0px;
&#125;

TABLE
&#123;
-moz-border-radius: 22px;
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...

: 01 lis 2005, 19:17:16
autor: fuma
I po co zakładałeś ten temat jak sam do tego doszedłeś :?: Następnym razem pomyśl zanim załorzysz kolejny temat.

: 01 lis 2005, 19:48:31
autor: porni
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