Formularze i CSS 3

CSS 3 dostarcza wiele nowości, które z pewnością ułatwią i przyspieszą pracę nad atrakcyjnymi wizualnie projektami. Mimo, że CSS 3 jest jeszcze w fazie implementacji przez wszystkich najważniejszych producentów przeglądarek, warto powoli zaznajamiać się z możliwościami tej technologii ;)

W nowej wersji CSS będziemy mogli w końcu dowolnie edytować wygląd pól typu radio i checkbox bez utycia JavaScriptu – tak na marginesie, nie rozumiem czemu dopiero teraz deweloperzy umożliwią to. Inną przydatną nowością jest pseudoklasa :focus.

Żeby nie było tylko teoretycznie zamieszczam kod przykładowego formularza kontaktowego z wykorzystaniem CSS 3:

…

Imię i nazwisko:

Adres e-mail:

Treść:

</p>
<div class="printfriendly pf-alignright"><a href="#" style="outline:none;" rel="nofollow" onclick="window.print(); return false;" class="noslimstat" title="Printer Friendly, PDF & Email"><img style="border:none;-webkit-box-shadow:none; box-shadow:none;" src="https://cdn.printfriendly.com/buttons/printfriendly-pdf-button-nobg.png" alt="Print Friendly, PDF & Email" /></a></div></div></div><footer class="entry-footer"><span class="blog-tags minor-meta"><strong>Tagi:</strong><span> <a href="https://lukasz-socha.pl/tag/css-3/" rel="tag">CSS 3</a>, <a href="https://lukasz-socha.pl/tag/dla-poczatkujacych/" rel="tag">dla początkujących</a>, <a href="https://lukasz-socha.pl/tag/formularze/" rel="tag">formularze</a></span></span><div class='av-share-box'><h5 class='av-share-link-description av-no-toc'>Doceń i poleć nas</h5><ul class='av-share-box-list noLightbox'><li class='av-share-link av-social-link-facebook' ><a target="_blank" aria-label="Udostępnij Facebook" href='https://www.facebook.com/sharer.php?u=https://lukasz-socha.pl/css/formularze-i-css-3/&t=Formularze%20i%20CSS%203' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Facebook'><span class='avia_hidden_link_text'>Udostępnij Facebook</span></a></li><li class='av-share-link av-social-link-twitter' ><a target="_blank" aria-label="Udostępnij Twitter" href='https://twitter.com/share?text=Formularze%20i%20CSS%203&url=https://lukasz-socha.pl/?p=1229' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Twitter'><span class='avia_hidden_link_text'>Udostępnij Twitter</span></a></li><li class='av-share-link av-social-link-gplus' ><a target="_blank" aria-label="Udostępnij na Google+" href='https://plus.google.com/share?url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij na Google+'><span class='avia_hidden_link_text'>Udostępnij na Google+</span></a></li><li class='av-share-link av-social-link-pinterest' ><a target="_blank" aria-label="Udostępnij Pinterest" href='https://pinterest.com/pin/create/button/?url=https%3A%2F%2Flukasz-socha.pl%2Fcss%2Fformularze-i-css-3%2F&description=Formularze%20i%20CSS%203&media=https%3A%2F%2Flukasz-socha.pl%2Fwp-content%2Fuploads%2F2014%2F03%2Fpost_ico2.png' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Pinterest'><span class='avia_hidden_link_text'>Udostępnij Pinterest</span></a></li><li class='av-share-link av-social-link-linkedin' ><a target="_blank" aria-label="Udostępnij Linkedin" href='https://linkedin.com/shareArticle?mini=true&title=Formularze%20i%20CSS%203&url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Linkedin'><span class='avia_hidden_link_text'>Udostępnij Linkedin</span></a></li><li class='av-share-link av-social-link-tumblr' ><a target="_blank" aria-label="Udostępnij Tumblr" href='https://www.tumblr.com/share/link?url=https%3A%2F%2Flukasz-socha.pl%2Fcss%2Fformularze-i-css-3%2F&name=Formularze%20i%20CSS%203&description=CSS%203%20dostarcza%20wiele%20nowo%C5%9Bci%2C%20kt%C3%B3re%20z%20pewno%C5%9Bci%C4%85%20u%C5%82atwi%C4%85%20i%20przyspiesz%C4%85%20prac%C4%99%20nad%20atrakcyjnymi%20wizualnie%20projektami.%20Mimo%2C%20%C5%BCe%20CSS%203%20jest%20jeszcze%20w%20fazie%20implementacji%20przez%20wszystkich%20najwa%C5%BCniejszych%20producent%C3%B3w%20przegl%C4%85darek%2C%20warto%20powoli%20zaznajamia%C4%87%20si%C4%99%20z%20mo%C5%BCliwo%C5%9Bciami%20tej%20technologii%20%3B%29%20W%20nowej%20wersji%20CSS%20b%C4%99dziemy%20mogli%20w%20ko%C5%84cu%20dowolnie%20edytowa%C4%87%20wygl%C4%85d%20p%C3%B3l%20typu%20radio%20i%20checkbox%20%5B%E2%80%A6%5D' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Tumblr'><span class='avia_hidden_link_text'>Udostępnij Tumblr</span></a></li><li class='av-share-link av-social-link-vk' ><a target="_blank" aria-label="Udostępnij Vk" href='https://vk.com/share.php?url=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Vk'><span class='avia_hidden_link_text'>Udostępnij Vk</span></a></li><li class='av-share-link av-social-link-reddit' ><a target="_blank" aria-label="Udostępnij Reddit" href='https://reddit.com/submit?url=https://lukasz-socha.pl/css/formularze-i-css-3/&title=Formularze%20i%20CSS%203' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Udostępnij Reddit'><span class='avia_hidden_link_text'>Udostępnij Reddit</span></a></li><li class='av-share-link av-social-link-mail' ><a  aria-label="Wyślij e-mail" href='mailto:?subject=Formularze%20i%20CSS%203&body=https://lukasz-socha.pl/css/formularze-i-css-3/' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello' title='' data-avia-related-tooltip='Wyślij e-mail'><span class='avia_hidden_link_text'>Wyślij e-mail</span></a></li></ul></div></footer><div class='post_delimiter'></div></div><div class='post_author_timeline'></div><span class='hidden'>
			<span class='av-structured-data'  itemprop="image" itemscope="itemscope" itemtype="https://schema.org/ImageObject"  itemprop='image'>
					   <span itemprop='url' >https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png</span>
					   <span itemprop='height' >82</span>
					   <span itemprop='width' >82</span>
				  </span><span class='av-structured-data'  itemprop="publisher" itemtype="https://schema.org/Organization" itemscope="itemscope" >
				<span itemprop='name'>Łukasz Socha</span>
				<span itemprop='logo' itemscope itemtype='https://schema.org/ImageObject'>
				   <span itemprop='url'>http://lukasz-socha.pl/wp-content/uploads/2014/03/logo.png</span>
				 </span>
			  </span><span class='av-structured-data'  itemprop="author" itemscope="itemscope" itemtype="https://schema.org/Person" ><span itemprop='name'>Łukasz Socha</span></span><span class='av-structured-data'  itemprop="datePublished" datetime="2012-09-01T21:32:38+02:00" >2012-09-01 21:32:38</span><span class='av-structured-data'  itemprop="dateModified" itemtype="https://schema.org/dateModified" >2015-03-22 09:09:52</span><span class='av-structured-data'  itemprop="mainEntityOfPage" itemtype="https://schema.org/mainEntityOfPage" ><span itemprop='name'>Formularze i CSS 3</span></span></span></article><div class='single-big'></div><div class ='related_posts clearfix av-related-style-tooltip'><h5 class='related_title'>Artykuły, które również mogą się Tobie spodobać</h5><div class='related_entries_container '><div class='av_one_eighth no_margin  alpha relThumb relThumb1 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/html/walidacja-checkboxow-a-html5/' class='relThumWrap noLightbox' title='Walidacja checkboxów a HTML5'>
	<span class='related_image_wrap' data-avia-related-tooltip="Walidacja checkboxów a HTML5"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico1" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Walidacja checkboxów a HTML5</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb2 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/html/niestandardowe-czcionki-zmora-web-developera/' class='relThumWrap noLightbox' title='Niestandardowe czcionki – zmora web developera'>
	<span class='related_image_wrap' data-avia-related-tooltip="Niestandardowe czcionki – zmora web developera"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico3" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Niestandardowe czcionki – zmora web developera</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb3 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/html/css-tips-3-sticky-footer/' class='relThumWrap noLightbox' title='CSS tips #3 – Sticky Footer'>
	<span class='related_image_wrap' data-avia-related-tooltip="CSS tips #3 – Sticky Footer"><img width="82" height="82" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico2" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2.png 82w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico2-36x36.png 36w" sizes="(max-width: 82px) 100vw, 82px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>CSS tips #3 – Sticky Footer</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb4 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/wyszukiwanie-za-pomoca-like-i-polskie-znaki-diakrytyczne/' class='relThumWrap noLightbox' title='Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne'>
	<span class='related_image_wrap' data-avia-related-tooltip="Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Wyszukiwanie za pomocą LIKE i polskie znaki diakrytyczne</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb5 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/integracja-serwisu-z-facebookiem/' class='relThumWrap noLightbox' title='Integracja serwisu z Facebookiem'>
	<span class='related_image_wrap' data-avia-related-tooltip="Integracja serwisu z Facebookiem"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Integracja serwisu z Facebookiem</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb6 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/php/automatyczne-ladowanie-plikow/' class='relThumWrap noLightbox' title='Automatyczne ładowanie plików'>
	<span class='related_image_wrap' data-avia-related-tooltip="Automatyczne ładowanie plików"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico4" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Automatyczne ładowanie plików</strong>	</a></div><div class='av_one_eighth no_margin   relThumb relThumb7 relThumbOdd post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/java-script-jquery/cross-domain-ajax-czyli-zapytania-ajax-na-inna-domene/' class='relThumWrap noLightbox' title='Cross domain AJAX, czyli zapytania AJAX na inną domenę'>
	<span class='related_image_wrap' data-avia-related-tooltip="Cross domain AJAX, czyli zapytania AJAX na inną domenę"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico1" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico1-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>Cross domain AJAX, czyli zapytania AJAX na inną domenę</strong>	</a></div><div class='av_one_eighth no_margin  omega relThumb relThumb8 relThumbEven post-format-standard related_column'>
	<a href='https://lukasz-socha.pl/html/tinymce-i-wklejanie-tekstu-z-edytora-tekstowego/' class='relThumWrap noLightbox' title='TinyMCE i wklejanie tekstu z edytora tekstowego'>
	<span class='related_image_wrap' data-avia-related-tooltip="TinyMCE i wklejanie tekstu z edytora tekstowego"><img width="81" height="81" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3.png" class="attachment-square size-square wp-post-image" alt="" title="post_ico3" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3.png 81w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico3-36x36.png 36w" sizes="(max-width: 81px) 100vw, 81px" />	<span class='related-format-icon '><span class='related-format-icon-inner' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span></span>	</span><strong class='av-related-title'>TinyMCE i wklejanie tekstu z edytora tekstowego</strong>	</a></div></div></div>
