CSS kilka sztuczek przy stosowaniu stylów dla tekstu
Prawda jest taka, że możemy tworzyć te wymyślne style fajnych czcionek i efektów tekstowych bez używania Photoshop, ale tylko za pomocą CSS. W tym poradniku pokażę Wam jak 😉
W tym artykule, mam wymienione kilka przydatnych sztuczek CSS i technik , które można wykorzystać do swoich pozycji, stylu czcionki i tekstu, jak i treści. Być może, te sztuczki CSS mogą zainspirować Cię na to, co można zrobić za pomocą CSS, a nie polegać na Photoshopie każdym razem.
Najważniejszą rzeczą ona temat CSS jest to, że znacznie wpływa na wydajność naszej stronie internetowej w zakresie ładowania strony. Niemniej jednak, jedynym problemem jest kompatybilność przeglądarek. Aczkolwiek, ja wciąż wolę używać CSS do ostylowania nagłówków, czcionki i tekstu. Jest to lepsze w kwestii czasu. Jakoś zawsze jest “fix” dla kompatybilności przeglądarek w Internecie 😉
Text Spacing
Wierzę, że większość z Was zna atrybut line-height. Tak więc chciałbym polecić Wam jeszcze jeden atrybut, jakim jest text-spacing, czyli odstęp między znakami. Umożliwia on zmianę odstępu poziomego między poszczególnymi znakami. Dzięki temu nie ma problemu z wykorzystaniem ciasnych czcionek na stronie.
h2 { letter-spacing: 1px; }
Text Capitalization
Czy wiesz, że możemy zmieniać nasz tekst tylko za pomocą CSS? Sprawdź jak działają poszczególne wartości atrybutu text-tranform:
h1 { text-transform: uppercase; } h2 { text-transform: capitalize; } h3 { text-transform: lowercase; }
CSS3 Text Shadow
Jak sama nazwa wskazuje, atrybut text-shadow, daje nam możliwość dodania cienia do naszego tekstu, diva, a nawet obrazka. Oto przykład użycia:
h2 { text-shadow: 2px 2px 2px #CCCCCC; }
CSS @font-face Trick
Wszyscy wiemy, że CSS3 wprowadził nowy atrybut – @font-face
. Dzięki temu narzędziu możemy uzyskać zamierzony efekty tylko z wykorzystaniem “web-safe font”, inaczej mówiąc, nie działa na starszych przeglądarkach typu Ie7. Jednak istnieje mały trick Font Squirrel @font-face generator. Działa nawet na IE7! 😉
Creating New Font Style with CSS
Możemy stworzyć nowy styl czcionki, wystarczy nam do tego narzędzie CSS3 text-shadow
. Oto mała sztuczka, jak używać tego atrybutu. Bądź kreatywny i stwórz swój… 😉
.algerian { text-shadow: 1px 1px 0 #FFFFFF, 2px 2px 0 #000000; } .castellar { color: #FFFFFF; text-shadow: -1px 0 0 #000000, 1px 1px 0 #000000, 2px -1px 0 #000000, 3px 0 0 #000000; } .outline { color: #FFFFFF; text-shadow: 1px 1px 0 #000000, -1px 1px 0 #000000, 1px -1px 0 #000000, -1px -1px 0 #000000; }
Inset Effect
Dodanie wewnętrznego cienia do tekstu i treści może być bardzo łatwo zrobione przy pomocy CSS3 text-shadow. Aby uzyskać lepszy efekt w nagłówkach, powinieneś dodać więcej “cienia” do niego.
.inset h2 { color: #444444; text-shadow: -1px -1px 1px #000, 1px 1px 1px #ccc; } .inset p { background: #CCCCCC; text-shadow: 0 1px 0 #FFFFFF; }
Embossed Effect
Ta sztuczka pozwala nam na uzyskanie efektu “wytłoczenia”. Jest bardzo podobna do cienia wewnętrznego. Należy po prostu odwrócić kolor cienia i zmienić czcionkę na pół-przezroczystą
.emboss { color: #ECECF6; text-shadow: -1px -1px 1px #FFFFFF, 1px 1px 1px #000000; } .emboss h2 { opacity: 0.5; }
Shadow Blurring
Możemy zrobić rozmyte cienie, przez zwiększenie elementu “blur distance” (trzeci atrybut znacznika text-shadow). Dzięki temu uzyskamy efekt neonu.
.neon { color: #D0F8FF; text-shadow: 0 0 5px #A5F1FF, 0 0 10px #A5F1FF, 0 0 20px #A5F1FF, 0 0 30px #A5F1FF, 0 0 40px #A5F1FF; }
Multiple Shadow-Layers Trick
Jeśli ustawimy wartość atrybutu “rozmycia” na 0, stworzy on klon tekstu. Nie ulega wątpliwości, że możemy umieścić w innym miejscu taki klon. Tak, staramy się korzystać z tych klonów i stworzyć coś bardziej atrakcyjnego jak efekt 3D.
.threed { color: #CCCCCC; text-shadow: 0 1px 0 #999999, 0 2px 0 #888888, 0 3px 0 #777777, 0 4px 0 #666666, 0 5px 0 #555555, 0 6px 0 #444444, 0 7px 0 #333333, 0 8px 7px rgba(0, 0, 0, 0.4), 0 9px 10px rgba(0, 0, 0, 0.2); }
CSS3 Masking
W taki prosty sposób możemy stworzyć “maskę” na dowolnym elemencie. W tym wypadku jest to tekst “MASKING”
.masking h2{ color: #FFFFFF; -webkit-mask-box-image: url(mask.png) 0 0 repeat; }
-webkit-mask-box-image
stworzy maskę nad wskazaną warstwą. Niestety, maskowanie w CSS3 działa tylko na przeglądarkach webkit. Inne przeglądarki jeszcze na to nie pozwalają
CSS3 Gradient Tricks
Czy wiesz, że możemy w prosty sposób stworzyć gradient na naszej stronie i to bez używania obrazków, lecz przy użyciu CSS3? Oto przykład:
.gradient { position: relative; } .gradient:after { content: 'Gradient Text'; color:#000; position: absolute; top: 0; left: 0; z-index: -1; } .gradient h2 { color: #117FB2; -webkit-mask-box-image: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,1)), color-stop(100%,rgba(0,0,0,0))); }
“Click” Effect CSS Tricks
Ten “trick” pozwala na zmianę efektu kliknięcia w przycisk. Przykład:
a.button { padding: 5px 20px; background: #CCCCCC; border: 1px solid; border-color: #AAAAAA #000000 #000000 #AAAAAA; text-decoration: none; font-weight: bold; color: #000000; } a:active { position: relative; top: 1px; } a.button:active { position: relative; top: 1px; left: 1px; border-color: #000000 #AAAAAA #AAAAAA #000000; }
Multi-column Layout with CSS
Szukasz dobrego rozwiązania na uzyskanie ładnego i zorganizowanego layout’u wielokolumnowego? Nie musisz dzielić strony na dwie części, czy też wstawiać treść w tabelę. Wystarczy do tego mała sztuczka w CSS3 🙂
#column p { -moz-column-count: 2; -webkit-column-count: 2; column-count: 2; -moz-column-gap: 50px; -webkit-column-gap: 50px; column-gap: 50px; text-align:justify; }
CSS Pseudo-Classes for Paragraph
Niektórzy projektanci lubią używać inicjałów wpuszczonych w treści. Aby to osiągnąć, można utworzyć specjalną klasę CSS i owinąć pierwszą literę z tej klasy. Jednak mam zamiar pokazać alternatywę dla tego za pomocą Pseudoklasy CSS.
.content p:first-child { font-style: italic; color: #333333; } .content p:first-child:first-letter { font-size: 250%; margin: 10px 7px 0; float: left; }
Text Selection CSS Trick
Ostatnia, w tym poradniku sztuczka CSS, czyli “text selector” – czyli mała klasa pozwalająca na zmianę koloru zaznaczania tekstu
.content p.green::selection{ background: green; color: #FFFFFF; } .content p.green::-moz-selection{ /* Firefox */ background: green; color: #FFFFFF; } .content p.red::selection{ background: red; } .content p.red::-moz-selection{ background: red; } .content p.blue::selection{ background: blue; color: #FFF296; } .content p.blue::-moz-selection{ background: blue; color: #FFF296; }
Co jeszcze?
Jeśli masz jeszcze inne tricki, pomysły na ten temat, zachęcam do podzielenia się tą wiedzą z nami,
Share is caring… 😉