Blog Archives: css3
css transforms ja webkit translate 3d
Täiendus: Kuidas teha, et menüüpunkti alla tuleks animeeritud joon hover puhul. Kood on siin: a { text-decoration: none; display: inline-block; } a:after { content: ''; display: block; border-bottom: 1px solid blue; width: 0; -webkit-transition: 0.5s ease; transition: 0.5s ease; } a:hover:after { width: 100%; } <a href="#">Longer Link</a><br> <a href="#">Link</a> Õpetus on siin: http://jsfiddle.net/46a8u/27/ Siin […]
Read more »Siin on ülevaade css 3 fluid design kohta, teise nimega responsive design. Samuti ka media queries ja seadme laius jne. http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
Read more »Panen siia aja jooksul kirja mõningaid lihtsaid tõdesid. Kui on vaja teha kolmnurkset sikksakk alumist äärt, siis kood on siin: #branding{ box-sizing: border-box; background-clip: padding-box; border-bottom: 10px solid transparent; z-index: 2; -webkit-filter: drop-shadow(rgba(0, 0, 0, 0.55) 0px 1px 2px); } #branding:after { content: ''; position: absolute; display: block; width: 100%; height: 10px; bottom: -10px; left: […]
Read more »Üks tore koht, kus saab genereerida ja vaadata css3 võimalusi: http://css3generator.com/
Read more »