Oskar Wójcicki - Portfolio Blog

Ness…

Oskar Wójcicki — Sun, 29 Aug 2010 11:10:21 +0000

Mój ostatni projekt Strona internetowa Zespołu Ness. Tutaj to poszalałem Jest nieszablonowo i nowocześnie. Na stronie można znaleść technologie takie jak jQuery i CSS3. Całość bardzo ciekawie się zgrywa i dostosowuje do każdej rozdzielczości. Całość można zobaczyć pod adresem : www.zespolness.pl . Zapraszam.

Nowoczesny layout krok po kroku cz.1

Oskar Wójcicki — Fri, 27 Aug 2010 17:24:33 +0000

Po dość sporej przerwie, w końcu udało mi się znaleźć trochę wolnego czasu aby coś wyskrobać J . Ostatnio miałem na głowie sporo projektów, głównie graficznych. Więc będąc już w temacie grafiki i layoutu, pokażę dziś jak stworzyć nowoczesny layout z wykorzystaniem nowych technologii … Taa, ładnie powiedziane , mówiąc technologie miałem na myśli CSS3 i jQuery

Dziś mam zamiar zrobić coś luźnego, jakiś ładny layout. dlatego wykorzystam CSS3, jak wiadomo nie zawsze można sobie na to pozwolić. Strony internetowe np. firm czy innych poważnych klientów muszą prezentować się tak samo w każdej przeglądarce, więc nie możemy dopuścić się kilku kuszących bajerów … Dziś możemy zaszaleć, więc będą też np. przeźroczyste PNG.

Cofając się myślami wstecz… Przypomniałem sobie jak wyglądało u mnie projektowanie designu jeszcze kilka lat temu… Odpalałem Photoshopa, rysowałem całą stronę, później wycinałem malutkie pliki graficzne i łączyłem wszystko w divach… A Fe ~! (Brrr…. Do czasów tabelek, wole się nie cofać ) Teraz sprawa wygląda całkiem inaczej. Najpierw powstaje ogólny szkic w głowie, który zapewne zostanie zmieniony jeszcze milion razy w procesie tworzenia. Później, tworzę ogólny zarys strony w Css a na koniec dodaję niezbędne pliki graficzne i dodatki takie jak wdrożenie CSS3 czy właśnie jQuery.

Mam już mały plan. Zobaczymy pod koniec ile z niego uda się wykonać i co ulegnie zmianom J . Więc tak… Wszystko będzie oparte na position:fixed. Strona będzie rozciągała się pod każdą rozdzielczość. Na samym dole będzie centralnie umieszczone poziome menu, które nie będzie się przesuwało wraz z przewijaniem strony. Logo? Nie wiem jeszcze, coś wymyślę… Coś ładnego i przeźroczystego… Najprawdopodobniej teź będzie „fixed”

Możemy wziąć się do roboty. Zacznę od przygotowania jakiegoś tła… Niestety w tym przypadku moja leniwość wygrała Pobrałem ładną teksturkę — Dark Wood. Tło już mamy, więc możemy zacząć kodować.
HTML:


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Nowoczesny Layout ~!</title>
<link href="default.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
</head>
<body>
 
</body>
</html>

CSS:

body {background:url(tlo.jpg) fixed;font-family:Helvetica, Verdana, sans-serif, Arial;margin:0px;font-size:12px;}

Pora zabrać się za wspomniane menu… Tutaj zbyt wiele grafiki nie będzie. Więc możemy zająć się CSSem:
CSS:

#page {width:100%;height:100%;}
#menu {position:fixed;bottom:20px;left:50%;width:600px;margin-left:-300px;padding:10px;background:url(menu.png);box-shadow: 0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;-webkit-box-shadow: 0px 0px 5px #000;-moz-border-radius:8px;-webkit-border-radius:8px;-khtml-border-radius:8px;text-transform:uppercase;font-weight:bold;font-size:16px;text-align:center;}
#menu ul, #menu li {margin:0;padding:0;list-style-type:none;}
#menu li {display:inline;}
#menu a {text-decoration:none;color:#fff;padding:5px;-moz-border-radius:7px;-webkit-border-radius:7px;-khtml-border-radius:7px;text-shadow:0px 0px 8px #000;}
#menu a:hover {background:#34c6ea;box-shadow: 0px 0px 5px #000;-moz-box-shadow: 0px 0px 5px #000;-webkit-box-shadow: 0px 0px 5px #000;text-shadow:0px 0px 1px #fff;}