<div id="disqus_thread"></div>

</main>

<aside class='sidebar sidebar_right  smartphones_sidebar_active alpha units'  role="complementary" itemscope="itemscope" itemtype="https://schema.org/WPSideBar" ><div class='inner_sidebar extralight-border'><section id="text-10" class="widget clearfix widget_text"><h3 class="widgettitle">Mój najnowszy projekt</h3>			<div class="textwidget"><a href="https://mindercrm.com" target="_blabk" rel="noopener noreferrer"><img src="http://lukasz-socha.pl/wp-content/uploads/2017/09/mindercrm.jpg" alt="minderCRM"></a></div>
		<span class="seperator extralight-border"></span></section><section id="category-excluder" class="widget clearfix category_excluder_widget"><h3 class="widgettitle">Lista kategorii</h3><ul id="category_excluder_widget">	<li class="cat-item cat-item-10"><a href="https://lukasz-socha.pl/blog/algorytmy-i-struktury-danych/">Algorytmy i struktury danych</a>
</li>
	<li class="cat-item cat-item-34"><a href="https://lukasz-socha.pl/blog/css/">CSS</a>
</li>
	<li class="cat-item cat-item-25"><a href="https://lukasz-socha.pl/blog/html/">HTML</a>
</li>
	<li class="cat-item cat-item-1"><a href="https://lukasz-socha.pl/blog/inne/">Inne</a>
