Jdi na obsah Jdi na menu
 


Změna písma v celém blogu

Chcete mít v celém blogu stajné písmo (+ velikost, barvu atd. ) ?
body { font-family: Verdana;
           font-color: #000000
           font-style: italic;
           font-weight: bold;
           font-size: 14px; }

Vysvětlivky:
Verdana  -je druh písma, který si můžete změnit podle sebe.
Tip: Můžete si třeba vyhledat nějaké písmo ve Wordu a potom jen dopsat jeho název.

#000000 -je barva písma.

italic        -písmo bude kurzivé
Tip: Pokud nechcete aby písmo bylo kurzivé ale normální, tak změňte italic na normal.

bold        -znamená, že písmo bude tučné.
Tip: Místo bold můžete taky zadat normal (písmo bude normální) nebo lighter (písmo bude světlejší).

14           -je velikost písma.

Chcete, aby v blogu bylo stajné písmo bez velikosta, barvy atd. ?
body { font-family: Verdana;  }

18.10.2006 10:51 - HTML&CSS - trvalý odkaz

Obarvení kategorií

Jak obarvit kategorie.

Obarvení kategorii.
a { color: barva; }

Barva navštívených kategorií.
a:visited { color: barva; text-decoration: none; }
none- kategorie nebudou podtržené.

Barva kategorií, když po nich přejíždíte.
a:hover {  color: barva;   text-decoration: none;}
Tip: můžete i připojit třeba pozadí, orámování a různý.

Barva kategorie, ve které se zrovna nacházíte.
.kategorie .zvoleno, .kategorie .zvoleno:visited {
 color: barva;}

 

17.10.2006 10:52 - HTML&CSS - trvalý odkaz

Zarovnání

Kategorie

.sloupek {text-align: left;}

left- zarovnání doleva
right- zarovnání doprava
center- zarovnání doprostřed

 


Logo

Logo doprava
.hlavicka { margin:2em 200px 2em 20px; padding:0; border:none; text-align:right; }
.logo { display:block; float:none; margin:0 auto; }

 
Logo doleva
hlavicka { margin:2em 200px 2em 20px; padding:0; border:none; text-align:left; }
.logo { display:block; float:none; margin:0 auto; }
 
Logo doprostřed
.hlavicka { margin:2em 200px 2em 20px; padding:0; border:none; text-align:center; }
.logo { display:block; float:none; margin:0 auto; }

 

 

 

16.10.2006 10:54 - HTML&CSS - trvalý odkaz

Mažu, mažeš, maže

kategorii nezařazeno:
.nezarazeno { display: none; }

logo:
.logo { display: none; }

archív:
.archiv {display: none; }

rss:
.rss {display: none; }

kalendář:
.kalendar { display: none; }

název blogu:
.nazevblogu { display: none; }

popis blogu:
.popisblogu { display: none; }

smazání lišty seznamu
#SZNHLAVICKA {visibility: hidden;}

11.10.2006 10:41 - HTML&CSS - trvalý odkaz

Kolem obrázků nebudou rámečky

Obrázky fung.
jako odkaz bez rámečků


Celý blog bez rámečků

19.09.2006 12:35 - HTML&CSS - trvalý odkaz

Rozluštěmí šablony

body { background-color: doplň barvu;color: black; } = barva pozadí blogu; anglicky napsaná barva označuje barvu písma příspěvků, barvu názvu blogu a popisu blogu a také barvu nadpisů v html sloupku 

.sloupek { =html sloupek

 top: 72 px; = vzdálenost od horního okraje

 left: 11px; = vzdálenost od levého okraje

 margin-left: 0px;

 color: doplň barvu; =barva nadpisů, ohraničení ve sloupku

 border: 0px outset white; =po vložení tohoto kódu bude sloupek bez ohraničení (bez rámečku)

}

.prispevky {

 margin-left: 193px; =vzdálenost zleva

 margin-right: 3px; = vzdálenost zprava

 background-color: doplň barvu; = pokud v css použiješ tento kódík, bude pod články pozadí uvedené barvy

}

.prispevek {

 border: 1px solid; =styl a šířka rámečku kolem příspěvků

 border-color: doplň barvu; =barva rámečku

}

.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok, {

 border: 1px solid; =rámečky

 margin: 1px;

 background-color: doplň barvu; =barva sloupečku

}

.kategorie-titulek { =po kliknutí na určitou kategorii se vypíší články s kategorie a nad nimi se objeví název kategorie, tímto nastavíš jak bude vypadat:

 background-color: doplň barvu; =barva pozadí nápisu

 color: white; =barva nápisu

}

