Diskuze: Jak "ohnout" tvar? css

Naučíme tě pracovat na home-office.

Zjistit více...

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

Aktivity

Kamil

Člen

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

Kamil

Člen

Kamil:27.5.2022 21:28

zatim mám jen toto

Nahoru Odpovědět

27.5.2022 21:28

Kamil

Člen

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

Kamil

Člen

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

Peter Mlich

Člen

Peter Mlich:28.5.2022 19:52

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

css umi zakulacene okraje, tusim i oval. hranaty horni okraj se da schovat pres z-index za ten prvni obrazek
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

Peter Mlich

Člen

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

Peter Mlich

Člen

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

Ondřej Šrytr

Člen

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

31.5.2022 17:44

Kamil

Člen

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.