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… ;-)