BTW. #page nie ma związku z menu, jest to po prostu DIV, w którym będzie cała stronka. Teraz wytłumaczę trochę kodu. Aby wyśrodkować menu użyłem ciekawego tricku, jak widać - …left:50%;width:600px;margin-left:-300px; Więc logicznie rzecz biorąc, przesuwam menu na środek ekranu i odejmuję jego połowę Następna sprawa. Dlaczego przeźroczysty PNG na tło a nie opacity ? A dlatego, że opacity ma dziwne dziedziczenie, więc dzieci #menu też byłyby przeźroczyste, a tego nie chcę… Reszta to cień, zaokrąglone rogi i ustawienia czcionki. #menu li i #menu ul, objaśniać chyba nie muszę… A w #menu a i #menu a:hover nie ma nic specjalnego… Menu jest już w miarę gotowe, na koniec dodam jedynie ładny efekt przejścia w jQuery

Wszystko można zobaczyć pod adresem: http://oskarwojcicki.eu/przyklady/lay/cz1/ .

Część pierwsza to praktycznie same wprowadzenie i menu… Planuję jeszcze 2 częśći… Jedną na reszte elementów a drugą na samo wykończenie i bajery. Więc zapraszam do kolejnych części

Mała przerwa…

Oskar Wójcicki — Thu, 22 Jul 2010 07:09:46 +0000

Witam… Postanowiłem trochę odpocząć i wyjechać nad polskie morze. W związku z tym, zawieszam dodawanie nowych wpisów na 2tygodnie, komentarze również nie będą moderowane. Pozdrawiam wszystkich i życzę miłych wakacji… A, zapomniałbym… W nagłych przypadkach dzwońcie

O fontach…

Oskar Wójcicki — Mon, 12 Jul 2010 13:50:25 +0000

Więc tak… postanowiłem zrobić coś typu All in One dotyczące czcionek, ich doboru, kolorów, rodzajów, narzędzi itd. Będzie to raczej zbiór linków z kilkoma moimi wtrąceniami Podzielę się z wami również kilkoma typograficznymi „regułkami”, które niedawno poznałem.

CSS

Małe przypomnienie…

Czyli kilka podstaw obchodzenia się z fontami…

.selektor {
font-family: rodzaj;
font-size: wielkość;
font-style: styl;
font-weight: waga;
font-variant: variant;
 
text-decoration: dekoracja;
text-transform: transformacja;
text-align: wyrównanie;
text-indent: wcięcie;
 
line-height: odstęp między wierszami;
word-spacing: odstęp między wyrazami;
letter-spacing: odstęp między literami;
}

Przykład

.title {
font-family: Verdana;
font-size: 28px;
font-style: italic;
font-weight: bold;
font-variant: small-caps;
 
text-decoration: none;
text-transform: none;
text-align: right;
text-indent: 15px;
 
line-height: 32px;
word-spacing: 1px;
letter-spacing: -4px;
}

Ta Da ! Otrzymaliśmy całkiem ładny napis…

Linki

Darmowe fonty.

Teraz zacznę tę właściwą część artykułu. Zacznę od darmowych fontów do pobrania.

Font Squirrlel — Ciekawe, darmowe, nowoczesne fonty. Polecam.
urbanfonts — Spora kolekcja darmowych fontów.
FontsHome.com — To chyba moja ulubiona strona. Bardzo bogato wyposażona i z super funkcją podglądu czcionki.
fontfabric.com — Tę też bardzo lubię. Ciekawe i oryginalne fonty.
The League of Moveable type — Również bardzo ciekawe open sourcowe czcionki.

Zastępowanie fontów.

(Sam nie wiem po co…)

Cufon — Dość łatwy w obsłudze… (Ale my go i tak nie lubimy bo on nie lubi CSS3 )
Cufon Generator - I jego generator.

Różne

Loremn Ipsum generator — Generator tekstu. Sam używam go od bardzo dawna.
What the … Font — Narzędzie do identyfikacji fontów… Nie używam, bo jestem zbyt leniwy .
O typografii słów kilka — Ciekawy artykuł Maćka Wiczołka na temat typografii. (To z niego miały pochodzić te ciekawe regułki… Ale wolałem wstawić link do oryginału.)
Typetester — Testowanie, porównywanie, generowanie
ColorZilla — Dodatek do Firefoxa. Hmmm… Pipeta, o właśnie… Zapomniałem słowa
Google Font Directory — Ciekawe rozwiązanie wprowadzone przez Google. Pozwala nam na wykorzystywanie niestandardowych fontów, przechowywanych na serwerach Google. Polecam.

