Untitled

<html>

    <head>

        <meta charset="utf-8"> <title>Przejścia</title> <link rel="stylesheet" type="text/css" href="przejscia.css">

    </head>

    <body>
    <div> ZSP numer 2</div>


    </body>

</html>

--------------------------------------------------------------------------


div {

    width: 270px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
    background-color: black;
    color: red;
    font-size: 15;
    border: solid 2px blue;

    transition-property: background-color, font-size, border-width, border-color;
    transition-duration: 4s, 2s, 3s, 3s;
    transition-timing-function: steps(5, start) linear, linear;
    transition-delay: 1s, 250ms, 0s, 0s;

    /* transition: background-color 4s steps(5, start) 1s, font-size 2s linear 250ms; */

--------------------------------------------------------------------------

}

div:hover {
    background-color: silver;
    font-size: 45px;
    border-width: 10px;
    border-color: yellow;
}

body { background-color: green
}


div {

    width: 270px;
    height: 60px;
    text-align: center;
    margin: 0 auto;
    background-color: black;
    color: red;
    font-size: 15;
    border: solid 2px blue;

    transition-property: background-color, font-size, border-width, border-color;
    transition-duration: 4s, 2s, 3s, 3s;
    transition-timing-function: steps(5, start) linear, linear;
    transition-delay: 1s, 250ms, 0s, 0s;

    /* transition: background-color 4s steps(5, start) 1s, font-size 2s linear 250ms; */


}

div:hover {
    background-color: silver;
    font-size: 45px;
    border-width: 10px;
    border-color: yellow;
}

body { background-color: green
}


 body {
	background-color: gray;
}

div {
	margin: 0 auto;
	width: 200px;
	height: 50px;
	background-color: green;
	color: red;
	font-size: 45px;
	text-align: center;
	border: solid 2px blue;
}

#d2_1 {
	transform: rotate(30deg);
}

#d2_2 {
	/*transform-origin: px px lub % % lub słowa kluczowe: left, right, bottom, top, center */
	transform-origin: left top;
	transform: rotate(-60deg);
}

#d2_3 {
	transform-origin: 100% 100%;
	transform: rotate(20deg);
}

#d2_4 {
	/*przesunięcie w poziomie i pionie*/
	transform: translateX(20px) translateY(-30%);
}

#d2_5 {
	transform: translate(-50%, 50px);
}

#d2_6 {
	transform: scaleX(2) scaleY(0.5);
}

#d2_7 {
	transform: scale(0.5, 3);
}

#d2_8 {
	transform: scale(-1, -1);
	/* "-" powoduje lustrzane odbicie */
}

--------------------------------------------------------------------------

#gradienty {
    background-image: linear-gradient(to left, blue, green, yellow)
}