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… 😉