Rysunek Szablony CSS

Konfigurowalne szablony CSS do rysunków dla spójnego stylu grafiki

Galerie rysunków są podzielone w rozpoznawalny sposób. Wysokie studium postaci rozciąga swój rząd i wypycha sąsiednie, podpisy znajdują się na różnych wysokościach na kartach, a szeroki szkic tuszem pozostawia niezręczną lukę na laptopie. Szablony CSS do rysunków są dostarczane z już podjętymi decyzjami: odstępami, typografią podpisów i zachowaniem siatki podczas zwężania ekranu.

Szerokości kolumn, odstępy, proporcje obrazu

Większość wyglądu galerii zależy od kilku właściwości i warto zobaczyć, jak są one ustawione:

1. Siatka lub Flexbox dla galerii, gdzie odstępy zamiast marginesów na każdej karcie są utrzymywane przez lukę;
2. Stałe proporcje w polu multimediów, dzięki czemu wiersze pozostają równe niezależnie od wymiarów zeskanowanego pliku;
3. dopasowanie do obiektu: zakrywanie dla jednolitych miniatur, dopasowanie do obiektu: zawieranie miejsca, w którym cały rysunek ma pozostać;
4. Stały odstęp pod obrazem w przypadku etykiet medium i roku, który zapobiega zmianie wysokości podpisów.

Niewygodnym przypadkiem jest długie, pionowe studium postaci stojące obok kwadratowego zbliżenia tego samego obiektu. W trybie „cover” nogi zostają przycięte; w trybie „contain” rysunek pozostaje, ale po obu stronach pozostają puste pasy. Stylizacja, która ogranicza wysokość pola multimedialnego i centruje obraz w ustalonym formacie, obsługuje oba te elementy bez osobnej reguły dla każdego dzieła.

Wąskie ekrany bez zepsutych miniatur

Małe ekrany to miejsce, w którym galeria rysunków traci najwięcej, ponieważ szczegółowe studium wciśnięte w wąską kolumnę nie oddaje już jakości linii, dla której zostało stworzone. Tryby responsywne w Nicepage wyświetlają każdą szerokość osobno i trzy rzeczy zasługują na uwagę:

1. Czy podglądy pozostają wystarczająco szerokie, aby można je było odczytać przy najmniejszej szerokości, zamiast zachowywać dodatkowe kolumny;
2. Czy podpisy zawijają się pod obrazem i zachowują odstępy, gdy tytuł jest długi;
3. Co zastępuje najechanie kursorem myszki po dotknięciu, ponieważ stany podglądu i linki do widoków szczegółowych wymagają odpowiednika fokusu.

Lokalne nadpisania, gdy ustawienia predefiniowane są niewystarczające

Nicepage Kod CSS omawia, co pomijają style predefiniowane. Dokumentacja CSS pokazuje, jak regułę można dołączyć do pojedynczego elementu lub zastosować na całej stronie: grubsze obramowanie wokół skanów węgla drzewnego, przesunięcie podpisu różniące się w poszczególnych seriach i cieplejsze tło za tuszem sepii.

Skanowany grafit jest cieplejszy niż cyfrowa grafika liniowa, więc tło, które upiększa jeden, może przytłumić drugi i zazwyczaj właśnie tam pojawia się pierwsze nadpisanie. Zanim wybierzesz szablon, wczytaj dwa rysunki, które ze sobą kolidują – szeroki, węglowy pejzaż i wysoki portret – i obserwuj, jak styl na nie wpływa.