</li>
	<li class="cat-item cat-item-100"><a href="https://lukasz-socha.pl/blog/java-script-jquery/">Java Script / jQuery</a>
</li>
	<li class="cat-item cat-item-14"><a href="https://lukasz-socha.pl/blog/php/" title="Znajdziesz tutaj wpisy na temat programowania w PHP.">PHP</a>
<ul class='children'>
	<li class="cat-item cat-item-29"><a href="https://lukasz-socha.pl/blog/php/projektowanie/">projektowanie</a>
</li>
	<li class="cat-item cat-item-42"><a href="https://lukasz-socha.pl/blog/php/wzorce-projektowe/" title="Znajdziesz tutaj opisy oraz praktyczne przykłady wykorzystania różnych wzorców projektowych w programowaniu w PHP.">wzorce projektowe</a>
</li>
</ul>
</li>
	<li class="cat-item cat-item-99"><a href="https://lukasz-socha.pl/blog/wywiady/" title="Znajdziesz tutaj wywiady z ciekawymi ludźmi. Tematyka rozmów głównie związana z IT oraz efektywnym wykorzystaniem internetu.">Wywiady</a>
</li>
</ul><span class="seperator extralight-border"></span></section><section id="text-5" class="widget clearfix widget_text"><h3 class="widgettitle">Jakich wpisów szukasz?</h3>			<div class="textwidget"><ul>
<li><a href="http://lukasz-socha.pl/tag/dla-poczatkujacych/">Dla początkujących</a></li>
<li><a href="http://lukasz-socha.pl/tag/dla-srednio-zaawansowanych/">Dla średnio zaawansowanych</a></li>
</ul></div>
		<span class="seperator extralight-border"></span></section></div></aside>

