Nowy Design 2025

Nowy design 3dstrefy został stworzony z myślą o nowoczesnych trendach i technologiach 2025 roku. Główne cechy to glassmorphism, neomorphism, gradientowe akcenty i zaawansowane animacje.

Poniżej znajdziesz omówienie głównych elementów designu, wraz z przykładami komponentów, które zostały zastosowane na stronie.

Paleta kolorów

Tło główne

--bg-primary: #0A0A14;

Tło secondary

--bg-secondary: #12121E;

Akcent główny

--accent-primary: #2C6BFF;

Akcent secondary

--accent-secondary: #5E17EB;

Tekst główny

--text-primary: #F8F9FA;

Tekst secondary

--text-secondary: #ADB5BD;

Tło karty

--card-bg: rgba(24, 24, 36, 0.3);

Sukces

--success: #28a745;

Typografia

Nagłówek H1

Nagłówek H2

Nagłówek H3

Nagłówek H4

Nagłówek H5

Nagłówek H6

Lead paragraph. Tekst wprowadzający, który wyróżnia się na tle innych akapitów.

Standardowy akapit tekstu. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget felis eget urna ultricies fermentum.

Pogrubiony tekst i tekst pochylony dla wyróżnienia ważnych informacji.

Odnośniki mają specjalny styl z efektem hover.

Tekst kodu dla fragmentów kodu lub nazw zmiennych.

Cytaty blokowe dla dłuższych cytatów, które wymagają wyróżnienia.

Autor cytatu

Efekty i style

Glassmorphism

Efekt przezroczystości i rozmycia tła, który tworzy wrażenie szkła.

Neomorphism

Efekt trójwymiarowości poprzez odpowiednie cienie i gradienty.

Gradienty

Płynne przejścia między kolorami dla ożywienia interfejsu.

Komponenty UI

Przyciski

Karty

Karta standardowa

Podtytuł karty

Treść karty z krótkim opisem lub informacją. Karty mogą zawierać różne elementy.

Odnośnik 1 Odnośnik 2

Featured

Karta wyróżnionego posta

15.03.2025 12 komentarzy

Specjalna karta dla wyróżnionych postów z dodatkowymi stylami i efektami.

Czytaj więcej

Karta posta

10.03.2025 Admin 8 komentarzy

Karta standardowego posta z metadanymi i odnośnikiem do pełnej treści.

design UI

Czytaj więcej

Elementy formularzy

Pole tekstowe

Lista rozwijana

Pole tekstowe wieloliniowe

Checkbox niestandardowy

Radio niestandardowe 1

Radio niestandardowe 2

Suwak

Alerty

Alert główny - ważna informacja dla użytkownika.

Alert sukcesu - operacja zakończona pomyślnie.

Alert ostrzegawczy - zwraca uwagę na potencjalny problem.

Alert niebezpieczeństwa - krytyczny błąd lub problem.

Odznaki i etykiety

Standardowa Główna Secondary Sukces Niebezpieczeństwo Ostrzeżenie Informacja

Animacje

Animacja unoszenia

Ta karta wykorzystuje animację unoszenia w górę i w dół, tworząc efekt lekkości i głębi.

                
                  @keyframes float {

                    0% { transform: translateY(0px); }

                    50% { transform: translateY(-15px); }

                    100% { transform: translateY(0px); }

                  }

                  .float-animation {

                    animation: float 6s ease-in-out infinite;

                  }

Efekt podświetlenia przy hover

Najedź kursorem na kartę, aby zobaczyć efekt podświetlenia podążający za kursorem.

                
                  element.addEventListener('mousemove', function(e) {

                    const rect = this.getBoundingClientRect();

                    const x = e.clientX - rect.left;

                    const y = e.clientY - rect.top;

                    element.style.background = `radial-gradient(

                      circle at ${x}px ${y}px,

                      rgba(255, 255, 255, 0.15) 0%,

                      rgba(255, 255, 255, 0) 70%)`;

                  });