Tydzień drugi: pierwsze podstrony i ilustracje CSS

Założyłam sobie, że zacznę pracę nad moim projektem od narysowania wszystkich zwierząt w CSSie. Skąd w ogóle ten pomysł? Na początku stycznia natknęłam się na ten tutorial: A Beginner’s Guide to Pure CSS Images*. Pamiętam, że po zrobieniu go i stworzeniu pierwszej ilustracji w czystym CSSie, poczułam niesamowity przypływ mocy. W końcu udało mi się zrobić coś bardziej skomplikowanego niż ustawienie kolorów, czcionek i marginesów.

Tutorial jest świetny, krok po kroku tłumaczy jak stworzyć ilustrację. Jednocześnie Michael Mangialardi, jego autor, rozpoczął serię Daily CSS Images, w ramach której wszyscy chętni otrzymywali codziennie jedną rzecz do „narysowania” w CSSie. Strasznie chciałam wziąć udział w tym wyzwaniu, ale nie wyrabiałam się z czasem. Przyznam się też, że niektóre obrazki były tak fantastyczne, że aż głupio było mi zamieszczać moje próby na codepen.io.
* Jeśli chcecie pobawić się w „rysowanie” przejrzyjcie również ten Pocket Guide.

Gdy zdecydowałam się na wzięcie udziału w konkursie, wiedziałam, że będę chciała zrobić własny CSS Images challenge. Tym razem w moim tempie. Dwa miesiące to nie tak dużo czasu, prawda? Stwierdziłam, że spróbuję zrobić pierwszą ilustracje bez zaglądania do guide. Jedynie z pomocą tego co pamiętam i plików, które mam na komputerze. Efekt?

cat ears wrong

Nie, to nie są źle wypozycjonowane inner-ears. To są uszy, które nie zmieniają swojej pozycji, bez względu na to co zmieniam w kodzie. Tu najpierw słowo wyjaśnienia. Tutorial, który poleciłam mówi o stworzeniu trójkątów za pomocą strony Clippy. Ten sposób nie działa jednak na Firefoxie. Dlatego zdecydowałam się na opcję z przezroczystymi ramkami. Jak to zrobić? Nasz div musi mieć wysokość i szerokość równą zeru, a ramka po bokach musi być przezroczysta. W ten sposób dolna część ramki z paska zakończonego ściętymi bokami zamienia się w trójkąt.

.triangle {
    width: 0;
    height: 0;
    border-left: 50px solid transparent;
    border-right: 50px solid transparent;
    border-bottom: 60px solid #91a9cd;
}

Mój problem z nieruszającymi się wewnętrznymi uszami rozwiązałam przez wyrzucenie diva „inner-ear” poza faktyczne ucho. Nie do końca jestem jednak z tego zadowolona. Nie mogę przez to pozycjonować mniejszego trójkąta względem większego i muszę ustawić jego pozycję w stosunku do całej strony. Dlatego postanowiłam wrócić do tutoriala i przejść przez niego krok po kroku. Jednocześnie rozrysowałam wszystkie potrzebne mi kształty na kartce, żebym nie musiała co chwilę do tego wracać i zastanawiać się co dalej.

EDIT: Olśniło mnie przy prasowaniu! 😉 Małego trójkąta nie da się pozycjonować gdy jest zagnieżdżony w dużym, ponieważ ten div ma dosłownie zero powieszchni. A nie da się przesunąć coś na obszarze, który nie istnieje.

20170311_123531-1

Wnioski po pierwszym tygodniu? (1) Dobrze jest samemu eksperymentować i testować rozwiązania, ale czasami lepiej jest wrócić do materiałów, z których się uczyliśmy (szczególnie na początku projektu). (2) Planowania nigdy za mało. Lepiej spędzić minutę na rozpisaniu na części pierwsze tego co chcemy zrobić, niż przeładowywać nasz osobisty RAM. 😉


Nowe pliki na githubie będą jutro. Mam nadzieję, że uda mi się wrzucić coś więcej niż kota.

EDIT 12/02/17: Są już trzy podstrony – kot, tygrys i mysz. Nie jestem do końca zadowolona z tego, jak wyglądają. Ale postanowiłam, że najpierw skończę wszystkie podstrony, a następnie ujednolicę je stylistycznie.

Reklamy

2 thoughts on “Tydzień drugi: pierwsze podstrony i ilustracje CSS

  1. Wow!! Ale czadowe 🙂
    Przyznam, że tak jak i Ty wracam do HTMLa po wcześniejszej porażce z HTMLem 4.01 z dawnych lat. Przez ten cały czas programowałem aplikacje desktopowe i zajmowałem się bazami danych, systemami i sieciami. WebDev odszedł w siną dal.
    Dzięki DSP2017 próbuje się zmotywować.
    Powiem Ci, że zwierzaczki są fajne. Będę Ci kibicował – mam nadzieję, że oboje dotrwamy do końca. Powodzenia i dużo sukcesów naukowych 🙂

    Lubię to

  2. Witaj,
    Mamy podobne tematy. Ja jednak idę w stronę SVG. Łatwiejszy do zapanowania, posiada edytory graficzne i wydaje mi się, że łatwiej na nim wykonać animacje. Twój blog ląduje u mnie w czytniku RSS. Powodzenia.

    Lubię to

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj / Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj / Zmień )

Facebook photo

Komentujesz korzystając z konta Facebook. Wyloguj / Zmień )

Google+ photo

Komentujesz korzystając z konta Google+. Wyloguj / Zmień )

Connecting to %s