{ "keys": ["ctrl+/"], "command": "toggle_comment", "args": { "block": false } },

Preferences->Key Bindings - Default

CSS 3

Efekt "wow", czyli CSS w akcji 

Różne efekty

• www.webdesignerdepot.com/2014/05/8-simple-css3-transitions-that-will-wow-your-users/
• http://kodcss.pl/kurs-css/wlasciwosci/przejscie/transition-property

Efekt "wow", czyli CSS w akcji 

• Zmiana kolorów i tempo następujących zmian
  • http://codepen.io/anon/pen/BNmazd
• Zaokrąglone rogi (border-radius)
  • http://border-radius.com/
• Cienie (box-shadow, text-shadow)
  • http://www.cssmatic.com/box-shadow
  • http://codepen.io/juanbrujo/pen/yGpAK
• Przezroczystość (opacity)
  • http://codepen.io/anon/pen/waPwPW

Efekt "wow", czyli CSS w akcji 

• Gradienty 
  • http://www.cssmatic.com/gradient-generator
• Filtry 
  • http://www.inserthtml.com/2012/06/css-filters/
• Skalowanie
  • http://codepen.io/anon/pen/oXovoO

Wzbogać stronę

Do naszego szablonu dodaj

• cień na pasek nawigacji
• przyklejony pasek nawigacji
• cień na tekst na bannerze pod nawigacją
• skalowanie ikonek social media po najechaniu
• zmianę opacity na 0.7 na hover zdjęć
• zmianę buttonu: z białego tła i czarnej ramki, na czarne tło, z uwzględnieniem 'transition ease out'
• zmianę odcienia różowych paneli (#f7d2d0) na hover

Layout

ćwiczenie 2

Udało Ci się zakodować bez problemów poprzedni layout?

Przed Tobą kolejne ćwiczenie!

https://goo.gl/Oimzrn

MATERIAŁY:

Dziękuję!

</codecarrots>