Hledáme nového kolegu do redakce - 100% home office, 100% flexibilní pracovní doba. Více informací.
Využij akce až 80 % zdarma při nákupu e-learningu - více informací. Zároveň pouze tento týden sleva až 80 % na e-learning týkající se Swift
discount week 80
Avatar
Jenkings
Redaktor
Avatar
Jenkings:27. ledna 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. ledna 7:51
Největší časovou náročnost má výpočet časové náročnosti..
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:27. ledna 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í
+1 bodů
Řešení problému
 
Nahoru Odpovědět
27. ledna 15:08
Tento výukový obsah pomáhají rozvíjet následující firmy, které dost možná hledají právě tebe!
Avatar
Jenkings
Redaktor
Avatar
Odpovídá na Peter Mlich
Jenkings:27. ledna 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. ledna 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.