Wyszło jakoś tak… nijak… Nie wiem… Może myślałem, że mam więcej linków w zakładkach … Mniejsza… Mam nadzieję, że jednak się komuś przyda.

Nowe oblicze…

Oskar Wójcicki — Tue, 06 Jul 2010 06:03:34 +0000

Zanim się obejrzałem a tu już minęło pół roku od powstania bloga ! Sam się zdziwiłem… Z tej okazji postanowiłem go nieco odświeżyć nowym wyglądem Moim zdaniem jest dużo lepszy. Poprzedni, był moim pierwszym kodowanym pod WordPressa. To nie jedyna zmiana… Przyspieszyłem nieco całość i usunąłem irytujące mnie już dodatki Strona prezentuje się całkiem inaczej…

W nowym layoucie, zrobiłem śmiały krok do przodu. Tym razem zdecydowanie postawiłem na CSS3! Tak, poprzednio też był u mnie widoczny… Ale tylko jako dodatek. Można powiedzieć, że moją główną myślą przewodnią było jego wykorzystanie.

Przełamałem swój odwieczny lęk do JS… Brrr, kiedyś na samą myśl ciarki mnie przechodziły. Nie wiem dlaczego… Po prostu, miałem uczulenie na JavaScript . JS używałem tylko w ostatecznej konieczności a gdy w konsoli błędów wyskakiwał mi jakikolwiek alert, dostawałem białej gorączki. Można powiedzieć, że podałem sobie z JSem rękę na zgodę, a on pokazał mi w zamian, że nie jest taki zły i zaprzyjaźnił mnie ze swoim znajomym jQuery

Mam nadzieję, że nowa odsłona mojego Portfolio Bloga bardziej wam się podoba. Czekam na wasze opinie, sugestie, komentarze, uwagi co do nowego wyglądu. Gdybyście znaleźli jakiekolwiek niedociągnięcia, błędy, czy cokolwiek innego, to proszę, poinformujcie mnie o tym.

Na koniec, dla przypomnienia pokażę jak wyglądał stary layout:

Jednak nie… Nie wyglądał do końca tak Screena zrobiłem dopiero po brutalnym usunięciu kilku pluginów i widgetów… Mniejsza o to… Wyglądał mniej więcej tak ;P Nie mogłem się jednak rozstać z tym „płotem” w logo więc można go odnaleźć w nowej odsłonie

Firefox 4 i calc() z CSS3

Oskar Wójcicki — Thu, 01 Jul 2010 08:46:39 +0000

calc() coś na co czekam już od IE6 Co prawda, Firefox jej jeszcze nie obsługuje, jednak już trwają prace nad jej implementacją. Funkcja calc() pozwala wymiarować element, na podstawie działania arytmetycznego. Najlepiej będzie, jak przedstawię ją w praktyce

Przykłady

calc()

#menu {
  width:20%;
  margin-right:10px;
  float:left;
}
#content {
  width: -moz-calc(80% - 10px);
  float:left;
}

Wyobraźcie sobie teraz dwa divy. #menu i #content. Chcemy aby nasza strona dopasowywała się do każdej rozdzielczości, dlatego wymiary podajemy w %. I tu pojawia się pierwszy problem Jeśli ustalimy szerokość jednego z divów na 80% a drugiego na 20%, fakt zapełnimy cały możliwy obszar. A co jeśli chcemy dodać margines np. do menu? Wtedy już nie wystarczy nam miejsca… Jednak z pomocą przychodzi nam calc() Jak widać w #content … 80% — 10px, daje nam naszą wymarzoną szerokość …To tylko jeden z przykładów. Dzięki calc(), będziemy mogli bez obaw dostosowywać wymiary do naszych potrzeb.

Obecnie funkcja obsługuje operatory : + , — , / , * , max , min i mod

SnowMobiles.com

Oskar Wójcicki — Wed, 30 Jun 2010 08:10:39 +0000

Prosta, mała, przejrzysta strona. (O dziwo w tematyce zimowej) Bez przesadnych wodotrysków… Jednak nie mogłem się oprzeć kilku wstawkom CSS3. (Dodałem cień naokoło całej ramki i pochylony tytuł aktualnej strony) Całość możecie obejrzeć pod adresem: snowmobiles.com.pl

