FINÁLNÍ VÝPRODEJ KREDITŮ na ITnetwork je tady. Využij poslední šanci a získej až 80 % extra kreditů ZDARMA na náš interaktivní e-learning. Zjisti více:
NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
Adam Gajdečka
Člen
Avatar
Adam Gajdečka:2.4.2019 11:24

Ahoj, prosím o radu. Potřebuji vytvořit dvojitý border u ikonky sociální sítě. U té první ikony Facebooku potřebuji nejprve vytvořit bílý okraj a následně modrý.

Nevím, jak na to, zkoušel jsem něco s outline, ale tomu nelze nastavit radius. Také potřebuji, aby okraj "lezl směrem ven" a ne dovnitř.

Díky za pomoc.

Zkusil jsem: Můj kód je zde: https://codepen.io/anon/pen/KYpMYL

 
Odpovědět
2.4.2019 11:24
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2.4.2019 14:50

To je jednoduché - vytvoříš si ještě 1 div, kterému nastavíš padding a radius, jaký potřebuješ a do něj vložíš další div už s ikonou a radiusem.

Nahoru Odpovědět
2.4.2019 14:50
/* Life runs on code */
Avatar
Adam Gajdečka
Člen
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2.4.2019 14:57

díky za odpověď. To jsem zkoušel, ale nevím, jak ty bordery dostat vedle sebe. Dopadlo to takto https://codepen.io/anon/pen/JVdOrd

 
Nahoru Odpovědět
2.4.2019 14:57
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2.4.2019 15:02 
<body>
  <div class="svetleModry">
    <div class="tmaveModry">
      <i class="fa fa-twitter"></i>
    </div>
  </div>
</body>
.svetleModry {
  height: 40px;
  width: 40px;
  padding: 5px;
  background-color: blue;
  border-radius: 40px;
}

.tmaveModry {
  height: 30px;
  width: 30px;
  padding: 5px;
  background-color: navy;
  border-radius: 30px;
  text-align: center;
  color: #ffffff;
}
Nahoru Odpovědět
2.4.2019 15:02
/* Life runs on code */
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2.4.2019 15:07

Nebo ještě jednodušeji takto:

<body>
  <div class="svetleModry">
    <i class="fa fa-twitter"></i>
  </div>
</body>

CSS:

.svetleModry {
  height: 40px;
  width: 40px;
  padding: 5px;
  background-color: blue;
  border: 5px solid navy;
  border-radius: 40px;
  text-align: center;
}

Pak už si jen upravíš velikost ikony na požadovanou.

Editováno
Nahoru Odpovědět
2.4.2019 15:07
/* Life runs on code */
Avatar
Adam Gajdečka
Člen
Avatar
Adam Gajdečka:2.4.2019 15:12

Já potřebuji tento výsledek: Tedy ta ikona má pozadí, potom musí být bílý border a potom modrý.

 
Nahoru Odpovědět
2.4.2019 15:12
Avatar
Adam Gajdečka
Člen
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2.4.2019 15:13

já myslím, že to nebude složité, ale já se v CSS moc nevyznám. Díky za radu

 
Nahoru Odpovědět
2.4.2019 15:13
Avatar
Jaroslav Smrž
Tvůrce
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2.4.2019 15:31

HTML:

<body>
  <div class="tmaveModry">
    <div class="svetleModry">
      <i class="fa fa-twitter"></i>
    </div>
  </div>
</body>

CSS:

.tmaveModry {
  width: 43px;
  height: 43px;
  background-color: #ffffff;
  border: 2px solid navy;
  border-radius: 43px;
  padding: 5px;
}

.svetleModry {
  width: 30px;
  height: 30px;
  background-color: blue;
  border-radius: 30px;
  font-size: 1.3em;
  text-align: center;
  color: #ffffff;
}
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
2.4.2019 15:31
/* Life runs on code */
Avatar
Adam Gajdečka
Člen
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2.4.2019 16:31

děkuji. Přesně takto jsem to potřeboval.

 
Nahoru Odpovědět
2.4.2019 16:31
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 9 zpráv z 9.