NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!

Diskuze – Základní tvary v CSS3

Zpět

Upozorňujeme, že diskuze pod našimi online kurzy jsou nemoderované a primárně slouží k získávání zpětné vazby pro budoucí vylepšení kurzů. Pro studenty našich rekvalifikačních kurzů nabízíme možnost přímého kontaktu s lektory a studijním referentem pro osobní konzultace a podporu v rámci jejich studia. Toto je exkluzivní služba, která zajišťuje kvalitní a cílenou pomoc v případě jakýchkoli dotazů nebo projektů.

Komentáře
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na
Honza Bittner:20.6.2013 14:28

zkus dát text do content v :before, hvězdu si ještě upravíš aby byl :before vodorovný, mělo by to fungovat :)

Odpovědět
20.6.2013 14:28
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
IntroŠpek(tular
Neregistrovaný
Avatar
IntroŠpek(tular:20.6.2013 14:41

Keď to dám do :before, tak to nie je vidieť kvôli :after
Ale keď je to v :after, tak to funguje, ako má :)
Ďakujem za pomoc

 
Odpovědět
20.6.2013 14:41
Avatar
Snorlax
Tvůrce
Avatar
Snorlax:21.6.2013 16:19

já CSS používám jen na pozicování, pozadí(obrázek/bar­va), zaoblení, stíny, rámečky,... prostě jen na takovýhle "prkotiny". žádný trojůjelníčky nedělám, mám-li se přiznat asi by mě jako první věc napadla obrázek a ne si jej napsat v CSS :D

Odpovědět
21.6.2013 16:19
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
Honza Bittner
Tvůrce
Avatar
Odpovídá na Snorlax
Honza Bittner:21.6.2013 17:37

tak ... né vždy jsou obrázky vhodné :)

Odpovědět
21.6.2013 17:37
FIT ČVUT alumnus :-) Sleduj mě na https://twitter.com/tenhobi a ptej se na cokoli na https://github.com/tenhobi/ama.
Avatar
Snorlax
Tvůrce
Avatar
Odpovídá na Honza Bittner
Snorlax:27.6.2013 14:10

to souhlasim. rozhodně se budou načítat déle než div s CSS. a taky by se museli pozicovat takže to CSS bych stejně musel využít... Ale jak řikám, já bych to stejně nevyužil.

Odpovědět
27.6.2013 14:10
Kdo chce pochopit, pochopí. Kdo dělá že chce pochopit, může pouze dělat, že pochopil...
Avatar
teneritas
Člen
Avatar
teneritas:26.8.2013 15:24

Opravdu super článek, přesně nad tímto jsem nedávno přemýšlela, díky za návod!

 
Odpovědět
+1
26.8.2013 15:24
Avatar
Jura
Člen
Avatar
Jura:10.10.2013 15:36

Skvěle

 
Odpovědět
+1
10.10.2013 15:36
Avatar
Neaktivní uživatel
Člen
Avatar
Neaktivní uživatel:16.10.2013 16:39

HŮŮŮSTĚ!!!

přesně tohle sem potřeboval(kon­krétně ten lichoběžník) ale nevěřil bych že třeba ta hvězda jde takhle udělat.

Díky

Odpovědět
+1
16.10.2013 16:39
Neaktivní uživatelský účet
Avatar
Šimon Raichl
Tvůrce
Avatar
Šimon Raichl:18.8.2014 20:57

Tady je můj kód pro logo GM5

#GM
{
  border-radius: 50%;
  height: 100px;
  width: 100px;
  background: #777777;
}
#GM:before
{
  content: "";
  position: absolute;
  height: 12px;
  width: 60px;
  background: white;
  margin: 44px 0px 0px 12px;
  border-radius: 4px;
}
#GM:after
{
  content: "";
  position: absolute;
  height: 48px;
  width: 12px;
  background: white;
  margin: 32px 0px 0px 62px;
  border-radius: 2px;
}
#GM:hover
{
  background: red;
}
#konec
{
  height: 0px;
  width: 12px;
  position: absolute;
  border-style: solid;
  border-width: 0 12px 12px 12px;
  border-color: transparent transparent white transparent;
  margin: -70px 0px 0px 50px;
  transform: rotate(-270deg);
}
 
Odpovědět
18.8.2014 20:57
Avatar
Šimon Raichl
Tvůrce
Avatar
Šimon Raichl:3.9.2014 18:16

A tady ještě GM8 logo:

#logo
{
  height: 200px;
  width: 200px;
  border-radius: 50%;
  background-color: black;
}
#logo:before
{
  border-radius: 15%;
  content: "";
  background-color: black;
  transform: rotate(49deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -42px 72px;
}
#logo:after
{
  border-radius: 15%;
  content: "";
  background-color: black;
  transform: rotate(-15deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -52px 84px;
}
#pokracovaniLoga
{
  border-radius: 15%;
  background-color: black;
  transform: rotate(109deg);
  height: 300px;
  width: 64px;
  position: absolute;
  margin: -256px 74px;
}
#pokracovaniLoga:before
{
  border-radius: 50%;
  content: "";
  background: #AEFF00;
  height: 150px;
  width: 150px;
  position: absolute;
  margin: 78px -36px;
}
#pokracovaniLoga:after
{
  border-radius: 50%;
  content: "";
  background-color: black;
  height: 100px;
  width: 100px;
  position: absolute;
  margin: 102px -10px;
}
#gecko
{
  border-radius: 15%;
  background-color: black;
  transform: rotate(75deg);
  height: 120px;
  width: 28px;
  position: absolute;
  margin: -164px 110px;
}
#gecko:before
{
  width: 0;
  height: 0;
  content: "";
  border-style: solid;
  border-width: 12px 50px 12px 0;
  border-color: transparent #AEFF00 transparent transparent;
  position: absolute;
  margin: 30px 8px;
  transform: rotate(-75deg);
}
#gecko:after
{
  content: "";
  border-radius: 35%;
  background-color: #AEFF00;
  transform: rotate(75deg);
  height: 32px;
  width: 16px;
  position: absolute;
  margin: 42px -8px;
}
Editováno 3.9.2014 18:17
 
Odpovědět
+1
3.9.2014 18:16
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 10 zpráv z 45.