PS Przepraszam za „małą” przerwę ! …Już za kilka dni możecie się spodziewać kilku artykułów

„Kamila”

Oskar Wójcicki — Thu, 27 May 2010 20:08:39 +0000

Miałem do wykonania prostą, małą stronę internetową. Nie miałem pomysłu, aż tu nagle oglądając jakieś forum natrafiłem na tutorial, dzięki któremu „zainspirowałem się” do stworzenia tej oto strony. Strona przejrzysta, czytelna, bez specjalnych wodotrysków. Już niebawem pojawi się galeria i wszystkie teksty. Postęp prac można śledzić pod tym linkiem — Dekoracja Imprez — Kamila.

Strona bez użycia grafiki

Oskar Wójcicki — Sat, 24 Apr 2010 11:47:03 +0000

W ramach mojego ostatniego wpisu z przykładami w CSS3, chciałem podjąć się wyzwania, stworzenia strony www pozbawionej grafiki… Layout składa się tylko i wyłącznie z CSS. Wykorzystałem kilka transformacji, cieni, przeźroczystości, gradientów i udało się. Sam się zdziwiłem… Pomyślałem, że już za kilka lat będzie można ograniczyć (lub zlikwidować) grafikę na stronach www. Chociaż nie wiem czy będzie to miało znaczenie w przyszłości. Przecież łącza internetowe są coraz szybsze. Z drugiej strony, nasze maszyny również zwiększają swoją moc obliczeniową, więc nasze przeglądarki będą mogły sobie pozwolić na renderowanie znacznie „trudniejszych” projektów.

Pora na efekty

Dobra… trochę zboczyłem z tematu… A więc… acha, mówiłem o stronie bez grafiki … No to tak… Efekt jest ciekawy, chociaż możnaby to wykonać dużo lepiej W założeniu głównym, strona miała być obsługiwana przez silniki Webkit i Gecko … Jednak moja mania niekończenia zaczętych rzeczy wygrała i skończyło się na kompatybilności zaledwie z Firefoxem . Gdyby jednak komuś bardzo zależało na obejrzenie strony wykorzystując silnik WebKit, proszę o komentarz, podrasuję wtedy kod… (Choć jeśli mam być szczery… trochę mi się nie chce ).

Trochę kodu…

HTML


<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="pl-PL">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>hs2.pl - Oskar Wójcicki - Portfolio Blog</title>
<link href="default.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="strona">
<div id="logo">
<div id="logo2"></div>
<div id="logo3"></div>
<h1><a href="#">Oskar Wójcicki</a></h1>
<h2>Ciekawe zastosowania CSS3</h2>
<div class="szukaczka">
	<form method="get" id="szukaczka" action="">
	<p class="label"><label for="s">Wyszukiwarka</label></p>
	<p><input type="text" value="" name="s" id="s" /></p>
	<p><input type="submit" id="searchsubmit" value="Szukaj" /></p>
	</form>
</div>
 
<div id="menu">
<ul class='menu'>
<li><a href="#">Index</a></li>
<li><a href="#">O mnie</a></li>
<li><a href="#">Kontakt</a></li>
<li><a href="#">Blog</a></li>
</ul>
</div>
</div>
<div id="tresc">
 
<div class="post">
<div class="dataitytul"><div class="dzien">08</div><div class="miesiacrok">Kwiecień<br/>2010</div><h1 class="tytul">Wpis testowy.</h1></div>
<div class="pasek">KATEGORIA: Brak kategorii TAGI: Brak — Oskar Wójcicki @ 21:00</div>
<div class="tresc">
<div id="obrazek"></div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla lacus neque, placerat vel fringilla mattis, pulvinar quis risus. Donec non eros leo. Maecenas pulvinar, urna in iaculis viverra, nibh enim ultricies sem, nec molestie metus magna congue justo. Proin pulvinar pharetra mauris ac fringilla. Fusce sed arcu ac felis convallis consequat ut vel lacus. Phasellus ullamcorper, enim ac tempus placerat, ante sapien aliquam nisl, a ullamcorper quam erat in nisi. Suspendisse potenti. In felis ipsum, suscipit ut suscipit id, volutpat at nisl. Nunc turpis turpis, adipiscing eget consectetur in, vulputate quis ipsum. Aliquam consectetur commodo diam eu hendrerit. Duis eget nibh massa, ac consequat lectus. Duis non felis vitae ligula placerat lacinia in nec lectus. Donec non metus in tellus egestas molestie sed vel ligula.
 
