Letní akce PHP týden
Pouze tento týden sleva až 80 % na kurzy PHP. Lze kombinovat s akcí Letní slevy na prémiový obsah!
Brno? Vypsali jsme pro vás nové termíny školení Základů programování a OOP v Brně!
Avatar
Adam Gajdečka:2. dubna 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. dubna 11:24
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2. dubna 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. dubna 14:50
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2. dubna 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. dubna 14:57
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2. dubna 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. dubna 15:02
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2. dubna 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 2. dubna 15:10
Nahoru Odpovědět 2. dubna 15:07
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Adam Gajdečka:2. dubna 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. dubna 15:12
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2. dubna 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. dubna 15:13
Avatar
Jaroslav Smrž
Redaktor
Avatar
Odpovídá na Adam Gajdečka
Jaroslav Smrž:2. dubna 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í
+1 bodů
Řešení problému
Nahoru Odpovědět 2. dubna 15:31
I have no idea what it is doing but I´m scared to delete it... xD
Avatar
Odpovídá na Jaroslav Smrž
Adam Gajdečka:2. dubna 16:31

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

 
Nahoru Odpovědět 2. dubna 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.