Výuka CSS

Přechody Pozice Z-index Border Třídy

Přechody


Popis

Chcete-li vytvořit lineární přechod, musíte definovat alespoň dvě zarážky barev.

Zarážky barev jsou barvy, mezi kterými chcete vykreslit plynulé přechody.

Můžete také nastavit počáteční bod a směr (nebo úhel) spolu s efektem přechodu.

Top to Bottom

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam explicabo iusto fuga illo dicta harum tenetur consequatur, natus aut voluptates vel corrupti odit voluptatem voluptatibus magni aspernatur laborum aliquid ad?

Zápis v CSS:

.ttb {
background-image: linear-gradient(rgb(109, 142, 224), rgb(180, 84, 170));
}

Left to Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam explicabo iusto fuga illo dicta harum tenetur consequatur, natus aut voluptates vel corrupti odit voluptatem voluptatibus magni aspernatur laborum aliquid ad?

Zápis v CSS:

.ltr {
background-image: linear-gradient(to right, rgb(109, 142, 224), rgb(180, 84, 170));
}

Top Left to Bottom Right

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam explicabo iusto fuga illo dicta harum tenetur consequatur, natus aut voluptates vel corrupti odit voluptatem voluptatibus magni aspernatur laborum aliquid ad?

Zápis v CSS:

.tltbr {
background-image: linear-gradient(to bottom right, rgb(109, 142, 224), rgb(180, 84, 170));
}

180 Degrees

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam explicabo iusto fuga illo dicta harum tenetur consequatur, natus aut voluptates vel corrupti odit voluptatem voluptatibus magni aspernatur laborum aliquid ad?

Zápis v CSS:

.o180deg {
background-image: linear-gradient(180deg, rgb(109, 142, 224), rgb(180, 84, 170));
}

Duha

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam explicabo iusto fuga illo dicta harum tenetur consequatur, natus aut voluptates vel corrupti odit voluptatem voluptatibus magni aspernatur laborum aliquid ad?

Zápis v CSS:

.duha { background-image: linear-gradient(to right, red,orange,yellow,green,blue,indigo,violet); }