\n Program\u00f3w u\u017cywanych do projektowania stron internetowych jest wiele, ale tylko kilka z nich jest naprawd\u0119 wartych twojego czasu i wysi\u0142ku. Takie oprogramowanie sprawia, \u017ce \u200b\u200bnasze projektowanie stron internetowych jest o wiele \u0142atwiejsze i szybsze.\n<\/p>\n
\n CSS znany r\u00f3wnie\u017c jako Cascading Styling Sheets s\u0142u\u017cy do zmiany lub zmiany widoku stron internetowych utworzonych w HTML i XHTML. Wi\u0119kszo\u015b\u0107 przegl\u0105darek internetowych obs\u0142uguje CSS. Chocia\u017c najnowsza wersja CSS to CSS 4, nadal szeroko stosowany jest CSS3.\n<\/p>\n
\n CSS 3 jest rozszerzeniem CSS 2.1 i zawiera wiele opcji, kt\u00f3re pomagaj\u0105 u\u017cytkownikowi w szybszym i \u0142atwiejszym zaprojektowaniu strony internetowej. Dzi\u0119ki CSS 3 projektanci nie my\u015bleli o hakowaniu kodu CSS i HTML do pracy w innej przegl\u0105darce i marnowaniu na to czasu, CSS 3 to przysz\u0142o\u015b\u0107 projektowania stron internetowych.\n<\/p>\n
\n Nowe rzeczy w CSS3\n<\/p>\n
\n Dzi\u0119ki opcji dodawania film\u00f3w i obiekt\u00f3w 3D na Twojej stronie internetowej wprowadzono wiele ulepsze\u0144 w CSS 3, om\u00f3wimy szczeg\u00f3\u0142owo 14 z nich.\n<\/p>\n
\n Zalet\u0105 korzystania z CSS 3 jest to, \u017ce jest on kompatybilny z poprzednimi wersjami, a strony internetowe, kt\u00f3re korzysta\u0142y ze starszych wersji, mo\u017cna ponownie dostosowa\u0107 za pomoc\u0105 CSS 3. Wi\u0119kszo\u015b\u0107 przegl\u0105darek internetowych jest kompatybilna z CSS, wi\u0119c modyfikacja za pomoc\u0105 pomocy CSS 3 jest doskonale wy\u015bwietlany, ale je\u015bli chcesz doda\u0107 strony z poprzedniej wersji bez zmian, jest to r\u00f3wnie\u017c mo\u017cliwe. Lepiej dostosowa\u0107 witryn\u0119 do CSS 3, poniewa\u017c strony zbudowane na CSS 3 \u0142aduj\u0105 si\u0119 szybciej.\n<\/p>\n
\n Kolejn\u0105 wielk\u0105 zalet\u0105 korzystania z CSS 3 jest to, \u017ce mo\u017cemy podzieli\u0107 du\u017ce modu\u0142y na r\u00f3\u017cne ma\u0142e modu\u0142y, kt\u00f3re nie by\u0142y dost\u0119pne w jego poprzedniej wersji. To znacznie u\u0142atwia u\u017cytkowanie i poprawia praktyczno\u015b\u0107.\n<\/p>\n
\n CSS 3 ma wiele opcji, kt\u00f3re znacznie to u\u0142atwi\u0142y, s\u0105 to: kolor, t\u0142o i obramowanie, model pude\u0142ka, selektory, efekty tekstowe, transformacja 2D i 3D oraz interfejs u\u017cytkownika. Je\u015bli ludzie my\u015bl\u0105, \u017ce nie ma starych opcji, to dla ich informacji ten CSS 3 ma r\u00f3wnie\u017c wszystkie poprzednie opcje, ale te opcje s\u0105 podzielone na ma\u0142e funkcjonalne cz\u0119\u015bci. Wszystkie te opcje u\u0142atwi\u0142y obs\u0142ug\u0119.\n<\/p>\n
\n Je\u015bli chcesz wprowadzi\u0107 zmiany w modu\u0142ach, naj\u0142atwiejszym narz\u0119dziem jest CSS 3, poniewa\u017c mo\u017cna bardzo \u0142atwo wprowadza\u0107 zmiany w oddzielnych modu\u0142ach i integrowa\u0107 je z g\u0142\u00f3wnym systemem. Problemy mo\u017cna \u0142atwo wskaza\u0107 iw razie potrzeby skorygowa\u0107 za pomoc\u0105 test\u00f3w poszczeg\u00f3lnych modu\u0142\u00f3w.\n<\/p>\n
\n Jest to najlepsza opcja pod wzgl\u0119dem \u0142atwo\u015bci u\u017cytkowania dla projektant\u00f3w stron internetowych, poniewa\u017c za pomoc\u0105 CSS 3 mog\u0105 \u0142atwo dostosowa\u0107 dowoln\u0105 witryn\u0119 do r\u00f3\u017cnych kana\u0142\u00f3w i urz\u0105dze\u0144 elektronicznych. Dzi\u0119ki niemu mo\u017cesz sprawi\u0107, by Twoje strony internetowe by\u0142y przyjazne dla urz\u0105dze\u0144 mobilnych, kt\u00f3re b\u0119d\u0105 \u0142atwo dost\u0119pne i czytelne.\n<\/p>\n
\n Ludzie mog\u0105 nad nim pracowa\u0107 szybciej ni\u017c nad jego poprzedni\u0105 wersj\u0105. Sk\u0142ada si\u0119 z opcji, kt\u00f3ra nie wymaga kombinowania JavaScript i CSS i oszcz\u0119dza nam du\u017co czasu na produkcji, \u0142adowaniu i ko\u0144czeniu pracy nad produktem. Czas realizacji jest r\u00f3wnie\u017c kr\u00f3tszy ze wzgl\u0119du na jego elastyczno\u015b\u0107. Ta elastyczno\u015b\u0107 jest osi\u0105gana dzi\u0119ki modu\u0142om.\n<\/p>\n
\n Witryny zbudowane za pomoc\u0105 CSS 3 \u0142aduj\u0105 si\u0119 szybciej i zajmuj\u0105 wy\u017csz\u0105 pozycj\u0119 w rankingu ni\u017c witryny zbudowane za pomoc\u0105 CSS.\n<\/p>\n
\n Ka\u017cdy u\u017cytkownik r\u00f3\u017cni si\u0119 od innych u\u017cytkownik\u00f3w, wi\u0119c ma inne mo\u017cliwo\u015bci wyboru; istnieje wiele przegl\u0105darek dost\u0119pnych dla u\u017cytkownik\u00f3w do wyboru, wi\u0119c ka\u017cdy u\u017cytkownik korzysta z innej przegl\u0105darki. Dla tw\u00f3rc\u00f3w oprogramowania du\u017cym wyzwaniem jest tworzenie oprogramowania dzia\u0142aj\u0105cego w ka\u017cdej przegl\u0105darce.\n<\/p>\n
\n Programista CSS upewni\u0142 si\u0119, \u017ce zbudowa\u0142 CSS 3 kompatybilny z wieloma przegl\u0105darkami, wszystkie poprzednie wersje CSS nie by\u0142y kompatybilne ze wszystkimi przegl\u0105darkami. Wiele przegl\u0105darek obs\u0142uguje jej nowe wersje, mimo \u017ce nie spe\u0142nia ona standard\u00f3w W3C.\n<\/p>\n
\n Dla bezproblemowego procesu projektowania projektanci mog\u0105 skorzysta\u0107 z generatora CSS 3, kt\u00f3ry u\u0142atwia prac\u0119 klientom. Jest to rodzaj oprogramowania, kt\u00f3re daje swobod\u0119 i jest kompatybilne z wieloma przegl\u0105darkami internetowymi.\n<\/p>\n
\n Za pomoc\u0105 CSS 3 mo\u017cemy \u0142atwiej zrobi\u0107 t\u0142o stron internetowych ni\u017c w jego poprzedniej wersji. Wszystko to odb\u0119dzie si\u0119 za pomoc\u0105 skrypt\u00f3w i program\u00f3w.\n<\/p>\n
\n Teraz dzi\u0119ki niemu nie musisz tworzy\u0107 wielu te\u0142 dla r\u00f3\u017cnych sytuacji, w przeciwnym razie by\u0142oby to troch\u0119 k\u0142opotliwe, a przy tak wielu rozmiarach ekranu, kszta\u0142tach i rozdzielczo\u015bciach by\u0142oby to trudne.\n<\/p>\n
\n Dzi\u0119ki opcjom dost\u0119pnym w CSS 3 mo\u017cesz zrobi\u0107 wiele rzeczy, za jego pomoc\u0105 mo\u017cesz ustawi\u0107 obraz jako obramowanie, musisz przej\u015b\u0107 do w\u0142a\u015bciwo\u015bci border-image, gdzie b\u0119dziesz m\u00f3g\u0142 u\u017cy\u0107 swojego obrazu jako obramowania. Mo\u017cesz podzieli\u0107 swoje obrazy na dziewi\u0119\u0107 cz\u0119\u015bci.\n<\/p>\n
\n Oferuje wiele efekt\u00f3w tekstowych, z kt\u00f3rych mo\u017cesz wybra\u0107 efekt tekstowy pasuj\u0105cy do Twojej witryny, a dzi\u0119ki efektowi cienia mo\u017cesz ulepszy\u0107 projekt swojej witryny i ma now\u0105 funkcj\u0119 znan\u0105 jako narz\u0119dzie transgraniczne. Te rzeczy by\u0142y trudne w poprzednich wersjach CSS.\n<\/p>\n
\n Dzi\u0119ki modu\u0142owi wielokolumnowemu mo\u017cesz sprawi\u0107, by Twoja tre\u015b\u0107 internetowa przep\u0142ywa\u0142a w kolumnach; ta opcja zaoszcz\u0119dzi Tw\u00f3j czas, poniewa\u017c dzi\u0119ki niej nie musisz du\u017co przewija\u0107 w kierunku poziomym lub pionowym.\n<\/p>\n
\n Ludzie nie wiedz\u0105, jak du\u017cy wp\u0142yw maj\u0105 obrazy i animacje wraz z uk\u0142adem strony na przyci\u0105gni\u0119cie czytelnik\u00f3w i zatrzymanie ich na Twojej stronie, powinni to wiedzie\u0107. Wcze\u015bniej opcji dodawania i edytowania obraz\u00f3w wraz z animacjami by\u0142o mniej, wi\u0119c do dodawania tych rzeczy CSS potrzebowa\u0142 pomocy JavaScript. W CSS 3 problem ten zosta\u0142 nie tylko rozwi\u0105zany, ale r\u00f3wnie\u017c znacz\u0105co poprawiony.\n<\/p>\n
\n Ma nawet filtr obrazu, kt\u00f3ry nie by\u0142 wcze\u015bniej dost\u0119pny i wymaga\u0142 do tego JavaScriptu.\n<\/p>\n
\n Przej\u015bcia CSS3 s\u0142u\u017c\u0105 do wprowadzania zmian na wy\u015bwietlaczu, a dzi\u0119ki niemu mo\u017cna zmienia\u0107 r\u00f3\u017cne w\u0142a\u015bciwo\u015bci CSS, takie jak kolor t\u0142a, szeroko\u015b\u0107, d\u0142ugo\u015b\u0107, krycie i inne za pomoc\u0105 efekt\u00f3w przej\u015b\u0107. Daje ci mo\u017cliwo\u015b\u0107 zmiany w\u0142a\u015bciwo\u015bci zezwolenia w warto\u015bciach CSS, takich jak te, kt\u00f3re maj\u0105 si\u0119 wydarzy\u0107 w warto\u015bciach w\u0142a\u015bciwo\u015bci \n Wersja CSS 3 do testowania funkcji jest znacznie lepsza ni\u017c jej poprzednie wersje, a powodem jest struktura modu\u0142owa. Ta nowa wersja CSS jest znacznie szybsza i wydajniejsza w znajdowaniu b\u0142\u0119d\u00f3w na stronie internetowej, wi\u0119c zajmuje mniej czasu na testowanie. Testowanie projektu strony internetowej w poprzednich wersjach CSS zaj\u0119\u0142o du\u017co czasu, poniewa\u017c znalezienie rzeczywistego problemu by\u0142o bardzo trudne .\n<\/p>\n \n W CSS 3 istnieje mo\u017cliwo\u015b\u0107 przetestowania poszczeg\u00f3lnych modu\u0142\u00f3w i po\u0142\u0105czenia ich z ca\u0142ym systemem; zaletami by\u0142by lepszy system, \u0142atwa naprawa i kr\u00f3tszy czas realizacji.\n<\/p>\n \n Ta opcja s\u0142u\u017cy do tworzenia uk\u0142ad\u00f3w stron i zawiera wiele opcji. Jest to system dwuwymiarowy, wi\u0119c mo\u017ce obs\u0142ugiwa\u0107 zar\u00f3wno kolumny, jak i wiersze, dlatego jest uwa\u017cany za najpot\u0119\u017cniejsz\u0105 cech\u0119 CSS 3.\n<\/p>\n \n Aby wykona\u0107 prost\u0105 matematyk\u0119 w celu podstawienia ka\u017cdej cyfry lub liczby, u\u017cywamy Calc() w CSS3, jest to niezwykle skuteczne narz\u0119dzie obliczeniowe. Do obliczania funkcji matematycznych nie potrzebujemy jej preprocesor\u00f3w; mo\u017cemy wykonywa\u0107 funkcje matematyczne, takie jak dodawanie, odejmowanie, mno\u017cenie i dzielenie. Zalet\u0105 CSS jest to, \u017ce mo\u017cemy uzyska\u0107 odpowied\u017a jednostek mieszanych, podczas gdy na preprocesorze byli\u015bmy w stanie obliczy\u0107 jednostki mieszane tylko wtedy, gdy mia\u0142y one ustalone relacje mi\u0119dzy nimi.\n<\/p>\n \n Jest to najnowszy dodatek do CSS 3, kt\u00f3ry zosta\u0142 dodany w celu dostosowania uk\u0142adu strony do r\u00f3\u017cnych rozmiar\u00f3w ekranu i gad\u017cet\u00f3w wy\u015bwietlania. Dobr\u0105 rzecz\u0105 jest to, \u017ce nie u\u017cywa p\u0142ywak\u00f3w, a jego margines kontenera nie kruszy si\u0119 wraz z marginesem jego informacji. U\u017cytkownicy uwa\u017caj\u0105 to za \u0142atwiejsze ni\u017c pude\u0142ko, dlatego CSS 3 jest popularny w\u015br\u00f3d u\u017cytkownik\u00f3w. Kolejn\u0105 rzecz\u0105, kt\u00f3ra podoba si\u0119 ludziom, jest to, \u017ce elastyczne pude\u0142ko jest czystsze i proste w u\u017cyciu.\n<\/p>\n \n Chocia\u017c transformacja 3D nie jest popularn\u0105 funkcj\u0105 CSS 3, nadal jest bardzo u\u017cyteczn\u0105 i atrakcyjn\u0105 funkcj\u0105, je\u015bli jest odpowiednio wykonana. Dzi\u0119ki tej funkcji mo\u017cemy wykona\u0107 modu\u0142 3D, kt\u00f3ry mo\u017cna wykorzysta\u0107 na stronach internetowych; jest to opcja transformacji 2D z osi\u0105 Z. Translate3d, Scale3d, Rotate X, Rotate Y i Rotate Z to jego g\u0142\u00f3wne w\u0142a\u015bciwo\u015bci.\n<\/p>\n \n Zesp\u00f3\u0142 programist\u00f3w WebKit CSS 3 przedstawi\u0142 koncepcj\u0119 transformacji 3D, kt\u00f3ra zosta\u0142a wykorzystana rok p\u00f3\u017aniej w Safari i Chrome, od tego czasu przesz\u0142a d\u0142ug\u0105 drog\u0119 i sta\u0142a si\u0119 powszechna dla projektant\u00f3w stron internetowych. Za jego pomoc\u0105 mo\u017cemy obraca\u0107 niekt\u00f3re elementy na stronie internetowej i tworzy\u0107 obracaj\u0105ce si\u0119 obrazy karuzelowe, wszystkie te opcje s\u0105 ca\u0142kiem dobre dla tego oprogramowania.\n<\/p>\n \n Chocia\u017c nie jest to nowa opcja, nadal jest jedn\u0105 z najlepszych funkcji CSS 3 i jest niezb\u0119dna do zaprojektowania strony internetowej. Nie tak dawno temu tworzyli\u015bmy osobne strony internetowe dla urz\u0105dze\u0144 mobilnych i komputer\u00f3w stacjonarnych, ale teraz zbudowali\u015bmy jedn\u0105 witryn\u0119 zoptymalizowan\u0105 zar\u00f3wno pod k\u0105tem urz\u0105dze\u0144 mobilnych, jak i komputer\u00f3w stacjonarnych. Strony te dostosowuj\u0105 si\u0119 do r\u00f3\u017cnych rozmiar\u00f3w i urz\u0105dze\u0144.\n<\/p>\n \n Je\u015bli kto\u015b tak my\u015bli, by\u0142oby to trudne, to b\u0119dzie zszokowany wiedz\u0105c, \u017ce korzystanie z tej funkcji jest bardzo \u0142atwe. Aby skorzysta\u0107 z tej opcji, wystarczy umie\u015bci\u0107 style CSS w bloku zabezpieczonym rozszerzeniem \n CSS 3 jest najpopularniejszym oprogramowaniem s\u0142u\u017c\u0105cym do projektowania stron internetowych, dzi\u0119ki wielu opcjom mo\u017cesz zaprojektowa\u0107 stron\u0119 internetow\u0105 szybciej, poniewa\u017c wymaga mniej kodowania, mo\u017cesz z niego korzysta\u0107 z \u0142atwo\u015bci\u0105 i poprawia szybko\u015b\u0107 stron internetowych, je\u015bli jest zaprojektowany z tym.\n<\/p>\n \n Najwa\u017cniejsze jest to, \u017ce ma opcj\u0119 podzielenia modu\u0142u na wiele r\u00f3\u017cnych ma\u0142ych cz\u0119\u015bci; ta opcja u\u0142atwia obs\u0142ug\u0119. Dzi\u0119ki transformacji 3D mo\u017cesz doda\u0107 opcj\u0119 3D na swojej stronie internetowej, za pomoc\u0105 Flexbox mo\u017cemy stworzy\u0107 uk\u0142ad strony zoptymalizowany pod k\u0105tem ka\u017cdego rozmiaru ekranu i urz\u0105dzenia. Ka\u017cdy projektant stron internetowych, kt\u00f3ry chce korzysta\u0107 z CSS 3, powinien zna\u0107 te funkcje.\n<\/p>\n<\/p>\n:hover<\/code>lub :focus<\/code>w okre\u015blonym czasie. Musisz ustawi\u0107 dwie rzeczy, aby jak najlepiej wykorzysta\u0107 efekt przej\u015bcia.\n<\/p>\n\n
\n 9 Testowanie funkcji
\n<\/h5>\n\n 10 Uk\u0142ad siatki
\n<\/h5>\n\n
grid-template-columns<\/code>i grid-template-rows<\/code>jest znany jako siatka jawna, a je\u015bli zdefiniowane siatki s\u0105 mniejsze ni\u017c rzeczywiste siatki, to te dodatkowe siatki nazywane s\u0105 siatk\u0105 niejawn\u0105, ta niejawna siatka jest generowana automatycznie.\n <\/li>\n\n 11 Oblicz()
\n<\/h5>\n\n 12 Pude\u0142ko elastyczne
\n<\/h5>\n\n 13 Transformacja 3D
\n<\/h5>\n\n 14 Zapytania o media
\n<\/h5>\ncode>@media rule<\/code>. Gdy spe\u0142niony jest jeden lub wi\u0119cej ni\u017c jeden warunek code>@media rule<\/code>, aktywowany jest ka\u017cdy blok.\n<\/p>\n\n Wniosek
\n<\/h4>\n