NOVINKA: Získej 40 hodin praktických dovedností s AI – ZDARMA ke každému akreditovanému kurzu!
S účinností od 26. 3. jsme aktualizovali Zásady zpracování osobních údajů – doplnili jsme informace o monitorování telefonických hovorů se zájemci o studium. Ostatní části zůstávají beze změn.

Diskuze: Jak "ohnout" tvar? css

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Jak se ti líbí článek?
Před uložením hodnocení, popiš prosím autorovi, co je špatněZnaků 0 z 50-500
Jak se ti kurz líbí?
Tvé hodnocení kurzuZnaků 0 z 50-500
Aktivity
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:28

Ahoj, chtěl bych ohnout tvar a nevím jak to udělat.

Zkusil jsem: -

Chci docílit: -

 
Odpovědět
27.5.2022 21:28
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:28

zatim mám jen toto

 
Nahoru Odpovědět
27.5.2022 21:28
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:29

Podotýkám je to dělané v css a html.

 
Nahoru Odpovědět
27.5.2022 21:29
Avatar
Kamil
Člen
Avatar
Kamil:27.5.2022 21:42 
*{
    margin:0px;
    padding:0px;
    font-family: 'Archivo', sans-serif;
}
body{
    background: rgb(165, 19, 19);
    display: flex;
    justify-content: center;
    align-items: center;
}
.box{
    margin-top:100px;
    border:1px ouset white;
    background: white;
    width:350px;
    height:300px;

}
.cerny-box-text{
    width:155px;
    height:160px;
    background: black;
    border-radius:50%;
    position:relative;top:20%;left:27%;
    z-index: 1;
    border:3px solid white;

}
.cerny-box-text p{
    color:white;
    font-size:120px;
    text-align: center;
    padding-top:15px;
    font-weight: bold;
}
.cerny-box-text2{
    width:165px;
    height:170px;
    background: black;
    border:2px solid black;
    border-radius:50%;
    position:relative;top:-36.5%;left:25.8%;
}
.modra{
    width:40px;
    height:21px;
    background: #2559AC;
    transform: rotate(20deg);
    border:1px solid black;
    position:relative;top:-43%;left:33%;
    z-index: 1;
    border-radius:10px 10px 10px 10px
}
.oranzova{
    width:40px;
    height:21px;
    background: #F8A519;
    border:1px solid black;
    position:relative;top:-48.4%;left:43%;
    z-index: 1;
    border-radius:5px;
}
.cervena{
    width:40px;
    height:21px;
    background: #bf4040;
    border:1px solid black;
    position:relative;top:-56%;left:53%;
    z-index: 1;
    border-radius:5px;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Archivo:wght@300&family=Bree+Serif&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="css/index.css">
    <title>Document</title>
</head>
<body>
    <section class="box">
            <section class="cerny-box-text">
                    <p>S</p>
            </section>
            <section class="cerny-box-text2">

            </section>

            <section class="modra">

            </section>
            <section class="oranzova">

            </section>
            <section class="cervena">

            </section>
    </section>
</body>
</html>
 
Nahoru Odpovědět
27.5.2022 21:42
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 19:52

Co jsi nasel googlem? Pises, za jsi nic nezkusil. Ani google? Opravdu? Proc? :)

  1. css umi zakulacene okraje, tusim i oval. hranaty horni okraj se da schovat pres z-index za ten prvni obrazek
  2. css umi pridat base64 url pro background. https://www.base64-image.de

google = image convert to base 64
google = round corner css
google = round image css

<!DOCTYPE html>
<html>

<head>
    <style>
        img {
            border-radius: 58%;
        }
    </style>
</head>

<body>
    <h2>GeeksForGeeks</h2>

    <h2>
        How to create a Circular/
        Rounded images using CSS?
    </h2>

    <img src=
"https://media.geeksforgeeks.org/wp-content/cdn-uploads/20190710102234/download3.png"
        alt="GeeksforGeeks logo"
            width="200" height="160"
            border="5">
</body>

</html>
 
Nahoru Odpovědět
28.5.2022 19:52
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 19:59

google = arc image css

div {clip-path: polygon (...);}

https://stackoverflow.com/…age-with-css
https://css-tricks.com/…apes-of-css/
Cone Shape

#cone {
  width: 0;
  height: 0;
  border-left: 70px solid transparent;
  border-right: 70px solid transparent;
  border-top: 100px solid red;
  border-radius: 50%;
}
 
Nahoru Odpovědět
28.5.2022 19:59
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:28.5.2022 20:01

Muzes pouzit i :before :after, abys snizil pocet html elementu

 
Nahoru Odpovědět
28.5.2022 20:01
Avatar
Ondřej Šrytr
Člen
Avatar
Odpovídá na Kamil
Ondřej Šrytr:31.5.2022 17:44

Ahoj,

co tě nutí dělat to za pomocí HTML + CSS? Je vysoká šance, že se ti to může "rozbít". Lepší by bylo to mít jako SVG ikonku, kterou si můžeš zmenšovat/zvětšovat podle potřeby a šlo by i zařídit, abys k jednotlivým prvkům v logu měl přístup.

 
Nahoru Odpovědět
+1
31.5.2022 17:44
Avatar
Kamil
Člen
Avatar
Odpovídá na Ondřej Šrytr
Kamil:3.6.2022 20:30

Ahoj, chtěl jsem si to jen zkusit. :)

 
Nahoru Odpovědět
3.6.2022 20:30
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.