Bootstrap snippets
http://vk.cc/520GR8
- как сделать зафиксированный фон, кот. работал бы на iOS.
Fixed backgrounds with background-size: cover in iOS with Bootstrap 3.
http://vk.cc/521Hr8
(http://codepen.io/j_holtslander/pen/eJwEMg)
- 'tasty box' landing page
http://codepen.io/j_holtslander/pen/BKaXWw
- SVG image going to navbar on scroll.
Using scrollr library.
http://codepen.io/j_holtslander/pen/mVZqmm
- centering.
A demo on horizontal and vertical centering.
The title appears with animation, from below, 'bounceUp'.
http://vk.cc/52qVof
[ http://codepen.io/j_holtslander/pen/GJwMEK ]
- multiple navbars in Bootstrap 3.
http://vk.cc/52syEO
http://codepen.io/j_holtslander/pen/waQQYm
- 'Fancy fixed Bootstrap navbar.'
A navbar that starts down low and becomes fixed-top.
- Doesn't work in iPad!
http://vk.cc/52qVQ3
[ http://codepen.io/j_holtslander/pen/MwdObK ]
- navbar under the heading in Bootstrap 3.
http://vk.cc/52qM6o
[ http://codepen.io/j_holtslander/pen/pgXrWj ]
- several navbars in Bootstrap 3.
http://vk.cc/52ivUq
[ http://codepen.io/j_holtslander/pen/Jdwjpj ]
- Заголовок уходит в navbar, меняющий цвет при прокручивании. Красиво!
- Doesn't work in iPad!
http://codepen.io/j_holtslander/pen/yeEZez
- Список. Слева - миниатюра, справа - описание. Реализация на Bootstrap.
http://codepen.io/j_holtslander/pen/ZGZwJz
- Bootstrap 3 bio thumbs with social overlay on hover
http://codepen.io/redfrost/pen/mzHjb
- Bootstrap 2 moving box carousel
Движется само!
Gradients
White -> down to transparency (till 65%), then transparent.
http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+65&1+0,0+65,0+65;Custom
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjY1JSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIwIi8+CiAgPC9saW5lYXJHcmFkaWVudD4KICA8cmVjdCB4PSIwIiB5PSIwIiB3aWR0aD0iMSIgaGVpZ2h0PSIxIiBmaWxsPSJ1cmwoI2dyYWQtdWNnZy1nZW5lcmF0ZWQpIiAvPgo8L3N2Zz4=);
background: -moz-linear-gradient(top, hsla(0,0%,100%,1) 0%, hsla(0,0%,100%,0) 65%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,hsla(0,0%,100%,1)), color-stop(65%,hsla(0,0%,100%,0))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, hsla(0,0%,100%,1) 0%,hsla(0,0%,100%,0) 65%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, hsla(0,0%,100%,1) 0%,hsla(0,0%,100%,0) 65%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, hsla(0,0%,100%,1) 0%,hsla(0,0%,100%,0) 65%); /* IE10+ */
background: linear-gradient(to bottom, hsla(0,0%,100%,1) 0%,hsla(0,0%,100%,0) 65%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 ); /* IE6-8 */
***