Kategoria: CSS

Stickyposition : sticky. Jest miksem pomiędzy ustawieniem fixed i relative. Element jest traktowany jako fixed, dopóki pewna wartość wysokości strony nie zostanie przekroczona. Element wychodzi poza ekran i już staje się niewidoczny. Gdy element jest na ekranie to trzyma się on Ciebie jak naklejka do czasu przekroczenia pewnej wysokości.

Jesteś ciekawych efektów Woo w CSS. Ja postanowiłem zrobić krótką rewizję fajnych efektów CSS. Tak jak kiedyś to robiłem.

Na tej stronie masz prosty przykład jak możesz wykorzystać właściwość "position : sticky" w połączeniu z negatywnymi marginesami i obrazkami reprezentującymi dwie warstwy.

Historia Pamiętam jak przeglądałem po raz pierwszy internet.

Strony internetowe wyglądały bardzo prymitywne i nawet śmiesznie.

• Zły kontrast
• Masa gifów
• Źle powtarzające się tło...nie...Oczojebne tło.
• Napisy w stylu WordArt
• Migające napisy
• Lista gości
• Muzyka w formacie MIDI
• ClipArt
• Tabelki HTML
• Obrazki "Under Construction"
• Animowane napisy 3D.

Pamiętam jak kupiłem czasopismo "Komputer świat/Click!" i czytając ich poradniki dla zaawansowanych i próbowałem swoich pierwszych kroków w HTML. 

Te porady jednak tworzyły czasem takie strony. Pamiętaj Onet dawał możliwość tworzenia blogów za darmo więc każdy mógł zrobić "beznadziejną" stronę na temat "Dragon Ball" czy swojego ulubionego zespołu "Spice Girls"

calc() Czy wiedziałeś, że w CSS możesz wykonywać kalkulacje matematyczne?

Tworzenie stron internetowych nigdy nie było, aż tak łatwe. Pomyśleć, że kiedyś CSS nie miało żadnych funkcji teraz ich masz bardzo dużo i jednym problemem jest wsparcie przez przeglądarki.

Dobra wiadomość jednak jest taka, że wraz ze śmiercią Internet Explorer i pojawieniem się przeglądarki EGDE - CSS przeżywa najszybszy rozwój niż kiedykolwiek.

W tym wpisie omówimy w dokładnych szczegółach jak tą funkcje LICZENIA wykorzystać.

Mistakes Słuchaj, nie musisz, być specjalista czy grafikiem, aby znać CSS. Jeżeli określasz się jako FullStack, to znaczy, że znasz także CSS. Pytanie jednak brzmi czy pomimo tego, że znasz CSS, to wiesz, jaki błędów warto unikać.

CSS nie jest intuicyjny. Ma pewne ukryte zasady, które odkryjesz, dopiero gdy zobaczysz, że coś nie działa. 

Praca z samym CSS może być mimo wszystko przyjemna, ale aby tak było na pewno trzeba unikać pewnych błędów.

Oto 11 z nich.

vm Ostatnio robię poprawki na blogu. Przyglądam się temu, jak pisałem kiedyś CSS. Widzę, że dla pewnych nagłówków tekstowych napisałem tyle "@media Queries", aby tekst zawsze dopasowywał się do wielkości ekranu. Oczywiście tak nie powinno się robić. W sumie to rozwiązanie zakłada pewną ilość znaków tekście.  

Spójrz. Czy to dobrze wygląda?

.active Prosty problemy. Mamy pasek nawigacyjny stworzony na podstawie styli bootstrap.

Jak ustawić na wybranym przycisku nawigacyjnym klasę CSS active. Klasa ta podkreśli przycisk. Naturalnie chcemy podkreślić przycisk nawigacyjny, jeśli znajdujemy się na stronie, do której on referuje.

Stack modulesBootstrap oferuje łatwy skrypt do wywołania okien modalnych w stronach internetowych.

Czasem jednak istnieje potrzebna wywołania kolejnego okna, gdy już jedno z nich zostało otwarte.

Pamiętam, jak kiedyś uruchamiałem okna modalne przy użyciu kontrolek Telerik. W scenariuszu, w którym było potrzebne kolejne okno modalne, wtedy „łamałem sobie głowę”. Wywołanie okna modalnego, mając otwarte inne okno modalne, powodowało utworzenie okna modalnego w oknie modalnym. Całe szczęście, że nie programuję już z wykorzystaniem tych starych rozwiązań.

Mając jednak nawet bootstrapa i rozwiązanie godne naszych czasów wciąż zadaję sobie pytanie, jak to można zrobić.

Zaktualizowałem system do Windows 8.1. Nie ma sensu robić długiej recenzji, ale dla przeciętnego użytkownika PC aktualizacja właściwie nie jest potrzebna. Obecnie dla mnie najważniejszych gadżetem Windows 8.1 jest odpicowana przeglądarka Internet Explorer 11 wraz z narzędziami developerskimi.