.prispevek h2 { =velikost a barva nadpisu příspěvku (velikosti jsou h1,h2 atd.)

  color: doplň barvu; =barva nadpisu

}

 

18.09.2006 15:25 - HTML&CSS - trvalý odkaz

Klik

<SCRIPT LANGUAGE="JavaScript">
   function helloWorld()
   {
      alert("Ahojky! Jak se máš?")
   }
</SCRIPT>
<FORM>
   <INPUT TYPE=button NAME="clik me" VALUE=" !Klikni sem! "  onClick="helloWorld();">
</FORM>

 

Místo zeleného textu dej svůj text.

Tohle vznikne:

Kódík vložte do HTML sloupku.

12.09.2006 18:22 - HTML&CSS - trvalý odkaz

Jezdící texty

<marquee>jezdící text doleva</marquee>

jezdící text doleva

 

<marquee direction="right">jezdící text doprava</marquee>

jezdící text doprava

 

<marquee behavior="alternate">jezdící text tam a zpět</marquee>

jezdící text tam a zpět

 

<marquee direction="down">jezdící text dolů</marquee>

jezdící text dolů

 

<marquee directio

 

jezdící text nahorů

n="up">jezdící text nahorů</marquee>

 

 

09.09.2006 11:21 - HTML&CSS - trvalý odkaz

Základní CCS šablona

Design není jednoduchá záležitost, kterou vytvoříte za pár minut.
Často to trvá i několik dnů a proto mám pro vás šablonu, podle, které můžete
svůj design navrhnout.
CSS slovník má spousty celkem rozluštitelných výrazů,
stačí jim jen trochu porozumět ;) a všechno půjde samo...
Design lze ještě zkombinovat s kódy do html sloupku, např. pozadí a podobně.

