Twórz wielokolorowe obramowania za pomocą CSS

Właściwość obramowania CSS ma pewne opcje dostosowywania, takie jak opcje takie jak jednolity, przerywany, kropkowany itp. Jednak jeśli chodzi o kolor obramowania, możemy mieć tylko jednolity kolor na każdej stronie. Ale jest inny sposób na uzyskanie wielokolorowej linii przy użyciu kilku dodatkowych właściwości, o których być może nie pomyślałeś, spójrzmy.

Solidny

przerywany

Kropkowany

Wielokolorowe obramowania

Aby uzyskać wielokolorową ramkę, jak pokazano powyżej, użyjemy właściwości position i selektora ::after z gradientem koloru. Najpierw utworzymy obszar nagłówka za pomocą klasy HTML <div>, a następnie stylizujemy go za pomocą CSS, aby miał wielokolorową ramkę dzielącą go i zawartość poniżej.

Utwórz swój kod HTML:

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

 <div class="ost-multi-header"> <h1> Header Title </h1> </div>

Teraz trochę go ostylizujmy za pomocą CSS.

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; }

Powinieneś teraz mieć coś, co wygląda tak:

Dzięki temu możemy teraz dodać ::after do .ost-multi-header selector . Ale zanim to zrobimy, chciałbym trochę wyjaśnić, co robi ::after i dlaczego potrzebujemy właściwości position dla wielokolorowego obramowania. ::after tworzy pseudoelement z tym, co znajduje się we właściwości content na końcu wybranego elementu. W naszym przypadku tym elementem jest .ost-multi-header . Zróbmy uświęcone tradycją „Hello World!” przykład ilustrujący.

Dodaj to do swojego CSS:

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; }

 .ost-multi-header::after{ content: 'Hello World!'; position: absolute; left: 20px; bottom: 0; } 

Jak widać, mamy teraz „Hello World!” element pod tytułem nagłówka. Ponieważ nasz element nadrzędny, .ost-multi-header , ma właściwość position jako relative , możemy nadać elementowi potomnemu pozycję absolute . Umożliwi nam to łatwe przeniesienie naszego nowego pseudoelementu, który utworzyliśmy za pomocą ::after , w dowolne miejsce w elemencie nadrzędnym. Umieszczamy go na dole i przesuwamy ponad 20px od lewej w elemencie nadrzędnym. Zauważ, że jeśli element nadrzędny nie miał właściwości position ustawionej na wartość względna, nasz element pozycjonowany bezwzględnie byłby na dole i 20px na lewo od okna przeglądarki.

