Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- <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)
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement