Category: CSS

maj212010

[Photoshop] Jak postarzyć fotografię – efekt sepii

Po dłuższej przerwie, spowodowanej nadmiarem pracy, wracam do blogowania. W dziale Drzewko życzeń, życzenie zgłosił gniotek. Chciałby postarzyć swoje fotki i przerobić je z koloru na sepie. No to…

Do dzieła
Wybrałem fotkę flamingów z ostatniej wyprawy do zoo. Fotka ma wymiary 1000px na 670px. Na początek jako, że (po wykadrowaniu i zmniejszeniu) pochodzi prosto z aparatu [...]

View full post on websta.pl

maj202010

[jQuery] Częściowe rozwijanie i zwijanie tabeli

W kolejnym tutorialu z serii jQuery zrobimy rozwijaną i zwijaną tabelę. Utrudnieniem będzie to, że będziemy chować i pokazywać tylko część wierszy.

demo | pobierz(.zip)
Do dzieła
Zaczniemy od prostego szablonu dokumentu xHTML, takiego samego jak w [jQuery] Wysuwany boczny panel menu (tam jest opisany kod – jeśli czegoś nie rozumiesz). JavaScript na potrzeby tego tutka, [...]

View full post on websta.pl

maj202010

[jQuery] Galeria z podmianą obrazków

Przy użyciu jQuery zrobienie galerii z podmianą obrazków po kliknięciu to przysłowiowa bułka z masłem. Oczywiście zadbamy o to, żeby osoby z wyłączonym JavaScript(?!) też mogły zobaczyć duże obrazki. W tym przykładzie jako menu posłużą nam miniaturki obrazków, ale przy odrobinie dobrej woli możesz je zamienić na zwykłe menu tekstowe.

demo | pobierz(.zip)
Materiały
Użyję czterech fotografii z [...]

View full post on websta.pl

maj192010

Blipujący Websta

Kto widział, ten wie, a kto nie widział, ten może zobaczyć, że od pewnego czasu mam nowy widżet w sidebarze bloga: W tej chwili. Jest to podgląd mojego blipa, czyli mikrobloga. Nie będę się tu rozwodzić, bo jaki blip jest każdy widzi, albo sobie kliknie i zobaczy.

O co tu chodzi?
Zdecydowałem się na uruchomienie tego kanału [...]

View full post on websta.pl

maj192010

[Photoshop] Jak szybko wyciąć obiekt z tła?

Chce pokazać Ci sposób jak szybko, możesz wyciąć obiekt z jednolitego (lub kontrastowego) tła. Przydaje się to w codziennej pracy, kiedy musisz zmienić kolor tła za przedmiotem. Umieszczenie tak wyciętego obiektu na aukcji czy stronie internetowej nie przysporzy Tobie żadnego problemu. Technika jest dość dziwna, ale efektywna. No to już tradycyjnie ….

Do dzieła
Dzisiejszy tutek jest [...]

View full post on websta.pl

maj192010

[jQuery] Pokazywanie i ukrywanie dodatkowych pól formularza – plugin

Ruszam z nowym działem na blogu – Download. Będę tu umieszczać różnego rodzaju darmówki mojej produkcji. Na pierwszy ogień idzie plugin jQuery służący do pokazywania i ukrywania dodatkowych pól formularza.

demo | pobierz.zip
Jak używać
Pierwsze co musisz zrobić, to oczywiście pobrać paczkę z pluginem. Następnie dodać do Twojej strony bibliotekę jQuery (jeśli jeszcze nie używasz) oraz plugin [...]

View full post on websta.pl

maj182010

SzybkiTrik: Powtarzający się obrazek w Photoshopie

Często, czy to na potrzeby tła w grafice, czy na stronę internetową potrzebny jest mały obrazek, który da się powtarzać w pionie i poziomie bez widocznych połączeń. Pokaże Ci prosty trik, dzięki któremu zrobisz to w mniej niż 60 sekund.

Do dzieła
Podstawowa zasada to – im bardziej skomplikowany wzór, tym większy końcowy obrazek do powtarzania. Do [...]

View full post on websta.pl

maj182010

[Narzędzia] Szybkie screenshoty stron internetowych

Szukając inspiracji, robiąc research, zbierając materiały do moodbord’ów, artykułów czy portfolio robię setki screenshotów. Co prawda mam dodatek do Corela – Corel Capture, jednak narzędzie to nie jest szczytem marzeń i zwykle po prostu stosuję klawisz Print Screen i Ctrl+v do Photoshopa. Robota to mozolna, kadrowanie, zapisywanie, a jak trzeba zrobić zrzut całej strony, to [...]

View full post on websta.pl

maj172010

[Photoshop] Jak wygładzić gradient?

Projektując strony internetowe zgodne z obecnymi trendami, często stosuje się subtelne przejścia tonalne, delikatne cienie lub rozjaśnienia tła. Niestety zwykle zamiast gładkiego gradientu pojawiają się dość mocno widoczne pasy (szczególnie przy zapisie do .jpg). Jak na złość, im delikatniejszego efektu oczekujesz, tym bardziej jest to widoczne. Spróbujmy temu zaradzić.

Kiedy gradient się rozwarstwia?
Gdy starasz się zachować [...]

View full post on websta.pl

maj172010

[PHP] Formularz kontaktowy – skrypt do wysyłania maili

Prawie na każdej stronie internetowej znajduje się formularz kontaktowy. Wykonanie prostego formularza nie należy do zadań trudnych, jednak często przerasta początkujących webmasterów. Przekonuję się o tym prawie codziennie, czytając posty na forum. Postanowiłem napisać i udostępnić za darmo taki skrypt, przy okazji realizując prośbę z Drzewka życzeń.

demo | pobierz.zip
Wymagania

serwer z obsługą PHP5
aktywna funkcja mail() [...]

View full post on websta.pl