Animowany gradientowy kontener z tekstem

W dzisiejszym poradniku pokażę, jak stworzyć ciekawy efekt ruchomego tła oraz obramowania kontenera za pomocą HTML i styli CSS.

Dodamy div z tekstem, w którym tło oraz obramowanie będzie składało się z dwóch kolorów, które płynnie przejdą w gradient, zmieniając się miejscami. Uzyskamy efekt delikatnego pulsowania, podobnego do animacji.

(więcej…)

0 Komentarzy

Menu pionowe z aktywnym linkiem w html i css

Menu nawigacyjne to kluczowy element każdej witryny internetowej, umożliwiający użytkownikom łatwe poruszanie się po jej zawartości. Wiele stron decyduje się na poziome menu, jednakże menu pionowe może być równie skutecznym i estetycznym rozwiązaniem. W tym artykule przyjrzymy się procesowi tworzenia menu pionowego za pomocą języków HTML i CSS.

(więcej…)

0 Komentarzy

Responsywna tabela RWD w html + css

Wpisów na blogu o tabelach mam ze 2, ten będzie trzeci, ale jeszcze bardziej podrasowany, z elastyczną tabelą i ciekawie wyglądającą, zwłaszcza w wersji mobilnej. Tabela jest ładnie skalowana, a na telefonie poukładana w kolumny z danymi, jedna pod drugą.

(więcej…)

0 Komentarzy

Slider z opiniami w html, css i JavaScript

Utworzyłam prosty i lekki skrypt slidera tekstowego, który może służyć jako slider opinii, recenzji, referencji. Przydatna i dość często spotykana funkcja na stronach, na których umieszczane są opinie klientów na temat usług firmy czy opinii o produkcie. Takie opinie dodaje się ręcznie, bo jest to prosty skrypt na stronę html. Za pomocą styli css odpowiednio nadany jest wygląd, a za pomocą javascript taki…

0 Komentarzy

Sublime Text – edytor kodu dla webmastera

Przez lata używałam różnych edytorów tekstowych do pisania kodu. Takim który został na długo, to świetny Dreamweaver. Jest to kombajn do tworzenie stron. Ostatnio nie działa mi za dobrze, coraz częściej narzekam na wolne uruchamianie się, zwłaszcza przy pliku z dużą ilością kodu, potrafi się zawiesić. Dlatego trafiłam na edytor, który od razu pokochałam - Sublime Text 3. Jest taki lekki, że ten…

1 Komentarz

Ruchome tło parallax

Dziś pokażę jak zrobić ładny i ciekawy efekt ruchomego tła parallax. Kiedy zaczniecie suwakiem przesuwać stronę w dół, to zobaczycie jak to działa. Efekt składa się z kilku warstw grafiki, czyli kilku obrazków png z przeźroczystym tłem, aby efekt zadziałał, to każdy element jest zapisany jako oddzielny obrazek.

Do działania efektu potrzebujemy plików: index.html, style.css i folderu „js” z plikami: index.js i basicScroll.min.js.

(więcej…)

3 komentarze