Pierwszy raz mam wrażenie, że to narzędzie jest na tyle intuicyjne by go używać zamiast FireBug w FireFox-ie lub Developer Tools w Chrome.

@keyframesKiedyś bardzo dawno temu byłem bardzo zainteresowany robieniem różnych animacji . Animacja kiedyś kojarzyła mi się tylko ze Flash-em. Ja jako programista .NET próbowałem odwzorować te same efekty w Silverlight.

Na swoim blogu już zrobiłem dwa wpisy poświęconej animacji w CSS3.

VS Web Es

Wczoraj sprawdziłem pewne funkcjonalności Visual Studio 2013 oraz dodatku Web Essentials.

Nie mam pojęcia, co jest częścią tego dodatku Web Essentials, a co nie jest ? Nie zmienia to jednak faktu, że ten dodatek obrazuje funkcjonalności, które mogą pojawić się w następnej wersji Visual Studio

CSS3 AnimW poprzedni wpisie zrobiłem prostą animację napisu przy użyciu tylko CSS3.

Jak jednak z animować pojedyncze litery?

Sprawa jest dosyć prosta, jeśli wyraz nie zawiera dużo liter.

CSS3 AnimCSS3 oferuje znacznik “@keyframes”, który potrafi określić animację danego elementu html.Oczywiście wcześniej by osiągnąć taki prosty efekt musieliby użyć jQuery, Flasha albo Silverlight-a.

W tym wpisie pokaże banalną animację wypełnienia napisu.

IE StylesJeżeli zajmujesz się Web Developmentem to zapewne nie raz chciałeś wynaleźć wehikuł czasu i zabić wszystkich programistów odpowiadających za wygraną IE 5.0  w wojnie przeglądarek przeciwko Netscape.  Zwycięstwo tej wojny jest odczuwane ,aż do dzisiaj. Wiele użytkowników ślepo korzysta z IE. Świat na szczęście się zmienia…ale dzięki popularności systemu Windows XP użytkownicy IE8 i IE7 wciąż istnieją.

Tak to jest, gdy scalisz swoją przeglądarkę z systemem operacyjnym. Poza tym nie oszukujmy się nawet JQuery oficjalnie powiedziało nie dla IE8.

Tak koniec pisania specjalnych skryptów dla IE, bo są jakieś bugi z właściwością z-index i itp.

CSS3 GenIstnieje tona wspaniałych generatorów, które za ciebie napiszą style CSS3 wraz ze specyficznym prefiksami do przeglądarek.

Gradienty, Animacje, obramowania, cienia.

Oto krótka lista takich generatorów.

Focus BorderChyba dawno nie odrobiłem pracy domowej z technologii webowych, ponieważ nie mogłem ustalić co powoduje  to obramowanie. Teraz już wiem.

Zacząłem swoją przygodę z kontrolkami Telerik i jedną z najbardziej irytujących rzeczy było właśnie to obramowanie. Sprawa wydawała się trudna, ponieważ to obramowanie nie wywodziło się od żadnych styli CSS.

Less CSSKilka dni temu wyszła aktualizacja do ASP.NET i narzędzi WEB w Visual Studio 2012.

Zainteresowała mnie lista obsługiwanych składni językowych (CoffeScript, CSS Less), o których słyszałem, ale nie miałem jeszcze okazji ich sprawdzić. W pracy działam w końcu na Visual Studio 2010.

DuszkiTen wpis pokaże jak używać duszków w twoim projekcie WEB. Jest to użyteczna technika ponieważ możesz w jednym pliku graficznym umieścić wiele małych ikon.

Większa ilość mały obrazków skraca ładowanie strony. Mniejsza ilość obrazków o sensownym rozmiarze ten proces skraca.

FireFoxFireFox udostępnia wiele dodatków. Dzięki temu, nawet gdybym chciał zmienić przeglądarkę to nie mogę. Istnieje wiele dodatków, bez których nie mogę już żyć.

W tym wpisie opisałem kilka dodatków, które są użyteczne dla każdego grafika bądź programisty web.

Figury Scalable Vector Graphic (SVG) jest to standardowy język zaakceptowany przez W3C służący do opisywania dwuwymiarowej grafiki wektorowej, jak i rastrowej, w niektórych przypadkach za pomocą pliku XML. Firefox 3+, Opera 9+ i Safari 3+ wspierają renderowanie SVG. Jedyną zagubioną przeglądarką jest … oczywiście Internet Explorer w wersji 8 ,ale tą lukę można uzupełnić przy pomocy wtyczek. Chociaż i one odchodzą w zapomnienie.

SVG staje się następnym elementem standardów HTML 5. Wcześniej by użyć SVG trzeba było się posłużyć wspaniałym tagami jak <object> <iframe>. Jak pokazuje ten przykład.