</div>

</div>

<div class='flex_column av_one_third  first el_before_av_one_third'><section id="text-4" class="widget clearfix widget_text"><h3 class="widgettitle">Znajdziesz mnie na</h3>			<div class="textwidget"><a href="https://www.facebook.com/pages/Lukasz-Sochapl-blog-web-developera/206360412726280" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/fb2.png" /></a> <a href="https://twitter.com/lukaszsochapl" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/tw2.png" /></a> <a href="http://www.goldenline.pl/lukasz-socha9/" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/gl2.png" /></a> <a href="https://www.linkedin.com/in/łukasz-socha-30083841" rel="nofollow"><img alt="" src="http://lukasz-socha.pl/wp-content/uploads/2014/03/lin2.png" /></a><br>
<a href="http://www.bloglovin.com/blog/14147383/?claim=ymbyaxr2t4a">Follow my blog with Bloglovin</a></div>
		<span class="seperator extralight-border"></span></section></div><div class='flex_column av_one_third  el_after_av_one_third  el_before_av_one_third '><section id="nav_menu-3" class="widget clearfix widget_nav_menu"><h3 class="widgettitle">Z tego jestem dumny</h3><div class="menu-polecam-container"><ul id="menu-polecam" class="menu"><li id="menu-item-1921" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1921"><a href="http://racymind.pl">Racy Mind – projektowanie i tworzenie stron www</a></li>
