Pouze tento týden sleva až 80 % na e-learning týkající se Pythonu. Zároveň využij akce až 80 % zdarma při nákupu kreditů. Více informací:
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.
Avatar
Jenkings
Tvůrce
Avatar
Jenkings:27.1.2021 7:51

Ahoj,
snažím se v css dosáhnout "3D" efektu okolo divu. Částečně se mi podařilo udělat horní hranu, ale nepodařilo se mi natvarovat pravý "bok" (viz. screen - červeně dokreslené). snažím se to vykreslit pomocí elementu ::before, ale jestli je nějaká lepší cesta, tak jsem otevřen jiným řešením

Zkusil jsem:

<style>
div {
        background: #bbb;
        padding: 1em 1.2em;
        width: 50%;
        margin: 0 auto;
        color: #111;
        font: 150%/1.2 Georgia, Palatino, Times, serif;
        position: relative;
        margin-top:100px;
}
div:before {
  content:" ";
  position:absolute;
  top:-17px;
  left: -49px;
  width:111%;
  height:40px;
  background: #000;
  background:
        linear-gradient(135deg, transparent 2em, #000 0) top left,
    linear-gradient(-45deg, transparent 2em, #000 0) top right;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    -webkit-box-sizing: content-box;  -moz-box-sizing: content-box;  box-sizing: content-box;
    z-index: -1;
</style>

<div>Lorem ipsum</div>
Odpovědět
27.1.2021 7:51
Největší časovou náročnost má výpočet časové náročnosti..
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27.1.2021 15:08

V css, ktery jsi se dal, ti schazi zavorka.
Ve Firefoxu se to vykresluje spatne.
V css existuje neco jako drop shadow.
Proc nepouzijes obrazek? Mnohdy usnadnuje problem.
google = css perspective
google = css drop 3d border
https://css-tricks.com/…/box-shadow/
https://dev.to/…buttons-2aj7
https://webdesignerhut.com/…-dropshadow/

<style>
.rightBottom {
    transition: margin-top 0.3s ease,
    margin-left 0.3s ease,
    box-shadow 0.3s ease;

    background:#03A9F4;
    border: solid 1px #1976D2;

    box-shadow: 1px 0px 0px #1976D2,0px 1px 0px #1976D2,
    2px 1px 0px #1976D2,1px 2px 0px #1976D2,
    3px 2px 0px #1976D2,2px 3px 0px #1976D2,
    4px 3px 0px #1976D2,3px 4px 0px #1976D2,
    5px 4px 0px #1976D2,4px 5px 0px #1976D2,
    6px 5px 0px #1976D2,5px 6px 0px #1976D2,
    7px 6px 0px #1976D2,6px 7px 0px #1976D2,
    8px 7px 0px #1976D2,7px 8px 0px #1976D2,
    9px 8px 0px #1976D2,8px 9px 0px #1976D2;
}
</style>
<button class="rightBottom ">I am a Button!</button>
Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
27.1.2021 15:08
Avatar
Jenkings
Tvůrce
Avatar
Odpovídá na Peter Mlich
Jenkings:27.1.2021 17:35

dobrá poznámka, tu závorku jsem přehlédl,

obrázkům se snažím vyhnout, když to jde udělat jinak, takže se snažím vždycky o nějaké řešení kódem,
každopádně to s tím box-shadow je perfektní, netušil jsem, že se to dá takhle "vrstvit", vždy jsem to viděl jen s tím efektem rozmazání.
Mockrát díky za radu

Nahoru Odpovědět
27.1.2021 17:35
Největší časovou náročnost má výpočet časové náročnosti..
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 3 zpráv z 3.