Borders (rámečky) - Český CSS3 manuál

HTML a CSS Manuál Rámeček Borders (rámečky) - Český CSS3 manuál

S nástupem CSS3 můžete využívat zakulacených rámečků, přidat vlastní stín nebo i jako rámeček použít obrázek bez užití grafických programů.

Obecně - Podpora prohlížečů

  • IE9 podporuje jen velmi málo nových vlastností
  • U ostatních prohlížečů je vyžadován prefix
    • Firefox -moz-vlastnost
    • Chrome, Safari -webkit-vlastnost
    • Opera -o-vlastnost
    • IE9 -ms-vlastnost

CSS3 Zaoblené rohy (border-radius)

Příkladné použití na divu:

div
{
        border: 2px solid;
        border-radius: 25px;
}

CSS3 Vržení stínu (box-shadow)

Příkladné použití na divu:

div
{
        box-shadow: 10px 10px 5px #888888;
}

CSS3 Obrázek jako rámeček (border-image)

Příkladné použití pro div s rozkopírováním obrázku okolo.

div
{
        border-image: url(ramecek.png) 30 30 round;
        -moz-border-image: url(ramecek.png) 30 30 round; /* Firefox */
        -webkit-border-image: url(ramecek.png) 30 30 round; /* Safari a Chrome */
        -o-border-image: url(ramecek.png) 30 30 round; /* Opera */
}

 

  Aktivity (1)

Manuál pro vás napsal David Jančík [sczdavos]
Avatar
Autor je vášnivý programátor v .NET C# a PHP. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.

Miniatura
Všechny články v sekci
Rámeček - CSS vlastnosti

 

 

Komentáře

Avatar
KlimiCZ
Člen
Avatar
KlimiCZ:

jde to použít i v php jako že volám funkci ktera ma echo a dá se do rámečku ?

Odpovědět 14.4.2014 20:05
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Avatar
Odpovídá na KlimiCZ
Michal Štěpánek:

Použití CSS přeci nebrání jazyk, který použiješ na tvorbu webu...

Odpovědět 14.4.2014 21:20
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
KlimiCZ
Člen
Avatar
Odpovídá na Michal Štěpánek
KlimiCZ:

a jak by se to udělalo já to mám takhle :

echo "<p class=ramecek>Jsi náš ".$pocet.". návštěvník </p>";

a jenom to napíše text

Odpovědět 15.4.2014 7:41
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Avatar
Honza Bittner
Redaktor
Avatar
Odpovídá na KlimiCZ
Honza Bittner:

Tak zaprvé se html elementy s třídou zapisují takto:

<element class="trida">text</element>

A samozřejmě že ti to pak ostyluje podle tvého stylu pro .trida nebo element...

Odpovědět 15.4.2014 8:03
Ptejte se mě na cokoli na https://github.com/HoBi/ama a followujte mě na Twitteru https://twitter.com/tenhobi. :-)
Avatar
Odpovídá na KlimiCZ
Michal Štěpánek:

Jak píše Honza, jest třeba používat uvozovky a co je hlavní, musíš mít v CSS ten tvuj "ramecek" nastaven, tzn. popsat, co má dělat, jinak se nemá co aplikovat...

Odpovědět 15.4.2014 9:43
Nikdy neříkej nahlas, že to nejde. Vždycky se totiž najde blbec, který to neví a udělá to...
Avatar
KlimiCZ
Člen
Avatar
Odpovídá na Michal Štěpánek
KlimiCZ:

už to funguje
byla chyba v přenosu dat :D

Odpovědět 15.4.2014 10:39
Nesnaž se zakrýt něco, co jsi provedl úmyslně. Svět je tak malý, že dotyčný se to stejně dozví.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 6 zpráv z 6.