<li id="menu-item-2537" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2537"><a href="http://wolny-strzelec.com">Wolny Strzelec</a></li>
<li id="menu-item-1633" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1633"><a href="http://kalkulator.racymind.pl">Kalkulator dla przedsiębiorcy</a></li>
<li id="menu-item-2268" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-2268"><a href="http://seo.racymind.pl/">E-book „O optymalizacji stron internetowych”</a></li>
<li id="menu-item-1920" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1920"><a href="http://lukasz-socha.pl/php/wzorce-projektowe-spis-tresci/">Wzorce projektowe</a></li>
<li id="menu-item-2476" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2476"><a href="https://lukasz-socha.pl/wspolpraca/">Współpraca z blogiem</a></li>
</ul></div><span class="seperator extralight-border"></span></section></div><div class='flex_column av_one_third  el_after_av_one_third  el_before_av_one_third '><style scoped type="text/css">.utcw-2jf46b8 {word-wrap:break-word}.utcw-2jf46b8 span,.utcw-2jf46b8 a{border-width:0px}.utcw-2jf46b8 span:hover,.utcw-2jf46b8 a:hover{border-width:0px}</style><section id="utcw-2" class="widget clearfix widget_utcw widget_tag_cloud"><h3 class="widgettitle">Na skróty</h3><div class="utcw-2jf46b8 tagcloud"><a class="tag-link-144 utcw-tag utcw-tag-seo" href="https://lukasz-socha.pl/tag/seo/" style="font-size:10.93023255814px" title="7 topics">seo</a> <a class="tag-link-179 utcw-tag utcw-tag-wzorce-projektowe" href="https://lukasz-socha.pl/tag/wzorce-projektowe/" style="font-size:16.976744186047px" title="20 topics">wzorce projektowe</a> <a class="tag-link-32 utcw-tag utcw-tag-wywiad" href="https://lukasz-socha.pl/tag/wywiad/" style="font-size:10px" title="5 topics">wywiad</a> <a class="tag-link-43 utcw-tag utcw-tag-model-view-controller" href="https://lukasz-socha.pl/tag/model-view-controller/" style="font-size:10.46511627907px" title="6 topics">Model-View-Controller</a> <a class="tag-link-103 utcw-tag utcw-tag-dla-srednio-zaawansowanych" href="https://lukasz-socha.pl/tag/dla-srednio-zaawansowanych/" style="font-size:30px" title="48 topics">dla średnio zaawansowanych</a> <a class="tag-link-102 utcw-tag utcw-tag-google-maps" href="https://lukasz-socha.pl/tag/google-maps/" style="font-size:10.46511627907px" title="6 topics">google maps</a> <a class="tag-link-160 utcw-tag utcw-tag-bezpieczenstwo" href="https://lukasz-socha.pl/tag/bezpieczenstwo/" style="font-size:11.395348837209px" title="8 topics">bezpieczeństwo</a> <a class="tag-link-159 utcw-tag utcw-tag-metody-atakow-hakerskich" href="https://lukasz-socha.pl/tag/metody-atakow-hakerskich/" style="font-size:10.93023255814px" title="7 topics">metody ataków hakerskich</a> <a class="tag-link-41 utcw-tag utcw-tag-mvc" href="https://lukasz-socha.pl/tag/mvc/" style="font-size:10.93023255814px" title="7 topics">MVC</a> <a class="tag-link-109 utcw-tag utcw-tag-dla-poczatkujacych" href="https://lukasz-socha.pl/tag/dla-poczatkujacych/" style="font-size:22.558139534884px" title="32 topics">dla początkujących</a></div><span class="seperator extralight-border"></span></section></div>

</div>

</div>

</div>

</footer>

</div>
		
		<a class='avia-post-nav avia-post-prev with-image' href='https://lukasz-socha.pl/inne/blogowanie-nowy-zawod-czy-ciagle-tylko-hobby/' >    <span class='label iconfont' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span>    <span class='entry-info-wrap'>        <span class='entry-info'>            <span class='entry-title'>Blogowanie – nowy zawód, czy ciągle tylko hobby?</span>            <span class='entry-image'><img width="80" height="80" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-80x80.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6-36x36.png 36w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico6.png 81w" sizes="(max-width: 80px) 100vw, 80px" /></span>        </span>    </span></a><a class='avia-post-nav avia-post-next with-image' href='https://lukasz-socha.pl/php/wzorce-projektowe-cz-11-observer/' >    <span class='label iconfont' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'></span>    <span class='entry-info-wrap'>        <span class='entry-info'>            <span class='entry-image'><img width="80" height="80" src="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png" class="attachment-thumbnail size-thumbnail wp-post-image" alt="" srcset="https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-80x80.png 80w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4-36x36.png 36w, https://lukasz-socha.pl/wp-content/uploads/2014/03/post_ico4.png 81w" sizes="(max-width: 80px) 100vw, 80px" /></span>            <span class='entry-title'>Wzorce projektowe, cz. 11 Observer</span>        </span>    </span></a></div>

<a href='#top' title='Scroll to top' id='scroll-top-link' aria-hidden='true' data-av_icon='' data-av_iconfont='entypo-fontello'><span class="avia_hidden_link_text">Scroll to top</span></a>

