Jak utworzyć wstążkę CSS
Rozmawiamy o Taśmy CSS w projektowaniu stron internetowych, gdy a pasek pudełka (zwana wstążką) zawija kolejne pudełko. To dość popularna technika projektowania udekorować tekst, zwłaszcza nagłówki. Na stronie W3C możesz sprawdzić, jak właściwie wykorzystane wstążki CSS mogą pomóc zawartość struktury w subtelny sposób.
W tym poście zobaczymy jak stworzyć prostą wstążkę CSS do którego możesz użyć poprawić nagłówki Na twojej stronie. Dzięki Transformacje CSS, możemy stworzyć ten projekt ze znacznie prostszą bazą kodu niż wcześniej.
Możesz rzucić okiem na ostatnie demo poniżej.
HTML i podstawowe style
Najpierw tworzymy znacznik oznaczamy symbolem .karta selektor reprezentujący a prostokąt prostokątny wstążka owinąć na około.
Ustawiliśmy również podstawowe wymiary i kolor tła z CSS.
.karta kolor tła: beżowy; wysokość: 300px; margines: 40px; szerokość: 500px;
Środkowa część wstążki
Użyjemy Zmienna CSS (pozwala nam przechowywać i ponownie wykorzystywać wartość CSS) --str do zapisz wartość dopełnienia. Wartość wyściółka właściwość używa var (- p) składnia lewego i prawego obramowania wstążki, aby mogła być łatwo rozszerzony. The --str zmienna później będzie wielokrotnego użytku; dzięki temu nasz kod jest elastyczny.
.wstążka --p: 15px; kolor tła: rgb (170,170,170); wysokość: 60px; dopełnienie: 0 var (- p); szerokość: 100%;
Na poniższym zrzucie ekranu możesz zobaczyć, jak ma wyglądać Twoje demo w tym miejscu:
Centrowanie wstążki
Musimy także wyśrodkuj wstążkę. My popchnij go w lewo o rozmiar wypełnienia (oznaczone przez --str zmienna) przy użyciu pozycjonowania względnego.
.wstążka --p: 15px; kolor tła: rgb (170,170,170); wysokość: 60px; dopełnienie: 0 var (- p); pozycja: względna; po prawej: var (- p); szerokość: 100%;
Zaktualizowane demo:
Boki wstążki
Teraz tworzymy lewa i prawa strona wstążki to powinno się wyginać wokół krawędzi karty. Aby to zrobić, używamy obu :przed i :po pseudoelementy .faborek.
Oba pseudoelementy dziedziczą kolor tła .faborek, i używamy filtr: jasność (.5) zasada, aby nieco przyciemnić ich kolor. Są też absolutnie ustawiony w ich (względnie pozycjonowanym) rodzicu.
Ich szerokość musi być taki sam jak rozmiar wypełnienia, i umieścimy je do lewego i prawego końca wstążki używając w lewo: 0 i po prawej: 0 zasady stylu.
.ribbon: before, .ribbon: after background-color: inherit; content: "; display: block; filter: brightness (.5); height: 100%; position: absolute; width: var (- p); .ribbon: before left: 0; .ribbon: after po prawej: 0;
Teraz wstążka z dodanymi właśnie bokami wygląda jak poniżej:
Pochyl boki
Aby zrobić boki wstążki wyglądać na zgiętego, musimy pochylić boki o 45 °. The transform: skewy () Reguła CSS pochyla elementy pionowo.
.wstążka: przed po lewej: 0; transform: skewy (45deg); .ribbon: after right: 0; transform: skewy (-45deg);
Jak widać krawędzie boków nie wyrównaj po transformacji, więc musimy ściągnij je.
Wyrównaj boki
Do określić właściwą długość przez co musimy przesunąć boki w dół, przechodzimy do trygonometrii. Musimy to znaleźć x, tak jak y to szerokość boków (równa rozmiarowi wypełnienia .faborek) i kąt θ wynosi 45 ° (kąt pochylenia).
Powstały x następnie należy zmniejszyć o połowę, ponieważ jest też lewa i prawa strona.
Jeśli używasz dowolnego preprocesora CSS, sprawdź, czy ma on dębnik funkcja, inaczej odwołaj się do wykresu stycznego lub kalkulatora do znajdź wartość styczną kąta. Mamy szczęście jako opalenizna 45 ° jest 1, co oznacza, że wartość x równa y w naszym przypadku.
.ribbon: before, .ribbon: after background-color: inherit; content: "; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p);
Od x trzeba było zmniejszyć o połowę, używamy calc () Funkcja CSS do wykonania podziału --str zmienna.
Wreszcie musimy wyrównaj boki wzdłuż osi Z. jak również dodajmy z-index: -1 rządzić po bokach, aby umieść je za środkową częścią wstążki.
.ribbon: before, .ribbon: after background-color: inherit; content: "; display: block; filter: brightness (.5); height: 100%; position: absolute; top: calc (var (- p) / 2); width: var (- p); z- indeks: -1;
Teraz, gdy ustawiliśmy boki, nasza wstążka CSS jest gotowa.
Poniżej możesz sprawdzić demo na żywo, pamiętaj, że korzysta ono również z dodatkowych stylizacji.