#SZNHLAVICKA { visibility: hidden;}
a:link {decoration:none;}
.permonik A:visited { color: black; }
.oprispevku .cas { color: #b8860b; }
.komentare .kom-form { background-color: FFFFF; }
.komentare .warn { color: black; }
.prispevky .komentar .pocet { border: 1px solid black; font-weight: normal; font-style: normal; font-size: 10px; font-family: Calligraph421 BT; background-color: white; color: #FF9933; }
.sloupek .kategorie.nezarazeno  { display:none; }
.uzivatel-blok { display: none; }
.archiv-blok { display: none; }
.body { font-size: 13px; }
.body { font-family: Trebuchet MS; }
.popisblogu {font-size: 13px; color: black; text-align: right; font-style: normal; margin-right: 12px;}
.prispevek { font-size: 13px; color: #FF9933; border: none; background: white;}
h2 {font-size: 15px; color: #0066cc;}
.hlavicka { margin:2em 2em 0px; padding:; border: none;text-align:center; }
.logo { display:block; float:none; margin:10 auto; }
.nazevblogu { display:none }
.kategorie-titulek {border: none; border-color: white; color: black; background-color: ;}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok {margin: 5px; font-size: x-small; background-color: transparent; border: 6px solid white;}
.oprispevku { color: #b8860b;}
.kalendar .clanky {background-color: black;}
body {
  background-color: FFFFF;
  color: #FF9933;
         border: 2px dashed #CCFF33
}
a, a:visited {
 color: #FF0033;
}
.sloupek {
 border:2px dashed #CCFF33 ;
 border-left: 2px dashed #CCFF33;
 left: 281px;
 margin-right: 85px;
 padding: 0px;
 background-color: white
       
}
.prispevky {
 margin-left: 300px;
 margin-right: 205px;
}
.prispevek {
 border: 2px dashed #CCFF33;
 border-bottom: 2px dashed #CCFF33;
        border-left: 2px dashed #CCFF33;
        padding: 10px;
        background-color: white
}
.kategorie-blok, .uzivatel-blok, .html-blok, .archiv-blok {
 margin: 5px;
 background-color: white;
        border: ;
}
.kategorie-titulek {
 color: #FF9933;
        border: 2px dashed #CCFF33;
        border-bottom:2px dashed #CCFF33 ;
        background-color: #CCFF33;
}
.kategorie-nadpis {
        border: 2px dashed #CCFF33;
}
.prispevek h2 {
 color: #FF9933;
        border: 2px dashed #CCFF33;
        border-bottom: 2px dashed #CCFF33;
        border-left: 2px dashed #CCFF33
        background-color: white;    
      
}
.komentare .cas {
 color: #CCFF33;
}
.kategorie .zvoleno, .kategorie .zvoleno:visited {
 color: CCFF33;

Vysvětlivky:
Font size= Velikost fontu
Background-color= Barva pozadí
Left,Right=Vlevo,Vpravo
Transparent= transparentní,průhledný
CCFF33=  Kod barvy např příspěvku nebo sloupěčku nebo písma
05.09.2006 12:17 - HTML&CSS - trvalý odkaz

Přechody

Kruhový
 
Hvězdový
 
Prolínání
 
Ze shora dolů
 
Zrnění
04.09.2006 10:55 - HTML&CSS - trvalý odkaz

Chcete takovéhle menu?

 
 
HTML kod:

<P></P>

<head><style type="text/css">

#coolmenu{
border: 1px solid #66FFFF;
width: 170px;
background-color: #99FF66 ;
}

#coolmenu a{
font: bold 13px Comic Sans MS;
padding: 2px;
padding-left: 4px;
display: block;
width: 100%;
color: black ;
text-decoration: none;
border-bottom: 1px solid #66FFFF;
}

html>body #coolmenu a{
width: auto;
}

#coolmenu a:hover{
background-color: #66FFFF;
color: black;
}

#tabledescription{
width: 100%;
height: 3em;
padding: 2px;
filter:alpha(opacity=0);
-moz-opacity:0;
}

</style>

<script type="text/javascript">

// Cool CSS Menu- By JavaScriptKit.com (http://www.javascriptkit.com)
// For this and over 400+ free scripts, visit JavaScript Kit- http://www.javascriptkit.com/
// Fading routine based on Dynamic Drive script: http://www.dynamicdrive.com/dynamicindex4/highlightgrad.htm
// This notice must stay intact for use

var baseopacity=0

function showtext(thetext){
if (!document.getElementById)
return
textcontainerobj=document.getElementById("tabledescription")
browserdetect=textcontainerobj.filters? "ie" : typeof textcontainerobj.style.MozOpacity=="string"? "mozilla" : ""
instantset(baseopacity)
document.getElementById("tabledescription").innerHTML=thetext
highlighting=setInterval("gradualfade(textcontainerobj)",50)
}

function hidetext(){
cleartimer()
instantset(baseopacity)
}

function instantset(degree){
if (browserdetect=="mozilla")
textcontainerobj.style.MozOpacity=degree/100
else if (browserdetect=="ie")
textcontainerobj.filters.alpha.opacity=degree
else if (document.getElementById && baseopacity==0)
document.getElementById("tabledescription").innerHTML=""
}

function cleartimer(){
if (window.highlighting) clearInterval(highlighting)
}

function gradualfade(cur2){
if (browserdetect=="mozilla" && cur2.style.MozOpacity<1)
cur2.style.MozOpacity=Math.min(parseFloat(cur2.style.MozOpacity)+0.2, 0.99)
else if (browserdetect=="ie" && cur2.filters.alpha.opacity<100)
cur2.filters.alpha.opacity+=20
else if (window.highlighting)
clearInterval(highlighting)
}

</script></head>
<div id="coolmenu">
<a href="http://www.maxsite.cz/serv/gbook/index.php?ank=44423afad3cb61145191162" onMouseover="showtext('Pro vás o vás.')" onMouseout="hidetext()"> Návštěvní kniha</a>
<a href="http://blog.lide.cz/goodkamoska/diskuzniforum/" onMouseover="showtext('Mluvte o čemkoliv !')" onMouseout="hidetext()">Fórum</a>
<a href="http://blog.lide.cz/goodkamoska/forumproblogare/" onMouseover="showtext('Otázky ohledně blogů a webů. Jen vstupte! :)')" onMouseout="hidetext()">Blogařské fórum</a>
<a href="http://blog.lide.cz/goodkamoska/pratelskeblogy/" onMouseover="showtext('Spřátelené blogy. Co říct ?')" onMouseout="hidetext()">Přátelské blogy</a>
<a href="http://blog.lide.cz/goodkamoska/superodkazy/" onMouseover="showtext('Odkazy aneb co jsem ulovila.')" onMouseout="hidetext()">Odkazy</a>
<a href="http://blog.lide.cz/goodkamoska/oblogu/" onMouseover="showtext('Informace o mým blogu + novinky.')" onMouseout="hidetext()">O blogu</a>
<a href="http://blog.lide.cz/goodkamoska/mojeikonky/" onMouseover="showtext('Jen se na ně jukněte.')" onMouseout="hidetext()">Moje ikonky</a>
<a href="http://blog.lide.cz/goodkamoska/meztresteneja/" onMouseover="showtext('O mě aneb Kdo je vlastně Goodkamoska ?')" onMouseout="hidetext()">Mé ztřeštěné já</a>
<a href="http://blog.lide.cz/goodkamoska/mujdenik/" onMouseover="showtext('Názory, příhody, včera, dnes, zítra...prostě Můj Deníček')" onMouseout="hidetext()">Můj deník</a>

<div id="tabledescription"></div>
</div>

<P></P>

 

 

Vysvětlivky:

Barva orámování
velikost orámování
Druh orámování
Pozadí
Tučné písmo
Velikost písma
Druh písma
Barva písma
Nastavení dolního orámování (zase velikost, barva a druh orámování)
Barva pozadí při najetí na odkaz
Odkaz na kategorii
Popis kategorie
Název kategorie

03.09.2006 10:58 - HTML&CSS - trvalý odkaz

Pozadí...

...za příspěvky

.prispevek { background-image: url(http:// zde napište celou url adresu pozadí nebo barvu .gif);
}

Když tam chcete dát barvu:
.prispevek { background-color: green;
}

...na pozadí

.kategorie-blok,
.uzivatel-blok,
.html-blok,
.archiv-blok {  background-image: url(http:// zde napište url adresu vámi zvoleného pozadí);}

Můžete zvolit a takový zápis:

.sloupek {  background-image: url(http:// zde napište url adresu vámi zvoleného pozadí);}

Můžete zkusit obě varianty a zvolit tu, která se vám bude nejvíce líbit.

Pozor !!!! Jestli chcete mít v pozadí nějakou barvu, tak zápis bude vypadat takhle:

.kategorie-blok,
.uzivatel-blok,
.html-blok,
.archiv-blok {  background-color: green;}

.sloupek {  background-color: green

...do blogu v html

<DIV class="html-blok"><body background="http://zde napiš celou adresu url obrázku .jpg" >

Jak zjistit url obrázku ?

1. Vyberte si nějaký obrázek

2. Klikněte na něj pravým talčítkem myši

3. Klikněte na Vlastnosti

Jak vložit kodik, nebo i jiné věci ?

1. Podsviťte věc, kterou chcete někam vložit

2. Stiskněte ctrl + c ( bez toho plus )

3. Klikněte tam, kam chcete aby se vámi vybraná věc vložila.

4. Stiskněte ctrl + v ( opět bez plus )

5. Nyní můžete uložit

Pozn.: Podsvítit je jako kdybyste chtěli vymazat nějaký text, tak jej "označíte" myší. Když je věc podsvícená, poznáte podle toho, že zmodrá.

Postup si můžete vyzkoušet třeba na tomto obrázku.

Preview As Background

 

 

...na blog

body { background-color: blue; }

Můžete zvolit i jinou barvu.

 

Chcete-li mít pozadí nějaké vzorované, nebo chcete mít v pozadí obrázky, udělejte zápis takhle:

body { background-image: url(http:// url vámi vybraného obrázku);}

Jak zjistit url obrázku.

1. Vyberte si nějaký obrázek

2. Klikněte na něj pravým talčítkem myši

3. Klikněte na Vlastnosti

4. Podsviťte URL adresu

5. Stiskněte ctrl + c ( bez toho plus )

6. V tomto zápisu body { background-image: url (http:// url vámi vybraného obrázku);} podsviťte to, co máte napsané zelené a stiskněte ctrl + v ( opět bez toho plus )

7. Nyní můžete uložit

Vypadá to složitě, ale potom možná pochopíte, že na tom není nic tak moc těžkého.

Zkuste si to třeba na tomto obrázku.

Preview As Background

18.08.2006 15:23 - HTML&CSS - trvalý odkaz

Odkazy

Odkaz bez podtrhnutí

Otevření bez kliknutí

(Infor při najetí na odkaz

Otevření v novém okně

18.08.2006 12:19 - HTML&CSS - trvalý odkaz

Animace s obrázkem

 

 

Běžící obrázek:

<marquee><img src="adresa obrázku"></marquee> 

Měnící se obrázek:

<IMG onmouseover="this.src='adresa prvního obrázku';" onmouseout="this.src='adresa druhého obrázku';" src="adresa druhého obrázku">

09.08.2006 10:47 - HTML&CSS - trvalý odkaz

Nápis na lištu

<SCRIPT LANGUAGE="JavaScript">
<!--
    ScrollSpeed = 150;
    ScrollChars = 1;
    function SetupTicker() {
    msg = " TEXT  ";
    msg += " TEXT  ";
    msg += "  TEXT";
    msg += " TEXT";
    RunTicker();
    }
    function RunTicker() {
    window.setTimeout('RunTicker()',ScrollSpeed);
    window.status = msg;
    msg = msg.substring(ScrollChars) + msg.substring(0,ScrollChars);
    }
    SetupTicker();
<!-- end -->
</SCRIPT>

08.08.2006 19:21 - HTML&CSS - trvalý odkaz

Zaheslování stránky

HTML kód:
<script language="JavaScript">
<!--hide
var password;
var pass1=
"TADY NAPIŠ HESLO";
password=prompt
('TVÁ OTÁZKA',' ');
if (password==pass1)
alert('Welcome');
else
{
window.location=
"wrong.html";
}
//-->
</script>

08.08.2006 14:14 - HTML&CSS - trvalý odkaz

Tabulky

Text


Text


Text


Text


Text
08.08.2006 12:20 - HTML&CSS - trvalý odkaz

Hodiny


07.08.2006 19:44 - HTML&CSS - trvalý odkaz

Text za kurzorem

<body onLoad="Had()">

<SCRIPT language=JavaScript type=text/javascript>
var browser = navigator.appName;
var verze = parseInt(navigator.appVersion);

if (browser == "Microsoft Internet Explorer" & verze >= 4){
var x,y
var step=7
var flag=0

var message="
Tvůj text
"
message=message.split("")

var xpos=new Array()
for (i=0;i<=message.length-1;i++) {xpos[i]=-50}

var ypos=new Array()
for (i=0;i<=message.length-1;i++) {ypos[i]=-50}

function handlerMM(e){
    x = (document.layers) ? e.pageX : document.body.scrollLeft+event.clientX
    y = (document.layers) ? e.pageY : document.body.scrollTop+event.clientY
    flag=1}

function Had()
    {  if (flag==1 && document.all) {
        for (i=message.length-1; i>=1; i--) {
              if ((i==5) || (i==13))
              xpos[i]=xpos[i-1]+step-3;   
            else
            xpos[i]=xpos[i-1]+step;
            ypos[i]=ypos[i-1]}

        xpos[0]=x+step
        ypos[0]=y
   
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("span"+(i)+".style")
            thisspan.posLeft=xpos[i]
        thisspan.posTop=ypos[i]    }}
   
    else if (flag==1 && document.layers) {
        for (i=message.length-1; i>=1; i--) {
              xpos[i]=xpos[i-1]+step
            ypos[i]=ypos[i-1]}

        xpos[0]=x+step
        ypos[0]=y
   
        for (i=0; i<message.length-1; i++) {
            var thisspan = eval("document.span"+i)
            thisspan.left=xpos[i]
            thisspan.top=ypos[i]}}
        var timer=setTimeout("Had()",20)}
}
</SCRIPT>

<SCRIPT language=JavaScript type=text/javascript>
if (browser == "Microsoft Internet Explorer" & verze >= 4){
for (i=0;i<=message.length-1;i++) {
  document.write("<span id='span"+i+"'class='Had'>");
  document.write(message[i]);
  document.write("</span>");
}
if (document.layers) {
    document.captureEvents(Event.MOUSEMOVE);
}
document.onmousemove = handlerMM;
}
</SCRIPT>
07.08.2006 19:07 - HTML&CSS - trvalý odkaz

Takové polozákladní

Tabulka
 
<TEXTAREA>Sem napište text</TEXTAREA>
 
 
Kurzor
:

<style>

<!--

BODY{

cursor:url("http:// ZDE vložíte adresu kurzoru.ani");

}

-->

</style>

Posuvník


<STYLE>
BODY {
    scrollbar-face-color: BARVA;
    scrollbar-shadow-color: BARVA;
    scrollbar-highlight-color: BARVA;
    scrollbar-3dlight-color: BARVA;
    scrollbar-darkshadow-color: BARVA;
    scrollbar-track-color: BARVA;
    scrollbar-arrow-color: BARVA;
}
</STYLE>

E-mail

<A href="mailto:tvůj mail">a sem co chceš aby se zobrazilo</A>

 

07.08.2006 19:07 - HTML&CSS - trvalý odkaz

Písmo


Shocking Pink Glow
Aqua Blue Glow
Purple Glow
Orange Glow
Green Glow
Red Hot Glow
Yellow Glow
Black Glow
Baby Pink Glow
Royal Blue Glow

07.08.2006 19:07 - HTML&CSS - trvalý odkaz

Písmo


Shocking Pink Glow
Aqua Blue Glow
Purple Glow
Orange Glow
Green Glow
Red Hot Glow
Yellow Glow
Black Glow
Baby Pink Glow
Royal Blue Glow

komentáře