Przyciśnij CSS-a przyciskiem

 

Jak zrobić w prosty sposób własne przyciski na stronę? CSS w czystej postaci. Wystarczą nam cztery reguły CSS i dwa pliki graficzne:

Przycisk w cssPrzyciski css - obraz buttona

Dłuższy plik ma maksymalną szerokość przyszłego przycisku. Dlaczego obrazy są zduplikowane? Dla efektu naciśnięcia – powyżej jest wersja wklęsła, poniżej – wypukła.

Kod HTML przycisków

<a href="http://kissdesign.pl" class="button"><span>Kliknij na mnie :)</span></a>

Kod CSS przycisku

a.button{
	background: url(btn0.png) right -31px no-repeat;
	padding: 0 21px 0 0;
	height: 31px;
	display: block;
	float: left;
	text-decoration: none;
	line-height: 31px;
	font-family: Arial, Helvetica, sans-serif;
	font-weight: bolder;
	outline: none;
} 
a.button:active{
	background-position: right 0;
} 
a.button span{
	background: url(btn1.png) 0 -31px no-repeat;
	padding-left: 21px;
	height: 31px;
	display: block;
	font-size: 12px;
	color: #fff;
} 
a.button:active span{
	background-position: 0 0;
}

Ściągnij gotowca

Pobierz gotowe reguły przycisków CSS wraz z grafikami.

Podoba Ci się ten wpis? Interesuje Cię tematyka związana z zastosowaniem CSS? Podziel się wrażeniami w komentarzu!

 
 

Kompozycja strony w czterech słodkich punktach

 

Prostokąt o proporcjach 1.6 x 1.0 - nasze "płótno"

Dwu- czy trzykolumnowy layout? Menu górne czy boczne? Stopka? Tak, Poproszę. Voila! Mamy gotową stronę.

Ten blog nie zostałby nazwany KISSdesign, gdyby traktował o stronach wyciętych z szablonu. Sieć to prawdopodobnie najbardziej konkurencyjne środowisko z jakim mamy do czynienia. Użytkownik naszej strony ma w zasięgu jednego kliknięcia miliony innych. Co zrobić by zatrzymać go choć na chwilę dłużej? Z pewnością treść.

A design? Może tylko pomóc. Weźmy na warsztat kompozycję strony. Choć w sieci, nasze płótno nie ma ściśle określonych wymiarów (różne rozdzielczości monitorów, proporcje ekranu itp.), warto  samemu zadbać o jego odpowiedni rozmiar. Z różnych przyczyn kultura przyniosła nam magiczne proporcje, które wydają się nam piękne. Weźmy na przykład kartki formatu A4. Albo format flag państwowych (powyżej).

Co prawda wysokość strony jest zwykle większa niż jej szerokość, ale zasada pozostaje ta sama. Resztę możemy odseparować wizualnie – linią poziomą, odstępem, odrębną kolorystyką itd.

Na rysunku powyżej, zaznaczyłem tzw. sweet spots, czyli punkty, w których krzyżują się linie pomocnicze. Wyznaczają one centrum zainteresowania czytelnika. Zobacz jak można je wykorzystać!

Symetryczna kompozycja strony internetowej

Symetryczna kompozycja strony internetowej

Wieje nudą? Strona jest pozbawiona dynamizmu. Uwaga czytelnika koncentruje się wyłącznie wokół grafiki. Słodkie punkty są zmarnowane. Pora na drugi przykład.

Dynamiczny layout strony internetowej

Dynamiczny layout strony internetowej

Każdy element strony zawiera sweet spot. Poza tym wykorzystanie pustego miejsca (white space) jest bardziej efektywne. Separuje treść od reszty. Zwróć uwagę, że ta kompozycja strony przypomina drukowane publikacje. Margines górny i lewy kierują skupienie czytelnika do centrum. Ostatecznie jego uwaga koncentruje się na tekście, leżącym w prawym, dolnym rogu. Dokładnie w ten sam sposób wędruje nasz wzrok, gdy czytamy książkę.

Słyszałeś o sweet spotach? Korzystasz z nich, czy ufasz swojemu wyczuciu? Napisz o tym w komentarzu!

 
 

Hack na @font-face – dowolna czcionka na stronie

 

100% @font-face -  dowolna czcionka na stronieMagia @font-face opisana  przeze mnie wymaga małego sprostowania. Wszystko wynika z faktu, iż różne przeglądarki akceptują różne formaty czcionek, linkowanych za pomocą @font-face.

Firefox i Chrome doskonale radzą sobie z formatem .ttf, natomiast Internet Explorer teoretycznie wspiera .eot. Jak w takim razie zapewnić spójną typografię na naszej stronie? Komentarze warunkowe mogą rozwiązać problem. Z tym, że to nieeleganckie rozwiązanie i należy je stosować w ostateczności.

Chcecie gotowca? Oto i on w całej okazałości:


@font-face {
  font-family: 'KISS design';
  src: url('Kissdesign.eot');
  src: local('KISS design Regular'), local('KISS design'),
         url('Kissdesign.otf') format('opentype');
}

Odrobina komentarza. Po pierwsze potrzebujemy w takim razie czcionki w dwóch formatach - .eot i .otf/.ttf. Z pewnością przyda Ci się doskonały i darmowy konwerter formatów czcionek opisany przeze mnie.

Po drugie, jeżeli przeglądarka znajdzie czcionkę o nazwie „KISS design Regular” na dysku lokalnym, zostanie ona użyta. Niesie to niewielkie ryzyko, że użytkownik będzie miał na swoim komputerze zupełnie inną czcionkę, zapisaną pod użytą przez nas nazwą. Warto mieć to na uwadze. Jeżeli jednak użytkownik nie posiada lokalnie żądanej czcionki, przeglądarka pobierze ją z serwera – „Kissdesign.otf”.

Po co w takim razie linkowanie „Kissdesign.eot”? Dla ukochanego IE. Internet Explorer zignoruje drugie wystąpienie „src: (…)”, ponieważ nie rozumie znaczenia klauzul local i format.

Jeżeli chcesz zgłębić ten temat, polecam wpis Bulletproof @font-face na blogu Paula Irisha.

 
 

Uwolnić czcionki – dowolny font na stronie

 

Najnowsze przeglądarki już wspierają właściwość @font-face, która pozwala na podlinkowanie dowolnej czcionki. Następnie można jej użyć pod wybraną przez siebie nazwą. Zobacz jakie to proste:

@font-face {

font-family:"Times New Polkowski";

src: url(../resources/fonts/tnpolkowski.otf);

}

p{ font-family: "Times New Polkowski", Georgia, Times; }

Ok, to nie jest takie proste. Jeszcze. Nie został rozwiązany problem formatów czcionek – każda platforma i system operacyjny preferuje inny format. Do tego trzeba uważnie czytać umowy licencyjne fontów – najczęściej nie pozwalają one na wykorzystywanie w taki sposób (co sprytniejszy użytkownik może pobrać udostępnioną przez nas czcionkę).

Mimo to @font-face jest kuszącą perspektywą, która pozwoliłaby odesłać w niepamięć techniki podmiany tekstu obrazem. A to znaczy ogromną oszczędność czasu!

Podziel się ze mną opinią – czy ten wpis był przydatny?

 
 
następne wpisy »