{"id":257936,"date":"2022-12-20T14:02:00","date_gmt":"2022-12-20T11:02:00","guid":{"rendered":"https:\/\/inform.click\/7-niesamowitych-technik-css3-ktorych-powinienes-sprobowac\/"},"modified":"2022-12-20T14:29:00","modified_gmt":"2022-12-20T11:29:00","slug":"7-niesamowitych-technik-css3-ktorych-powinienes-sprobowac","status":"publish","type":"post","link":"https:\/\/inform.click\/pl\/7-niesamowitych-technik-css3-ktorych-powinienes-sprobowac\/","title":{"rendered":"7 niesamowitych technik CSS3, kt\u00f3rych powiniene\u015b spr\u00f3bowa\u0107"},"content":{"rendered":"

\n Ewolucja CSS (kaskadowych arkuszy styl\u00f3w) z HTML by\u0142a niesamowita. Ostatnio wprowadzono mn\u00f3stwo funkcji, takich jak Flexbox, CSS Grid i niestandardowe w\u0142a\u015bciwo\u015bci CSS.\n<\/p>\n

\n Jego ci\u0105g\u0142y rozw\u00f3j i ogromny potencja\u0142 s\u0105 tym, co zniewala programist\u00f3w do wypr\u00f3bowywania nowych technik CSS i przekraczania granic jego mo\u017cliwo\u015bci. Po\u0142\u0105czenie technologii HTML 5 i CSS3 to bez w\u0105tpienia zab\u00f3jca flasha.\n<\/p>\n

\n Nic dziwnego, \u017ce dobrze wykonany plan CSS mo\u017ce niemal kontrolowa\u0107 ka\u017cdy aspekt projektu i prowadzi\u0107 do lepszego do\u015bwiadczenia u\u017cytkownika, co jest bardzo potrzebne. W ko\u0144cu odwiedzaj\u0105cy maj\u0105 pewne oczekiwania, gdy przegl\u0105daj\u0105 Twoj\u0105 witryn\u0119 za pomoc\u0105 laptopa, komputera stacjonarnego, tabletu lub innego medium.\n<\/p>\n

\n Ale jakie s\u0105 popularne techniki CSS? Czy to nie oczywiste pytanie, kt\u00f3re przychodzi nam do g\u0142owy, gdy m\u00f3wimy o zaprojektowaniu atrakcyjnej, przyjaznej dla u\u017cytkownika strony internetowej.\n<\/p>\n

\n W\u0142a\u015bnie dlatego opracowali\u015bmy kilka \u015bwie\u017cych technik CSS i wskaz\u00f3wek, kt\u00f3re pozwol\u0105 opanowa\u0107 Twoje umiej\u0119tno\u015bci projektowania stron internetowych. Ka\u017cdy z nich zawiera wyja\u015bnienia i przyk\u0142adowe fragmenty kodu.\n<\/p>\n

\n Przejd\u017amy wi\u0119c od razu do rzeczy!\n<\/p>\n

\n 1 Wyr\u00f3wnaj w pionie z Flexbox
\n<\/h5>\n

\n Wcze\u015bniejsi programi\u015bci mieli wiele trudno\u015bci z wyr\u00f3wnaniem tekstu lub dowolnego innego elementu w pionie do \u015brodka. Ale teraz, po wprowadzeniu nowej specyfikacji CSS3 Flexbox<\/strong>, sprawy sta\u0142y si\u0119 znacznie \u0142atwiejsze.\n<\/p>\n

\n W\u0142a\u015bciwo\u015b\u0107 display: flex<\/strong> zapewnia u\u017cytkownikom \u0142atwy spos\u00f3b wyr\u00f3wnania dowolnego tekstu lub elementu na \u015brodku. Oto przyk\u0142adowy kod!\n<\/p>\n

\n HTML:<\/strong>\n<\/p>\n

\n Vertically centered!<\/code>\n<\/div>\n
 <\/pre>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.align-vertically {\n  background: #FFA500;\n  color: #hhh;\n  display: flex;\n  align-items: center;\n  height: 200px;\n}<\/code><\/code><\/pre>\n
\n  W powy\u017cszym kodzie CSS display: flex opisuje uk\u0142ad Flexbox dla elementu, natomiast align-items: center; odpowiada za pionowe wy\u015brodkowanie tekstu.\n<\/p>\n
\n  WYNIK:<\/strong>\n<\/p>\n
\n  2 Responsywna siatka CSS
\n<\/h5>\n
\n  Nie r\u00f3b z siatki wyj\u0105tku, spraw, aby by\u0142a r\u00f3wnie\u017c responsywna, jak wszystko inne w twoim projekcie.\n<\/p>\n
\n  Jest tak wiele sposob\u00f3w, dzi\u0119ki kt\u00f3rym mo\u017cesz sprawi\u0107, by Twoja siatka reagowa\u0142a za pomoc\u0105 CSS Grid. A najlepsze w jej u\u017cyciu jest to, \u017ce b\u0119dziesz w stanie stworzy\u0107 bardziej elastyczn\u0105 siatk\u0119, kt\u00f3ra zapewni po\u017c\u0105dany wygl\u0105d, bez wzgl\u0119du na rozmiar urz\u0105dzenia.\n<\/p>\n
\n  Opr\u00f3cz tego siatka CSS pozwala r\u00f3wnie\u017c pracowa\u0107 z nier\u00f3wnymi i r\u00f3wnymi rozmiarami kolumn. Jest to \u015bwietna technologia pe\u0142na opcji, kt\u00f3re daj\u0105 u\u017cytkownikom swobod\u0119 kontroli nad swoimi projektami.\n<\/p>\n
\n  Mo\u017cesz u\u017cy\u0107 r\u00f3\u017cnych punkt\u00f3w przerwania, wysoko\u015bci wielu wymiar\u00f3w i wykona\u0107 inne umiejscowienia, jak pokazano w poni\u017cszym przyk\u0142adzie.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n  \u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n
\u00a0\u00a0<\/code><\/p>\n
<\/div>\n<\/div>\n
\n  <strong>CSS:<\/strong><\/code>\n<\/p>\n
<code>.grid\n {\n  display: grid;\n  grid-template-rows: repeat(5, 1fr);\n  grid-auto-columns: calc((100vh - 3em) \/ 4);\n  grid-auto-flow: column;\n  grid-gap: 1em;\n  height: 100vh;\n}\n.grid-item:nth-child(3n)\n {\n  background-color: purple;\n}\n.grid-item:nth-child(3n + 2)\n{\n  background-color: pink;\n}<\/code><\/code><\/pre>\n
\n  Jednostka u\u0142amkowa (fr) u\u017cyta w powy\u017cszym kodzie CSS jest elastyczn\u0105 jednostk\u0105, kt\u00f3ra oddziela otwart\u0105 przestrze\u0144 zgodnie z Twoimi wytycznymi. Ka\u017cda instrukcja fr dotyczy kolumny, nast\u0119pnie mo\u017cesz doda\u0107 luki i przygotowa\u0107 siatk\u0119.\n<\/p>\n
\n  WYNIK:<\/strong>\n<\/p>\n
\"\"<\/a><\/p>\n
\n  3 animacje tekstu
\n<\/h5>\n
\n  By\u0107 mo\u017ce tworzy\u0142e\u015b animacje t\u0142a za pomoc\u0105 CSS, ale teraz wp\u0142ywa to r\u00f3wnie\u017c na interakcj\u0119 u\u017cytkownik\u00f3w i interakcj\u0119 z elementami tekstowymi witryny. Od regulacji najechania kursorem po s\u0142owa unosz\u0105ce si\u0119 w powietrzu, CCS3 umo\u017cliwi\u0142 to wszystko.\n<\/p>\n
\n  Witryny, kt\u00f3re nie maj\u0105 wielu zach\u0119caj\u0105cych element\u00f3w do zaanga\u017cowania u\u017cytkownik\u00f3w, mog\u0105 w pe\u0142ni wykorzysta\u0107 t\u0119 cech\u0119. Oto ma\u0142y przyk\u0142ad.\n<\/p>\n
\n  HTML:<\/strong>\n<\/p>\n
\n