CSS: zdjęcie z nachodzącym boxem

Na grupie wsparcia (HTML, CSS, JS), na której trochę się udzielam, padło pytanie o to jak zrobić obrazek i nachodzący na niego box z tekstem (wszystko responsywne). Postanowiłem, że dobrze będzie zrobić z tego tutorial, który może przyda się też innym.

 

Naszym celem jest stworzenie takiego efektu jak w zdjęciu wprowadzającym (na początku posta).

Musimy zacząć od utworzenia kodu HTML, który będzie zawierał obrazek i box z tekstem.

Nic skomplikowanego: div .container ładnie nam zgrupuje elementy w jedną całość, do tego obrazek i div .text który zawiera nagłówek i tekst (oczywiście obrazek i teksty możecie wstawić swoje 😉 )

 

Na początek zmieniłem sobie tło strony, by nie zlewało się z białym tłem w boxie

 

Następnie potrzebujemy by nasz .container miał odpowiednią szerokość i był wypozycjonowany relatywnie

Ja ustawiłem na 800px (możecie ustawić dowolny rozmiar) oraz dodałem max-width by .container nigdy nie był większy nić element nadrzędny (responsywność). Dzięki ustawieniu position: relative będziemy mogli pozycjonować jego zawartość względem tego diva a nie np. <body>

 

Nasze zdjęcie  też musi być responsywne

max-width: 100% zadba by zdjęcie nie było większe od naszego .containera a height: auto automatycznie dopasuje wysokość względem szerokości (zachowa proporcje)

 

Pora na nasz box z tekstem

Nadajemy mu białe tło (background: white), padding by tekst nie przylegał do krawędzi (brzydko wygląda), szerokość na połowę szerokości .containera (max-width: 50%) ale maksymalnie 300px (width: 300px) – oczywiście trzeba wziąć pod uwagę padding, który ustawiliśmy dlatego będzie to 50% (lub 300px) + 60px (po 30px z każdej strony).

position: absolute pozwoli nam wypozycjonować box względem lewego górnego rogu .containera (przez ustawienie position: relative dla .container – w przeciwnym razie pozycjonowalibyśmy względem lewego górnego rogu całej strony). Obniżamy od góry nieco jego pozycję (top: 50px) i przesuwamy na prawą stronę do samego brzegu (right: 0)> naszym przypadku akurat box nachodzi na obrazek z powodu zastosowania w boxie paddingu – jeśli nie mielibyśmy paddingu musielibyśmy ustawić right na np. 20px;

 

Pozostaje jeszcze kwestia lepszego wyglądu przy mniejszych rozdzielczościach

Jeśli ekran ma maksymalnie 700px to box z tekstem obniżamy o połowę wysokości .containera.

Poniżej 400px ustawiamy na pozycjonowanie relatywne (position: relative) aby pozycjonować względem położenia elementu bez używania pozycjonowania (domyślne położenie bez użycia styli css). Ustawiamy maksymalną szerokość na 100% a width ustawiamy na initial – „usuwa” width: 300px które ustawiliśmy wcześniej.

 

Efekt końcowy:

 

Oczywiście podane szerokości i położenia są przykładowe i możecie je dostosować do swoich potrzeb a w razie pytań zostawcie komentarz a na pewno odpowiem.

  • Na którym sporo się udzielasz – za co dziękuję 😉 Jak i za tutorial. Sądzę, że wielu osobom się przyda 🙂

    • Oj tam sporo 😉 Trzeba jakoś pomagać początkującym (i nie tylko) 🙂