Nulla posuere, tellus non venenatis malesuada, leo orci tristique turpis, ut vulputate massa odio nec est. Sed convallis augue sit amet sem vestibulum et hendrerit diam elementum. Nunc blandit venenatis libero, non lobortis magna fringilla a. Sed interdum sagittis lobortis. Nulla ac nibh nulla. Morbi molestie hendrerit libero ut molestie. Ut venenatis turpis non tellus ultricies volutpat venenatis lacus auctor. Nulla pulvinar dui quis sem accumsan accumsan. Etiam vitae dolor at lacus placerat cursus. Aenean sit amet enim ipsum, sed ultricies lectus. Quisque condimentum cursus dignissim. Pellentesque viverra, elit id lobortis porta, sapien dolor lacinia est, eu tempus nibh nisl ut elit. In hac habitasse platea dictumst. Curabitur quis urna ac mauris vestibulum tempor. Sed cursus dui ut lorem mattis at eleifend arcu dapibus. Proin in metus purus. Sed nec eros eget justo vehicula pellentesque at sed tellus. Sed vitae sem vel sem pellentesque luctus eget sed enim. Sed purus sapien, volutpat at venenatis vel, scelerisque in justo.
 
Duis ut metus tortor, in iaculis lacus. In ultricies lacus id urna elementum sollicitudin. Proin dolor enim, volutpat et sagittis et, posuere quis nulla. Curabitur lectus nisi, porta nec congue vitae, blandit vel orci. Etiam tincidunt gravida ipsum. Suspendisse sed dui justo. Sed porttitor ornare dolor, a fringilla urna accumsan in. Suspendisse in mi massa. Etiam vel nisl lectus. Proin metus ante, adipiscing vitae rhoncus nec, adipiscing nec felis. Donec nunc mauris, fermentum et scelerisque in, dictum non diam. Nam venenatis condimentum sapien vel pellentesque. Phasellus arcu est, commodo eu interdum sed, egestas nec erat.
 
Integer purus massa, fringilla vitae tincidunt a, placerat vitae purus. Maecenas orci metus, euismod a euismod non, adipiscing non nibh. Cras sem est, pulvinar sed lobortis eu, semper at augue. Vestibulum ultricies, quam vel adipiscing auctor, neque sapien mattis sapien, eu aliquet risus enim vitae dolor. Curabitur vitae commodo tellus. Proin sit amet ligula in nunc sollicitudin pulvinar eu vitae felis. Vestibulum vitae metus odio, sed sollicitudin enim. Duis at velit leo, a pellentesque sapien. Suspendisse id lacus mauris, vitae suscipit lorem. Sed justo ipsum, aliquam ut dictum vel, molestie eget felis. Proin sit amet tellus nisl, sit amet pellentesque ante. Nullam semper sodales velit eget vestibulum. Integer eu elit rutrum mi elementum mattis. Pellentesque in tellus ut neque ultrices congue at vitae odio. Curabitur porttitor luctus tellus non cursus. Phasellus velit nibh, varius eget molestie a, vehicula et nulla. Proin ac purus sit amet enim semper ornare. Vestibulum id orci id urna vestibulum viverra sed quis turpis.
 
In ut sem ut urna lacinia aliquet. Donec at euismod augue. Maecenas non purus a libero mollis gravida id et neque. Integer consectetur tincidunt lorem id euismod. Maecenas arcu quam, consequat at pellentesque sit amet, venenatis vel purus. Fusce sed lorem sit amet justo cursus ornare at nec dui. Aenean nec risus orci, in dignissim tortor. Mauris quis adipiscing mauris. Proin feugiat, nisi at tincidunt gravida, risus ipsum vulputate nisi, posuere tempor nisi erat eget ligula. Aliquam euismod, ante at faucibus consectetur, nisl enim suscipit nunc, et mattis mauris arcu in ante. Quisque id neque eget arcu ornare posuere. Suspendisse augue mauris, pellentesque ut mattis vitae, sodales at orci. Duis ac nulla sit amet enim lacinia suscipit. Morbi neque dui, commodo vel porttitor non, pharetra vitae odio. 
</div>
</div>
 