<div id="cookie-law-info-bar"><span>Strona korzysta z plików Cookies. Możesz określić warunki przechowywania lub dostępu do Cookies w Twojej przeglądarce. Więcej w <a href='http://lukasz-socha.pl/polityka-prywatnosci/' id="CONSTANT_OPEN_URL" target="_blank"  class="cli-plugin-main-link"  style="display:inline-block;" >Polityka prywatności</a>. <a role='button' tabindex='0' data-cli_action="accept" id="cookie_action_close_header"  class="medium cli-plugin-button cli-plugin-main-button cookie_action_close_header cli_action_button" style="display:inline-block; ">Akceptuję</a> </span></div><div id="cookie-law-info-again" style="display:none;"><span id="cookie_hdr_showagain">Polityka prywatności i cookies</span></div><div class="cli-modal" id="cliSettingsPopup" tabindex="-1" role="dialog" aria-labelledby="cliSettingsPopup" aria-hidden="true">
  <div class="cli-modal-dialog" role="document">
    <div class="cli-modal-content cli-bar-popup">
      <button type="button" class="cli-modal-close" id="cliModalClose">
        <svg class="" viewBox="0 0 24 24"><path d="M19 6.41l-1.41-1.41-5.59 5.59-5.59-5.59-1.41 1.41 5.59 5.59-5.59 5.59 1.41 1.41 5.59-5.59 5.59 5.59 1.41-1.41-5.59-5.59z"></path><path d="M0 0h24v24h-24z" fill="none"></path></svg>
        <span class="wt-cli-sr-only">Close</span>
      </button>
      <div class="cli-modal-body">
        <div class="cli-container-fluid cli-tab-container">
    <div class="cli-row">
        <div class="cli-col-12 cli-align-items-stretch cli-px-0">
            <div class="cli-privacy-overview">
                                                   
                <div class="cli-privacy-content">
                    <div class="cli-privacy-content-text"></div>
                </div>
                <a class="cli-privacy-readmore" data-readmore-text="Show more" data-readless-text="Show less"></a>            </div>
        </div>  
        <div class="cli-col-12 cli-align-items-stretch cli-px-0 cli-tab-section-container">
              
                            <div class="cli-tab-section">
                    <div class="cli-tab-header">
                        <a role="button" tabindex="0" class="cli-nav-link cli-settings-mobile" data-target="necessary" data-toggle="cli-toggle-tab" >
                            Necessary 
                        </a>
                    
                    <span class="cli-necessary-caption">Always Enabled</span>                     </div>
                    <div class="cli-tab-content">
                        <div class="cli-tab-pane cli-fade" data-id="necessary">
                            <p></p>
                        </div>
                    </div>
                </div>
              
                       
        </div>
    </div> 
</div> 
      </div>
    </div>
  </div>
</div>
<div class="cli-modal-backdrop cli-fade cli-settings-overlay"></div>
<div class="cli-modal-backdrop cli-fade cli-popupbar-overlay"></div>
<script type="text/javascript">
  /* <![CDATA[ */
  cli_cookiebar_settings='{"animate_speed_hide":"500","animate_speed_show":"500","background":"#fff","border":"#444","border_on":false,"button_1_button_colour":"#c93129","button_1_button_hover":"#a12721","button_1_link_colour":"#fff","button_1_as_button":true,"button_1_new_win":false,"button_2_button_colour":"#333","button_2_button_hover":"#292929","button_2_link_colour":"#444","button_2_as_button":false,"button_2_hidebar":false,"button_3_button_colour":"#000","button_3_button_hover":"#000000","button_3_link_colour":"#fff","button_3_as_button":true,"button_3_new_win":false,"button_4_button_colour":"#000","button_4_button_hover":"#000000","button_4_link_colour":"#62a329","button_4_as_button":false,"font_family":"inherit","header_fix":false,"notify_animate_hide":true,"notify_animate_show":false,"notify_div_id":"#cookie-law-info-bar","notify_position_horizontal":"left","notify_position_vertical":"bottom","scroll_close":false,"scroll_close_reload":false,"accept_close_reload":false,"reject_close_reload":false,"showagain_tab":true,"showagain_background":"#fff","showagain_border":"#000","showagain_div_id":"#cookie-law-info-again","showagain_x_position":"100px","text":"#000","show_once_yn":false,"show_once":"10000","logging_on":false,"as_popup":false,"popup_overlay":true,"bar_heading_text":"","cookie_bar_as":"banner","popup_showagain_position":"bottom-right","widget_position":"left"}';
  /* ]]> */
