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/".
Niektóre elementy są w formacie "wypukłych okienek"
Całe komórki tabel są łączami bez skryptów
Baardzo szybko się ładuje
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
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
}
A:hover
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
BODY
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
P
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
TD
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
border-style: inset;
-moz-border-radius: 2px;
border-size: 2px;
}
</style>
</head>
<body>
<center>
<TABLE>
<TR height=18px>
<TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now </A> (147 KB File)</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:
CSS:
Kod: Zaznacz cały
#div {
height: 100px;
width: 100px;
border-style: outset;
}
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:
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(event,'LO-FI_0.7 0.7');" title="Install LO-FI_0.7 0.7 (Right-Click to Download)">Install Now</a></b> (346 KB File)</div>
---------- 19:23 ----------
A tutaj fragment CSS-a:
Kod: Zaznacz cały
.key-point:before {
line-height: 0.1;
font-size: 1px;
background: transparent url("../../images/key-point_tr.gif") no-repeat top right;
margin: -15px -15px 0 -15px;
height: 15px;
display: block;
border: none;
content: url("../../images/key-point_tl.gif");
}
.key-point {
background: #EFF8CE url("../../images/key-point_back.gif") right repeat-y;
padding: 15px;
margin-top: 18px;
}
.key-point:after {
display: block;
padding-top: 15px;
line-height: 0.1;
font-size: 1px;
content: url("../../images/key-point_bl.gif");
margin: -15px;
height: 8px;
background: transparent url("../../images/key-point_br.gif") scroll no-repeat bottom right ;
}
.install a {
background: url(../../images/install.png) no-repeat;
padding: 3px 0 8px 30px;
display: block;
text-decoration: none;
}
.install a strong {
text-decoration: underline;
}
.install-box {
width: 18em;
}
: 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 {
display: block;
padding-top: 15px;
line-height: 0.1;
font-size: 1px;
content: url("../../images/key-point_bl.gif");
margin: -15px;
height: 8px;
background: transparent url("../../images/key-point_br.gif") scroll no-repeat bottom right ;
}
---------- 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
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
}
A:hover
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
BODY
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
P
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
TD
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
-moz-border-radius: 22px;
}
TABLE
{
-moz-border-radius: 22px;
}
</style>
</head>
<body>
<center>
<TABLE border=1px>
<TR height=18px>
<TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now </A> (147 KB File)</TD>
</TR>
</TABLE>
</center>
</body>
</html>
---------- 20:07 ----------
Lepszy przykład
Sprawdźcie to:
Kod: Zaznacz cały
<html>
<head>
<style>
A
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #003399;
display: block;
}
A:hover
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: none;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
A:active
{
text-decoration: underline;
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
color: #333333;
display: block;
}
BODY
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
P
{
font-family: Verdana;
font-size: 10pt;
font-weight: bold;
font-style: normal;
display: block;
}
TD
{
font-family: Verdana;
font-size: 10pt;
font-weight: normal;
font-style: normal;
display: block;
border: 0px;
}
TABLE
{
-moz-border-radius: 22px;
background: #EFF8CE;
}
</style>
</head>
<body>
<center>
<TABLE border=1px>
<TR height=18px>
<TD width=200px> <A HREF="http://www.puma.kw.pl">Install Now </A> (147 KB File)</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