<div id="trescdol"></div>
</div>
</div>
</body>
</html>

CSS

body {background:#000;font-family:Arial, Helvetica, Sans, FreeSans, Jamrul, Garuda, Kalimati; margin:0px; font-size:12px; color:#fff;-moz-outline-style:none;}
::-moz-selection {background:#ca000f; color:#fff;}
p {margin:0;padding:0;}
#strona {background-image: -moz-linear-gradient(top, #5d5d5d, #000);width:100%;min-height:768px;}
#logo {width:98%;height:200px;background-image: -moz-linear-gradient(top, #ca000f, #8b000a);-moz-transform: rotate(0.8deg);-moz-box-shadow: 6px 6px 8px #000;-moz-border-radius:0 25px 25px 0;}
#logo h1 {font-size:45px;-moz-transform: rotate(-1deg);font-weight:normal;position:absolute;top:30px;left:230px;}
#logo h1 a {text-decoration:none;color:#f5f5f5;background-image: -moz-linear-gradient(top, #5d5d5d, #000); padding:15px;-moz-border-radius:15px;text-shadow:0px 0px 4px #000;-moz-box-shadow: 0px 0px 2px #343434;opacity:0.98;}
#logo h1 a:hover {color:#fff;text-shadow:0px 0px 8px #000;-moz-box-shadow: 0px 0px 4px #000;opacity:1;}
#logo h2 {font-size:15px;-moz-transform: rotate(-2deg);background-image: -moz-linear-gradient(top, #fff, #ddd);padding:5px;width:220px;text-align:center;color:#000;-moz-border-radius:5px;margin-left:350px;margin-top:-10px;font-size:15px;-moz-box-shadow: 4px 4px 2px #343434;}
#logo2 {width:100%;height:100px;background-image: -moz-linear-gradient(top, #fff, #000);opacity:0.1;-moz-border-radius:25px 25px 0 0;}
#logo3 {width:100%; height:20px;background: -moz-repeating-linear-gradient(top left -44.2deg, #424242, #424242 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 10px);opacity:0.3;}
#menu {height:200px;position:absolute;top:0px;}
ul, li{list-style-type:none;margin:0;padding:0;}
.menu li a{margin-left:-10px; width:220px;height:41px;float:left;line-height:40px;-moz-border-radius:15px;background-image: -moz-linear-gradient(top, #5d5d5d, #000);margin-top:4px;color:#fff;font-size:16px;opacity:0.85; text-decoration:none; text-align:center; font-size:28px;text-transform:uppercase;text-shadow:0px 0px 4px #000;}
.menu li a:hover{opacity:1;text-shadow:0px 0px 8px #000;}
#tresc {width:90%; background:#2e2e2e; min-height:400px;position:absolute; left:50%; top:180px; margin-left:-45%;-moz-box-shadow: 0px 0px 6px #000;-moz-border-radius:20px;}
#trescdol {width:100%; height:20px; background: -moz-repeating-linear-gradient(top left 45deg, #8b000a, #8b000a 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 10px);-moz-border-radius:0 0 20px 20px;}
.post {width:100%;margin-top:5px;}
h1.tytul {float:left; padding-left:10px; margin:0; margin-top:3px; font-size:34px;color:#8b000a;}
.dataitytul {width:100%; float:left; color:#e9e9e9; margin-top:-5px;-moz-transform: rotate(0.6deg);}
.dzien {font-size:38px; float:left; padding-left:5px;-moz-transform: rotate(6.6deg);}
.miesiacrok {font-size:16px; float:left; line-height:14px; margin-top:8px; padding-right:10px; border-right:1px dotted #e9e9e9;-moz-transform: rotate(-0.6deg);}
.pasek {width:100%; float:left; background-image: -moz-linear-gradient(top, #ca000f, #8b000a); padding:3px 0; font-size:12px; margin-bottom:5px;-moz-transform: rotate(0.5deg);}
.tresc {width:100% text-indent:50px; font-size:14px; line-height:18px;padding:10px;color:#e9e9e9;}
#obrazek {background: -moz-radial-gradient(ellipse closest-side, #ff0013, #ffa200 10%, #e1692e 50%, #2e2e2e); width:200px; height:200px; float:left;margin-right:20px;}
.label {display:none;}
.szukaczka {float:left; margin-left:250px;-moz-transform: rotate(-0.8deg);float:left;width:300px;height:26px;}
#s {background-image: -moz-linear-gradient(top, #5d5d5d, #000);border:none;color:#fff;-moz-border-radius:15px 15px 0 0;padding:5px;font-size:16px;margin-top:6px;float:left;width:200px;}
#searchsubmit {background-image: -moz-linear-gradient(top, #fff, #ddd);border:none;color:#000;-moz-border-radius:15px 15px 0 0;padding:5px;font-size:16px;float:left;width:70px;margin-left:5px; margin-top:7px;}
#searchsubmit:hover {background-image: -moz-linear-gradient(top, #5d5d5d, #000);color:#fff;}

(Kilka powtórzeń w CSS zostało zachowanych umyślnie, np. gdyby ktoś chciał wykorzystać jeden z elementów)

Przykłady

Stronę możecie zobaczyć tutaj. Zamieszczam również screen:

Abyście mogli skontrolować poprawność wyświetlania.

Przeznaczenie…

Właśnie… wiedziałem, że o czymś zapomniałem. Zapomniałem napisać jaki cel ma ten wpis… A więc chciałem wam ukazać potęgę CSS3, przekonać was trochę co do jego możliwości i pokazać kilka ciekawych zastosowań. Możecie śmiało wykorzystywać przykłady zamieszczone w tym kodzie.
Jeśli dla kogoś z was kod nie jest zrozumiały, piszcie śmiało. Postaram się go wam wytłumaczyć.

Przydatne przykłady CSS3

Oskar Wójcicki — Mon, 19 Apr 2010 19:30:17 +0000

Postanowiłem zebrać moje dotychczasowe wpisy o CSS3 i stworzyć z nich jeden. W którym zamieszczę wiele praktycznych przykładów wykorzystania CSS3. Pominę składnie ponieważ już o niej pisałem. Pokażę również kilka tricków z CSS . Mam nadzieję że komuś się przyda.

Ramki

HTML

<div class="ramka1">Treść</div>

CSS

.ramka1 {
border-radius:10px;
-moz-border-radius:10px;
-webkit-border-radius:10px;
-khtml-border-radius:10px;
background-image:-moz-linear-gradient(top, #4e4e4e, #000);
background: -webkit-gradient(linear, left top, left bottom, from(#4e4e4e), to(#000));
color:#fff;
width:300px;
height:100px;
border:2px solid #fff;
-moz-box-shadow: 0px 0px 5px #000;
-webkit-box-shadow: 0px 0px 5px #000;
padding:5px;
}

I przy niewielkim nakładzie pracy otrzymujemy ciekawy efekt

Ten sam styl można spokojnie wykorzystać do przycisku, tylko zmieńcie wymiary ;P . Taką ramkę możemy też, np obrócić dodając do stylu:

-moz-transform: rotate(-1deg);
-webkit-transform: rotate(-1deg);

I od razu nasza ramka wygląda ciekawiej . Prawie jak z Photoshopa

Może was irytować „zniekształcony” napis. Przy lekkim obróceniu ramki, na szczęście wystarczy objąć tekst w osobny znacznik i „wyzerować” jego transformacje, podając przeciwną do transformacji ramki.

Można też na zielono
background-image:-moz-linear-gradient(top, #6ede13, #429300);background: –webkit-gradient(linear, left top, left bottom, from(#429300), to(#6ede13));

Pomarańczowy też ładnie wygląda… Wystarczy zmienić gradient
background-image:-moz-linear-gradient(top, #f7a300, #dc7215);background: –webkit-gradient(linear, left top, left bottom, from(#f7a300), to(#dc7215));

Gradienty

CSS

.pasek{width:100%;
height:20px;
background:-moz-repeating-linear-gradient(top left 45deg, #424242, #424242 5px, rgba(255,255,255,0) 5px, rgba(255,255,255,0) 10px);
opacity:0.8;}

HTML

<div class="paek"></div>

Ten gradient jest przeźroczysty, więc można go zastosować w każdym elemencie np. w naszej ramce.

HTML

<div class="ramka1"><div class="paek"></div></div>

Tu można umieścić tytuł

I tutaj nasz tekst

Z pewnością przyda wam się narzędzie CSS3 Gradient Generator, pozwala ono w łatwy sposób wygenerować kod gradientu.

Zdaję sobie sprawę, że ten wpis jest dość ubogi. Dlatego postaram się go w miarę możliwości edytować.