Java týden Předvánoční slevová akce
Využij předvánočních slev a získej od nás 20 % bodů zdarma! Více zde
Pouze tento týden sleva až 80 % na Java e-learning!

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

Unicorn College Tento obsah je dostupný zdarma v rámci projektu IT lidem.
Vydávání, hosting a aktualizace umožňují jeho sponzoři.

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)

Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!

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 */
}

 

 

Manuál pro vás napsal David Jančík
Avatar
Autor je vášnivý programátor. Nezná slovo "nelze", nebojí se zkoušet nepoznané a pronikat do nových technologií.
Všechny články v sekci
Rámeček - CSS vlastnosti
Aktivity (1)

 

 

Komentáře

Avatar
KlimiCZ
Člen
Avatar
KlimiCZ:14.4.2014 20:05

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:14.4.2014 21:20

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

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í.
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Honza Bittner
Šupák
Avatar
Odpovídá na KlimiCZ
Honza Bittner:15.4.2014 8:03

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
Milovník Dartu. Student FIT ČVUT. Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/...
Avatar
Odpovídá na KlimiCZ
Michal Štěpánek:15.4.2014 9:43

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:15.4.2014 10:39

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.