SVG Essentials, O'Reilly book, link to examples
Книга
SVG Essentials
Год: 2015
Автор: J. David Eisenberg, Amelia Bellamy-Royds / Дж. Дэвид Эйсерберг, Амелия Беллами-Ройдс
Жанр: веб-графика
Издательство: O’Reilly
ISBN: 978-1449374358
Язык: Английский
Формат: ePub
Качество: Изначально компьютерное (eBook)
Интерактивное оглавление: Да
Количество страниц: 295
Описание: Описание формата SVG - масштабируемой векторной графики.
***
Примеры:
https://github.com/oreillymedia/svg-essentials-examples
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
Движется само!
Semantic UI
A framework. Bootstrap alternative. Probably better, than Bootstrap, more clean and laconic, but less popular.
A quotation taken from Quora
[https://www.quora.com/Semantic-UI-front-end-framework-Where-can-I-find-examples-of-websites-created-using-Semantic-UI]
««
Those in basics are literally simple examples.
Those in beyond basics are more complex examples,
some of which are pretty!
I personally use AngularJS so some examples here are particularly helpful.
Finally, Semantic UI's kitchen sink is a definite go-to for me:
http://semantic-ui.com/kitchen-sink.html
Basics
Tab: http://codepen.io/jwarnes/pen/BvbgF
Vertical menus on the left: http://codepen.io/mikeair/pen/MYKXPm
Cube rotation: http://codepen.io/Siyanda/pen/Xmmzbe
Nested accordeon menu: http://codepen.io/IronGeek/pen/vOejyr
Angular app to add tasks: http://codepen.io/icebob/pen/mdAFx
FAB: http://codepen.io/akranjec/pen/pvgXqV
Tabs displaying data: http://codepen.io/gabro27/pen/VLObPm
Cards with actions: http://codepen.io/chienleng/pen/gpdEGe
Semantic UI website clone: http://codepen.io/ayoungh/pen/YyKVLX
Beyond Basics:
Interactive agenda manager:
http://codepen.io/voltron2112/pen/pJXrzE
Combo dropdown: http://codepen.io/allanwhite/pen/xGMZrZ
Form for estimating water usage: http://codepen.io/jnmarcus/pen/VLOwdV
Angular wiki search: http://codepen.io/VanVlack/pen/bdYadm
Angular speech bubbles: http://codepen.io/jpidelatorre/pen/cEvLl
Angular cards: http://codepen.io/VanVlack/pen/YXrRzw
Payments page: http://codepen.io/danwolner/pen/OPJMGX
Dashboard: http://codepen.io/Jackrobscott/pen/zGMdVd
Project cards board: http://codepen.io/alexlusitania/pen/waJVLP
Twitch TV: http://codepen.io/anon/pen/QjKxaQ
A chuckle: http://codepen.io/rayrc/pen/mePJqp
My tests:
Context panel layout http://codepen.io/sean185/details/vNRpKd#stats
»»
Крупные сайты на "WordPress"
http://techcrunch.com/
- Хостинг на vip.wordpress.com .
- Flat design.
http://magazine.wsj.com/
http://online.wsj.com/public/page/magazine-index.html?mg=blogs-wsj
- Wall Street Journal
------------------------------------------------------------
See
http://vip.wordpress.com/clients/
http://www.nbcsports.com/snf-all-access-sunday-night-football
- крупный спортивный портал
http://piersmorgan.blogs.cnn.com/
- видеоблог на CNN, как часть CNN, с шапкой CNN.
http://news.blogs.cnn.com/
- новостная часть какая-то CNN, с шапкой CNN.
http://newyork.cbslocal.com/
- крупный развлекательно-новостной портал Нью-Йорка
http://washington.cbslocal.com/
- То же, Вашингтона, дизайн жуткий, но всего много.
http://ftw.usatoday.com/
- Часть "USA Today Sports", часть "USA Today"
http://www.metro.lu
- Metro International
http://observer.com/
- Дизайн слабенький, не портальный.
http://boyslife.org/
- Некрупный сайт, но интересный дизайн.
-------------------------------------------------------------
http://forumblog.org/
- World Economic Forum
- Немного простовато, но официоз. Вполне.
http://indianexpress.com/
http://indianexpress.com/business/ и проч.
- Новости, не масштабно, но, в целом, ничего.
Move sidebar to the left in Twenty Twelve, WP 3.5
http://wordpress.org/support/topic/move-main-sidebar-in-twen ty-twelve
Twenty Twelve, default theme in WP 3.5.
This code moves sidebar to the left.
Child theme CSS.
--
/*-- move sidebar to the left --*/
@media screen and (min-width: 600px) {
.site-content {
float: right;
}
.widget-area {
float: left;
}
}
/* for IE8 and IE7 ----------------*/
.ie .site-content {
float: right;
}
.ie .widget-area {
float: left;
}