A co z naszą kolorową ramką? Zamierzamy wystylizować tło naszego pseudoelementu tak, aby było naszą wielokolorową ramką za pomocą gradientu. Gradienty CSS mogą być liniowe lub promieniste. Dla naszej granicy użyjemy linear-gradient . Po prostu dałoby nam to granicę, której szukamy.

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

 .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right:0; bottom: 0; background: linear-gradient(to right, #ed8034 0%,#ed8034 33%,#feb123 33%,#feb123 66%,#2184cd 66%,#2184cd 100%); }

Ale zwolnijmy chwilę, krok po kroku. Po pierwsze, właściwość content nadal istnieje, mimo że jest pusta. Dzieje się tak, ponieważ bez właściwości content pseudoelement nigdy nie jest tworzony; więc potrzebujemy tego. Musimy ustawić wysokość naszego pseudoelementu, wysokość naszej granicy. Po co ustawiać zarówno left , jak i right właściwość na 0? Bez ustawionej szerokości spowoduje to rozciągnięcie pseudoelementu do 100% szerokości wewnątrz elementu rodzica. Może to wyglądać na dużo, ale ustawienia linear-gradient po prostu mówią kolorowi, aby płynął od lewej „do prawej”, a my wprowadzamy kolory, które chcemy w określonych procentach tła.

Chociaż wszystko, co robimy, to wybieranie kolorów, które mają być w określonych procentach, jest to dużo pracy dla nóg. Na szczęście istnieją bezpłatne zasoby online, które ogromnie pomagają w tworzeniu gradientów kolorów. Ultimate CSS Gradient Generator firmy ColorZilla to świetne narzędzie, które zawiera wiele właściwości gradientu do obsługi starszych przeglądarek.

Mamy już skonfigurowany gradient w narzędziu, więc możemy użyć tego linku, aby zobaczyć dokładne ustawienia użyte w tym samouczku: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33 ,luty123+66,2184cd+66,2184cd+100. To powinno wyglądać tak:

Na tej stronie jest wiele ustawień, ale skupmy się na ustawieniach, których potrzebowaliśmy, aby stworzyć wygląd, którego użyjemy dla naszej ramki. Rozłóżmy to:

1. Presety — to może być świetny punkt wyjścia!
2. Suwak — tutaj możesz dodawać, usuwać i edytować kolory
3. Przystanki — ta sekcja umożliwia zmianę ustawień krycia i lokalizacji każdego koloru. Po prostu kliknij pole koloru na suwaku powyżej, aby zmienić kolor, który kontrolujesz w tej sekcji.
4. Podgląd — tutaj możesz natychmiast zobaczyć wyniki swoich zmian.
5. Orientacja i rozmiar — umożliwia zmianę z poziomej, pionowej, ukośnej lub promieniowej. I ustawić rozmiar gradientu.
6. Kod CSS - Wygenerowany kod z permalinkiem, dzięki czemu zawsze możesz łatwo wrócić i edytować gradient.

W naszym przypadku nie szukaliśmy wyblakłego gradientu, ale raczej solidnego, płaskiego przejścia między dwoma kolorami, więc wszystko, co musimy zrobić, to ułożyć dwa kolory jeden na drugim tam, gdzie chcemy, aby to się stało. W naszym przykładzie ułożyliśmy kolory odpowiednio w 33% i 66%.

Nie krępuj się bawić z ustawieniami, wiedząc, że to, co widzisz w podglądzie, jest tym, co wygeneruje kod. Gdy ustawisz wygląd tak, jak chcesz, możesz użyć przycisku „kopiuj” w prawym dolnym rogu pola kodu.

Jeśli skopiowałeś kod tak, jak miałem go w łączu, ostateczny kod CSS będzie wyglądał mniej więcej tak:

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

 h1{ font-size: 50px; line-height: 100px; padding-left: 20px; font-family: Arial, Helvetica, sans-serif; } .ost-multi-header { position: relative; height: 100px; background: #999999; padding-bottom: 6px; } .ost-multi-header::after{ content: ''; height: 6px; position: absolute; left: 0; right: 0; bottom: 0; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ed8034+0,ed8034+33,feb123+33,feb123+66,2184cd+66,2184cd+100 */ background: rgb(237,128,52); /* Old browsers */ background: rgb(237,128,52); /* Old browsers */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -moz-linear-gradient(left, rgba(237,128,52,1) 0%, rgba(237,128,52,1) 33%, rgba(254,177,35,1) 33%, rgba(254,177,35,1) 66%, rgba(33,132,205,1) 66%, rgba(33,132,205,1) 100%); /* FF3.6-15 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: -webkit-linear-gradient(left, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ background: linear-gradient(to right, rgba(237,128,52,1) 0%,rgba(237,128,52,1) 33%,rgba(254,177,35,1) 33%,rgba(254,177,35,1) 66%,rgba(33,132,205,1) 66%,rgba(33,132,205,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ed8034', endColorstr='#2184cd',GradientType=1 ); /* IE6-9 */ }

I ten CSS wygeneruje wielokolorowe podkreślenie, które jest w pełni responsywne:

No to jedziemy! Nie musieliśmy dodawać dopełnienia 6px na dole .ost-multi-header , ale absolute pozycjonowane dziecko nie ma już wpływu na wysokość elementu rodzica. Możemy pozwolić mu unosić się nad naszą zawartością w elemencie nadrzędnym lub dodać padding , aby upewnić się, że nie obejmuje żadnej zawartości, której możemy nie chcieć zasłaniać.

Oto link do tego ćwiczenia odtworzonego w CodePen, aby każdy mógł edytować i uczyć się bez obaw.

I ostatnia uwaga, niektóre starsze przeglądarki obsługują tylko selektor z pojedynczym dwukropkiem :after , a nie współczesny standardowy double ::after . Możesz użyć pojedynczego dwukropka, jeśli chcesz być bezpieczny. Na razie będzie działać również w nowoczesnych przeglądarkach.