Fragmenty kodu 2025, Styczeń

Narożna wstążka - CSS-Tricks

Narożna wstążka - CSS-Tricks

AKTUALNOŚCI .wrapper (margines: 50px auto; szerokość: 280px; wysokość: 370px; tło: białe; border-radius: 10px; -webkit-box-shadow: 0px 0px 8px rgba (0,0,0,0,3); "

Minimalna wysokość w różnych przeglądarkach - CSS-Tricks

Minimalna wysokość w różnych przeglądarkach - CSS-Tricks

Div (min-height: 500px; height: auto! ważne; height: 500px;) To działa, ponieważ (na szczęście?) IE traktuje „wysokość”, jak powinno być „min-wysokość”

Cross Browser Inline-Block - CSS-Tricks

Cross Browser Inline-Block - CSS-Tricks

Li (width: 200px; min-height: 250px; border: 1px solid # 000; display: -moz-inline-stack; display: inline-block; vertical-align: top; margin: 5px; zoom: "

Kompresuj CSS za pomocą PHP - CSS-Tricks

Kompresuj CSS za pomocą PHP - CSS-Tricks

Zacznij swoje pliki CSS z tym PHP (i nazwij go style.php): body (color: red;) Następnie wywołaj swój CSS z nazwą pliku PHP: "

Wspólne ikony Unicode - CSS-Tricks

Wspólne ikony Unicode - CSS-Tricks

A: before (content: "2709";) .phone: before (content: "2706";) .important: before (content: "27BD";) blockquote: before (content: "275D";) "

Komentarze w CSS - CSS-Tricks

Komentarze w CSS - CSS-Tricks

Przykład: body (font-size: 62,5% / * 1em = 10px * /) Elementy wewnątrz znaków / * * / to komentarze CSS. Pozwala to na wprowadzanie notatek do CSS, które będą „

Clearfix: wymuś elementowi oczyszczenie swoich dzieci - CSS-Tricks

Clearfix: wymuś elementowi oczyszczenie swoich dzieci - CSS-Tricks

To wystarczy w dzisiejszych czasach (IE 8 i nowsze): .group: after (content: ""; display: table; clear: both;) Zastosuj to do dowolnego elementu nadrzędnego, w którym "

Zmiana stylów autouzupełniania w przeglądarkach WebKit - CSS-Tricks

Zmiana stylów autouzupełniania w przeglądarkach WebKit - CSS-Tricks

Otrzymaliśmy miłą wskazówkę od Lydii Dugger w e-mailu, opisującą metodę zmiany stylów stosowanych przez przeglądarki WebKit do pól formularzy, które były „

Centrowanie strony internetowej - CSS-Tricks

Centrowanie strony internetowej - CSS-Tricks

# zawijanie strony (szerokość: 800 pikseli; margines: 0 automatycznie;) "

Zmień kolor zaznaczenia tekstu - CSS-Tricks

Zmień kolor zaznaczenia tekstu - CSS-Tricks

:: selection (background-color: #FFA; color: # 000;) (Więcej informacji) "

Przyciski Apple Pay w CSS - CSS-Tricks

Przyciski Apple Pay w CSS - CSS-Tricks

Nie musisz projektować własnych przycisków dla Apple Pay. W rzeczywistości Apple dosłownie mówi, że nie możesz. Więc co zamierzasz robić w sieci? Na szczęście "

Hacki specyficzne dla przeglądarki - CSS-Tricks

Hacki specyficzne dla przeglądarki - CSS-Tricks

***** Selektor Hacks ****** / / * IE6 i starsze * / * html #uno (kolor: czerwony) / * IE7 * / *: first-child + html #dos (kolor: czerwony) / * IE7, FF, Saf, Opera * / "

Center DIV z dynamiczną wysokością - CSS-Tricks

Center DIV z dynamiczną wysokością - CSS-Tricks

CSS: * (margin: 0; padding: 0;) #page (display: table; overflow: hidden; margin: 0px auto;) *: first-child + html #page (pozycja: względna;) / * ie7 * / * html ”

Animowana ziarnista tekstura - CSS-Tricks

Animowana ziarnista tekstura - CSS-Tricks

Witryna DayTrip wykorzystuje zgrabny efekt w nagłówku strony, który zniekształca obraz tła za pomocą animowanej, ziarnistej tekstury. Efekt jest subtelny, ale „

Bouncy Animated Ładowanie animacji - CSS-Tricks

Bouncy Animated Ładowanie animacji - CSS-Tricks

Tylko trochę zabawnych animacji CSS3. Jeśli martwisz się o super głęboką obsługę przeglądarki, użyj GIF-a. .loader (text-align: center;) .loader span ("

Rozmyty tekst - CSS-Tricks

Rozmyty tekst - CSS-Tricks

Ustaw przezroczysty kolor tekstu, ale dodaj cień: .blur (color: transparent; text-shadow: 0 0 5px rgba (0,0,0,0,5);) Rozmyty Więcej przeglądarek obsługuje kolory "

Podstawy Google Font API - CSS-Tricks

Podstawy Google Font API - CSS-Tricks

Łącza do plików CSS Zasadniczo łączysz bezpośrednio bezpośrednio z plikami CSS na Google.com. Dzięki parametrom adresu URL określasz, które czcionki chcesz i jakie „

Bezwzględne centrum (w pionie i poziomie) obraz - CSS-Tricks

Bezwzględne centrum (w pionie i poziomie) obraz - CSS-Tricks

Technika CSS background-image: html (width: 100%; height: 100%; background: url (7518965 / absolute_center_vertical_horizontal_an_image_css-tricks.png.webp) center center no-repeat;) CSS + Inline Image Technique: img ("

Lepsza Helvetica - CSS-Tricks

Lepsza Helvetica - CSS-Tricks

Body (rodzina czcionek: „HelveticaNeue-Light”, „Helvetica Neue Light”, „Helvetica Neue”, Helvetica, Arial, „Lucida Grande”, sans-serif; waga czcionki: 300;) ”

Podstawowy najazd linków jako CSS Sprite - CSS-Tricks

Podstawowy najazd linków jako CSS Sprite - CSS-Tricks

A (background: url (sprite.png.webp) no-repeat; display: block; height: 30px; width: 250px;) a: hover (background-position: 0 -30px;) Ustawiona wysokość i „

Ułatwienia dostępu / przyjazne dla SEO Ukrywanie CSS - CSS-Tricks

Ułatwienia dostępu / przyjazne dla SEO Ukrywanie CSS - CSS-Tricks

.screen-reader-text (position: bezwzględna; top: -9999px; left: -9999px;) Ta klasa może usunąć element ze strony, wyłączając go z przepływu i nie "

Wszystkie typy nośników w arkuszu stylów - CSS-Tricks

Wszystkie typy nośników w arkuszu stylów - CSS-Tricks

All Używany do wszystkich urządzeń multimedialnych słuchowy Używany do syntezatorów mowy i dźwięku brajl Stosowany do urządzeń dotykowych sprzężenia zwrotnego brajla z wytłoczeniem Stosowany do stronicowania "

Apple.com Hamburger Bun Menu - CSS-Tricks

Apple.com Hamburger Bun Menu - CSS-Tricks

Apple narobiło trochę hałasu, kiedy opublikowało zaktualizowaną witrynę, w tym zupełnie nową responsywną nawigację. Podczas gdy przeprojektowanie koncentrowało się na innych kwestiach, jeden „