</script>        <script type="text/javascript">
            (function(){
                document.addEventListener('DOMContentLoaded', function(){
                    let wpp_widgets = document.querySelectorAll('.popular-posts-sr');

if ( wpp_widgets ) {
                        for (let i = 0; i < wpp_widgets.length; i++) {
                            let wpp_widget = wpp_widgets[i];
                            WordPressPopularPosts.theme(wpp_widget);
                        }
                    }
                });
            })();
        </script>
                <script>
            var WPPImageObserver = null;

function wpp_load_img(img) {
                if ( ! 'imgSrc' in img.dataset || ! img.dataset.imgSrc )
                    return;

img.src = img.dataset.imgSrc;

if ( 'imgSrcset' in img.dataset ) {
                    img.srcset = img.dataset.imgSrcset;
                    img.removeAttribute('data-img-srcset');
                }

img.classList.remove('wpp-lazyload');
                img.removeAttribute('data-img-src');
                img.classList.add('wpp-lazyloaded');
            }

function wpp_observe_imgs(){
                let wpp_images = document.querySelectorAll('img.wpp-lazyload'),
                    wpp_widgets = document.querySelectorAll('.popular-posts-sr');

if ( wpp_images.length || wpp_widgets.length ) {
                    if ( 'IntersectionObserver' in window ) {
                        WPPImageObserver = new IntersectionObserver(function(entries, observer) {
                            entries.forEach(function(entry) {
                                if (entry.isIntersecting) {
                                    let img = entry.target;
                                    wpp_load_img(img);
                                    WPPImageObserver.unobserve(img);
                                }
                            });
                        });

if ( wpp_images.length ) {
                            wpp_images.forEach(function(image) {
                                WPPImageObserver.observe(image);
                            });
                        }

if ( wpp_widgets.length ) {
                            for (var i = 0; i < wpp_widgets.length; i++) {
                                let wpp_widget_images = wpp_widgets[i].querySelectorAll('img.wpp-lazyload');

if ( ! wpp_widget_images.length && wpp_widgets[i].shadowRoot ) {
                                    wpp_widget_images = wpp_widgets[i].shadowRoot.querySelectorAll('img.wpp-lazyload');
                                }

if ( wpp_widget_images.length ) {
                                    wpp_widget_images.forEach(function(image) {
                                        WPPImageObserver.observe(image);
                                    });
                                }
                            }
                        }
                    } /** Fallback for older browsers */
                    else {
                        if ( wpp_images.length ) {
                            for (var i = 0; i < wpp_images.length; i++) {
                                wpp_load_img(wpp_images[i]);
                                wpp_images[i].classList.remove('wpp-lazyloaded');
                            }
                        }

if ( wpp_widgets.length ) {
                            for (var j = 0; j < wpp_widgets.length; j++) {
                                let wpp_widget = wpp_widgets[j],
                                    wpp_widget_images = wpp_widget.querySelectorAll('img.wpp-lazyload');

if ( ! wpp_widget_images.length && wpp_widget.shadowRoot ) {
                                    wpp_widget_images = wpp_widget.shadowRoot.querySelectorAll('img.wpp-lazyload');
                                }

if ( wpp_widget_images.length ) {
                                    for (var k = 0; k < wpp_widget_images.length; k++) {
                                        wpp_load_img(wpp_widget_images[k]);
                                        wpp_widget_images[k].classList.remove('wpp-lazyloaded');
                                    }
                                }
                            }
                        }
                    }
                }
            }

document.addEventListener('DOMContentLoaded', function() {
                wpp_observe_imgs();

// When an ajaxified WPP widget loads,
                // Lazy load its images
                document.addEventListener('wpp-onload', function(){
                    wpp_observe_imgs();
                });
            });
        </script>
        
 <script type='text/javascript'>
 /* <![CDATA[ */  
var avia_framework_globals = avia_framework_globals || {};
    avia_framework_globals.frameworkUrl = 'https://lukasz-socha.pl/wp-content/themes/enfold/framework/';
    avia_framework_globals.installedAt = 'https://lukasz-socha.pl/wp-content/themes/enfold/';
    avia_framework_globals.ajaxurl = 'https://lukasz-socha.pl/wp-admin/admin-ajax.php';
/* ]]> */ 
</script>
 
       <script type="text/javascript">

ga('create', 'UA-22759499-1', 'lukasz-socha.pl');
ga('send', 'pageview', {
 'page': location.pathname + location.search  + location.hash
});

</script></body>
</html>