Jak utworzyć projekt granicy wycięcia z CSS
Z wycięty wzór na granicy możemy pokazać użytkownikom, co można znaleźć pod obszarem granicznym elementu HTML. To zadanie jest zazwyczaj rozwiązywane przez układanie dwóch lub więcej elementów bloku (w większości przypadków div) różnych rozmiarów jeden na drugim. Po pierwsze wydaje się to bezproblemowe rozwiązanie, ale staje się bardziej frustrujące, gdy chcesz wielokrotnie użyć układu, poruszać się po elementach, optymalizować projekt dla urządzeń mobilnych lub utrzymywać kod.
W tym poście pokażę eleganckie rozwiązanie wykorzystujące tylko CSS tylko jeden element HTML aby osiągnąć ten sam efekt. Ta technika jest również świetna dla ułatwienia dostępu ładuje obraz tła w CSS, oddzielone od HTML.
Pod koniec tego posta będziesz wiedział jak wyświetlić obraz tła w obszarze granicznym w celu utworzenia wycięty wzór na granicy możesz zobaczyć poniżej. Pokażę również, jak można sprawić, by projekt był responsywny za pomocą jednostek rzutni.
Kod początkowy
Jedynym wymaganiem na froncie HTML jest a element blokowy:
Musimy ponowne użycie wymiary (szerokość i wysokość) i wartości szerokości granicy div, więc je przedstawiam jako zmienne CSS. Zmienna --w oznacza szerokość z .cb element blokowy, --h wskazuje jego wysokość, --b idzie za szerokość granicy, i --b2 dla szerokości granicy pomnożonej przez 2. Później zobaczymy użycie ostatniej zmiennej.
Rozmiaruję Jednostka Poprawmy powyższy kod, dodając tło i ustawiając granicę, wysokość i szerokość używając naszych predefiniowanych zmiennych CSS. Oto jak wygląda teraz wersja demonstracyjna: Potrzebujemy obrazu tła do obejmować cały obszar Jeśli chcesz nadać obrazowi tła stały rozmiar, upewnij się, że rozmiar, który podajesz, umożliwia pokrycie obszaru granicznego The szerokość obrazu tła [ Podobnie wysokość obrazu tła [ W ten sposób dopasowaliśmy obraz tła do obszaru, który jest taki sam jak rozmiar The Uwaga: Jeśli dodajesz dopełnienie do Właśnie to mamy teraz: Teraz, gdy zakryliśmy obszar zawierający obramowanie obrazem tła, pozostaje tylko pokryć obszar środkowy granicy (obszar wyłączny granicy) o jednolitym kolorze, do którego sięgamy po Poziomy cień z wartością W wersji demonstracyjnej Codepen można zobaczyć białą ramkę wokół obrazu. Jest słynna sztuczka używanie cieni do tworzenia wielu granic-możemy użyć tej samej techniki dodaj jedną lub więcej kolorowych krawędzi do naszego projektu. Zaktualizowany The W moim ostatnim demo Codepen umieściłem kod obrazu tła i koloru pudełka-cienia w oddzielną klasę. To jest opcjonalny, ale może być bardzo przydatny, jeśli chcesz ponownie wykorzystaj układ wycinanego obramowania w wielu elementach i dodaj estetykę (obraz tła + kolor) dla każdego elementu niezależnie. Dodałem klasę o nazwie Od Aby ustawić wartość Ponieważ wymiary są w całości Uwaga: Nie zapomnij o dodaj metatag rzutni na swojej stronie HTML, jeśli zdecydowałeś się zoptymalizować go do widoku mobilnego.vw jednostka (możesz użyć stałych jednostek, jeśli chcesz). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2);
Szybkie wyjaśnienie -
vw i vh jednostkivw reprezentuje 1/100th szerokości rzutni. Na przykład, 50vw to 50 części szerokości rzutni krojone pionowo na 100 równych części, podczas 50vh to 50 części wysokości rzutni pokrojone poziomo na 100 równych części. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg); border: var (- b) solid transparent; height: var (- h); width: var (- w);
Rozmiar obrazu tła
tło wartość podaję: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; height: var (- h); width: var (- w);
calc (var (- w) + var (- b2))] jest sumą szerokość div [var (- w)] i szerokość lewej i prawej granicy [var (- b2)].calc (var (- h) + var (- b2))] jest sumą wysokość div [var (- h)] i szerokość górnej i dolnej krawędzi [var (- b2)].div (w tym obszar graniczny).środek słowo kluczowe wyrównuje obraz tła do środka div.div, Pamiętaj by zawierać obszar wypełnienia do rozmiaru tła, tak samo jak obszar graniczny.
Przykryj obszar wyłączny granicy
box-shadow wstawka. .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5); height: var (- h); width: var (- w);
var (- w) obejmuje całą szerokość div. Sposób użycia rgba funkcja koloru pozwala trochę przejrzystości do dodania do mieszanki, jednak możesz również użyć nieprzezroczystego koloru, jeśli chcesz w pełni pokryć obszar środkowy.
Dodaj dodatkową granicę z
box-shadowbox-shadow wartosc jest: .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: url (bg.jpg) center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: inset var (- w) 0 0 rgba (0,120,237, .5), 0 0 0 calc (var (- b) / 2) biały; height: var (- h); width: var (- w);
calc (var (- b) / 2) funkcja tworzy cień połowa szerokości granicy.
Opcjonalnie: oddzielny układ i estetyka
.poster1 do .poster1 --tbgc: rgba (0,120,237, .5); background-image: url ("http://bit.ly/2eQBij2"); tło jest skrótową własnością, jego właściwości można zmieniać ręcznie / indywidualnie. Dlatego możemy ustawić zdjęcie w tle w .poster1, i usuń wartość adresu URL z tło nieruchomość w .cb.box-shadow, możemy użyć inna zmienna CSS. The --tbgc zmienna przechowuje wartość koloru chcemy nadać box-shadow (lightblue w demo), więc wśród reguł stylu dla .cb my zastąp wartość koloru box-shadow nieruchomość z var (- tbgc). .cb --w: 35vw; --h: 40vw; --b: 4vw; --b2: calc (var (- b) * 2); background: center / calc (var (- w) + var (- b2)) calc (var (- h) + var (- b2)); border: var (- b) solid transparent; box-shadow: inset var (- w) 0 0 var (- tbgc), 0 0 0 calc (var (- b) / 2) biały; height: var (- h); width: var (- w);
Kod w trybie pionowym
vw, to będzie wyglądają zbyt małe kiedy oglądasz projekt w trybie portretowym (mniejsza szerokość w stosunku do wysokości) - które domyślnie są wszystkie urządzenia mobilne. Aby rozwiązać ten problem, przełącznik vw z vh, i zmień rozmiar projektu jak pasuje do trybów portretowych. @media (orientacja: portret) .cb --w: 35vh; --h: 40vh; --b: 4vh;
