Css, transition - oraz position elementu. PROBLEM

pytanie zadane 1 maja 2017 w HTML i CSS przez Kamil Pixel Niedbals Użytkownik (650 p.)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <script>
        function selectCheckboxes(what,pref,stan){
            for(i=0;i<what.elements.length;i++){
                if(what.elements[i].type == "checkbox" && what.elements[i].name.substring(0,pref.length) == pref){
                    what.elements[i].checked=stan;
                }
            }
        }
    </script>

    <style>
        body{
            margin:0;
        }

        .elem_menu {
            float: left;
            font-size: 24px;
            margin-left: 20px;
            margin-top: 20px;
            transition-duration:0.4s;
            transition-timing-function:ease-out;
            }

        .elem_menu:hover{
            color: white;
            background-color:orangered;
            padding:3px;
            -webkit-border-radius: 3px;
            -moz-border-radius: 3px;
            border-radius: 3px;;
            margin-top: 17px;
            cursor:pointer;
        }

    </style>
</head>
<body>

<nav style="margin:10px;">
<div id="belka_gorna">
    <span class="elem_menu">Zleć nam grafikę</span>
    <span class="elem_menu">Zleć nam grafikę</span>
    <span class="elem_menu">Zleć nam grafikę</span>
    <span class="elem_menu">Zleć nam grafikę</span>
</div>
</nav>
<div style="clear: both;"></div>
<form>
    <i>Regulamin, proszę potwierdzić, aby przejść dalej.</i>
    <b>Zaznacz wszystko</b><input type="checkbox" name="all" onclick="selectCheckboxes(this.form,'ch[',this.checked)" /><br/>
    <b>A</b><input type="checkbox" name="ch[0]" /><br/>
    <b>B</b><input type="checkbox" name="ch[1]" /><br/>
    <b>C</b><input type="checkbox" name="ch[2]" />
</form>
</body>
</html>

Hej, chciałem zapytać - jak sprawić, aby te elementy nie pływały - tylko twardo animowały bez "popychania innych". I pytanie drugie, czy da się obejść to aby, transition oddziaływał na width i height i background coloru. W ten sposób, że po najechaniu od 0,0,0,0 współrzędnej - czyli od środka tekstu wychodziłby ten pomarańczowy kolor, aż do wielkości tekstu +5 pikseli z każdej strony?

1 odpowiedź

odpowiedź 1 maja 2017 przez pablop76 VIP (123,120 p.)
wybrane 1 maja 2017 przez Kamil Pixel Niedbals

Najlepsza

Witam. Elementy są popychane ponieważ w :hover jest padding oraz margin co powoduje zmianę ich położenia po najechaniu.

Zobacz to: efekty po najechaniu css

Na tej podstawie tak to wygląda u ciebie.

Zastosowane rozwiązanie

komentarz 1 maja 2017 przez Kamil Pixel Niedbals Użytkownik (650 p.)
edycja 1 maja 2017 przez Kamil Pixel Niedbals

Wytłumacz w takich prostych słowach zasadę działania(no prócz możliwości dodania tekstu za i przed aktualnym, przez content):
:before, ::before
:after, ::after

Na jakimś prostym przykładzie, najlepiej na 2 z hover'em i bez. :)

Przy okazji, jak będziesz odpisywać i znasz odpowiedź jak się nazywa reguła css, za pomocą możemy uzyskać taki krzywy background jak tutaj na przykładzie:

komentarz 1 maja 2017 przez pablop76 VIP (123,120 p.)

:after, :before

komentarz 1 maja 2017 przez pablop76 VIP (123,120 p.)

figury css

komentarz 1 maja 2017 przez Kamil Pixel Niedbals Użytkownik (650 p.)
edycja 1 maja 2017 przez Kamil Pixel Niedbals

Figury okeey, ale czy nie mógłbyś za pomocą jednego łopatologicznego zdania odnieść te właściwości do np. przykładu w którym ich użyłeś? Byłoby łatwiej, a nawet hmm.. ułatwiasz życie komuś. Tj. mi i innym którzy kiedyś to zobaczą. :) W internecie jest wszystko, więc po co jest to forum. No kurczę, stary - jak będziemy kazali kupować sobie książki, odsyłać gdzie indziej zawsze, to po co to wszystko. :)

Jednak żebyś nie wziął tego za atak, jesteś świetnym i bardzo pomocnym gościem. :)

Ps. Nie ma reguły css która umożliwia krzywienie elementów? Bo w tym momencie musiałbym zrobić 2 figury i umieścić w 1 divie. I pewnie praca na tej figurze, na jej efektach - transition jest utrudniona w takim przypadku niż w jednej, zgrabnej figurze z dodaną odpowiednią regułą.