[CSS] Jak zrobić atrakcyjnie wyglądający nagłówek na stronie?
This post is 14 years old. Browsers and tools may have changed since then, so check the code against current documentation before you use it.
Dzisiejszy wpis będzie dotyczył tworzenia atrakcyjnie wyglądających nagłówków na stronach WWW. Aby osiągnąć zamierzony efekt wykorzystamy tylko i wyłącznie język CSS. Dzięki nim będzie można bardzo uatrakcyjnić stronę niestandardowo wyglądającymi tytułami.
Środkiem do osiągnięcia tych efektów będzie wykorzystanie pseudoelementów CSS: :before i :after. Stworzymy 3 różne style dla nagłówków.
Section 1Style dla nagłówka - przykład 1
Pierwszy przykład pokaże jak uzyskać efekt chmurki w nagłówku.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 | .example1 h1 { border-bottom: 1px solid #aaa; margin: 15px 0; padding: 5px 0; position: relative; } .example1 h1:before, .example1 h1:after { content: ''; border-right: 20px solid #fff; border-top: 15px solid #aaa; bottom: -15px; position: absolute; left: 25px; } .example1 h1:after { border-top-color: #fff; border-right-color: transparent; bottom: -13px; left: 26px; } |
W tym przykładzie :after i :before zostały wykorzystane aby utworzyć wcięcie w obramowaniu, które przypomina wcięcie z chmurki komiksowej.
Section 2Style dla nagłówka - przykład 2
Ten przykład będzie nieco bardziej złożony, ponieważ wykorzystamy w nim, oprócz pseudoelementów, gradienty oraz cienie dla tekstu i modelu pudełka. Efekt jaki osiągniemy będzie przypominał zakładkę/wstążkę.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 | .example2 h1 { position: relative; margin-left: -22px; margin-right: -22px; padding: 15px; color: #fcfcfc; background: #7d7e7d; background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzdkN2U3ZCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwZTBlMGUiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+); background: -moz-linear-gradient(top, #7d7e7d 0%, #0e0e0e 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#7d7e7d), color-stop(100%,#0e0e0e)); background: -webkit-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -o-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: -ms-linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); background: linear-gradient(top, #7d7e7d 0%,#0e0e0e 100%); filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7d7e7d', endColorstr='#0e0e0e',GradientType=0 ); /* IE6-8 */ -webkit-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; -moz-box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; box-shadow: 0 -1px 0 rgba(255,255,255,.8) inset; text-shadow: 0 1px 0 #ccc; } .example2 h1:before, .example2 h1:after { position: absolute; left: 0; bottom: -6px; content:''; border-top: 6px solid #999; border-left: 6px solid transparent; } .example2 h1:before { border-top: 6px solid #999; border-right: 6px solid transparent; border-left: none; left: auto; right: 0; bottom: -6px; } |
Jak pewnie zauważyłeś/aś część CSS związana z atrybutem background jest bardzo rozbudowana. Tam właśnie generujemy gradient liniowy przechodzący z koloru szaroczarnego do prawie czarnego. Mamy tutaj wsparcie dla zdecydowanej większości przeglądarek, nawet IE6 (jakby ktoś tego potrzebował).
Pseudoelementy :after i :before służą do utworzenia rogów w dolnej części nagłówka po lewej i prawej stronie.
Section 3Style dla nagłówka - przykład 3
W trzecim przykładzie zostanie wykorzystany efekt cienia dla modelu pudełkowego: box-shadow. Dzięki czemu uzyskamy ciekawy efekt odrywającej się zakładki z tytułem.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | .example3 h1 { position: relative; border-color: #eee; border-style: solid; border-width: 5px 5px 5px 0; background: #fff; margin: 0 0 15px -15px; padding: 5px 15px; -moz-box-shadow: 1px 1px 1px rgba(0,0,0,.3); -webkit-box-shadow: 1px 1px 1px rgba(0,0,0,.3); box-shadow: 1px 1px 1px rgba(0,0,0,.3); } .example3 h1:after { content: ''; position: absolute; z-index: -1; bottom: 15px; right: 15px; width: 70%; height: 10px; background: rgba(0, 0, 0, .7); -webkit-box-shadow: 0 15px 10px rgba(0,0,0, .7); -moz-box-shadow: 0 15px 10px rgba(0, 0, 0, .7); box-shadow: 0 15px 10px rgba(0, 0, 0, .7); -webkit-transform: rotate(2deg); -moz-transform: rotate(2deg); -o-transform: rotate(2deg); -ms-transform: rotate(2deg); transform: rotate(2deg); } |
W tym przypadku, cała magia dzieje się w pseudoelemencie :after, gdzie korzystamy z cienia dla modelu pudełkowego oraz transformacji. Dzięki transform, uzyskujemy efekt załamania wstążki do góry.
Section 4Podsumowanie informacji o atrakcyjnych nagłówkach
Śledząc rozwiązania zastosowane w powyższych przykładach możemy sobie zdać sprawę z tego jak potężne mogą być pseudoelementy. Dzięki nim, można tworzyć zadziwiające efekty bez tworzenia dodatkowego kodu HTML dla docelowych efektów.
Podczas korzystania z pseudoelementów :before i :after należy pamiętać o dodaniu do nich atrybutu content: '';, aby pseudoelementy mogły poprawnie zadziałać.
Demo z tego artykułu można sprawdzić tutaj: CSS nagłówki i pseudoelementy
About the author
