GitHub - docode-ru/html-css-javascript-bookmarks: Bookmarks for useful HTML CSS and JavaScript Resources [EN/RU]

CSS

Bookmarks for useful CSS resources.

Список ссылко на полезные ресурсы посвещенные CSS

Список шрифтов, по умолчанию установленных в операционных системах OS X и Windows, включая процентное соотношение использования шрифтов для каждого из них.

http://www.cssfontstack.com/

http://caniuse.com/#search=woff2

Free fonts (Бесплатные шрифты)

https://www.theleagueofmoveabletype.com/

http://exljbris.com/

https://fontlibrary.org/

https://www.fontsquirrel.com/

https://fonts.google.com/

tinyurl.com/oaclzaq http://hellohappy.org/beautiful-web-type/

tinyurl.com/ng39zb9 http://pixelgene.ru/category/fonts

WebFont Generator

https://www.fontsquirrel.com/tools/webfont-generator

https://onlinefontconverter.com

https://transfonter.org

Colors

http://www.colourlovers.com/

http://paletton.com/

http://tinyurl.com/kqdborf

http://tinyurl.com/m4jb9e5 colour names

http://tinyurl.com/kqdborf

http://lokeshdhakar.com/projects/color-thief/

http://colorscheme.ru/

http://www.colr.org/

http://www.coolwebmasters.com/color-schemes/441-20-color-combination-tools.html

http://www.colorcombos.com/index.html

http://flatuicolors.com/

http://colours.neilorangepeel.com/

https://www.sessions.edu/color-calculator/

Browser usage

http://gs.statcounter.com/#browser_version_partially_combined-ww-monthly-201411-201511

Shadows

https://webexpedition18.com/articles/css3-text-shadow-property/

Lists

https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type

http://blog.teamtreehouse.com/customize-ordered-lists-pseudo-element

centering css

https://css-tricks.com/centering-css-complete-guide/

http://csszengarden.com/

SVG

https://css-tricks.com/mega-list-svg-information/

Blend Mode

https://sarasoueidan.com/blog/compositing-and-blending-in-css/

https://www.youtube.com/watch?v=Bnl1CJV17q4 <— photoshop

http://css.yoksel.ru/background-blend-mode/

Image stock

http://foter.com

https://unsplash.com/

http://ru.freeimages.com/

http://openphoto.net/

https://search.creativecommons.org/

http://flickr.com/creativecommons

Icons Stock

http://www.flaticon.com/

Img patterns

http://www.colourlovers.com/patterns

http://bgpatterns.com/

http://www.stripegenerator.com/

http://patterncooler.com/

Gradients

http://www.cssmatic.com/gradient-generator

http://lea.verou.me/css3patterns/#

http://www.standardista.com/cssgradients/

http://www.standardista.com/CSS3gradients/flags.html

http://bennettfeely.com/gradients/

http://bennettfeely.com/scales/

http://html5book.ru/krasivye-gradienty/

https://philiprogers.com/svgpatterns/

Box-Sizing

http://simonenko.su/32197993404/use-css3-box-sizing

https://htmlacademy.ru/courses/44/run/15

Best Practice

http://yellowshoe.com.au/standards/

Bootstrap

http://bootsnipp.com/snippets/featured/mobile-nav-bar

Buttons

http://www.bestcssbuttongenerator.com/

https://www.freshdesignweb.com/css3-buttons/

http://tympanus.net/codrops/2012/01/11/css-buttons-with-pseudo-elements/

Tachyons.io

http://tachyons.io

Effects

http://tympanus.net/codrops/category/playground/

Menus

http://blog.teamtreehouse.com/create-simple-css-dropdown-menu

http://red-team-design.com/css3-animated-dropdown-menu/

http://purecssmenu.com/

https://css-tricks.com/dropdown-menus-with-more-forgiving-mouse-movement-paths/

https://envato.com/blog/css-snippets-responsive-menus/

Progress bars

http://red-team-design.com/stylish-css3-progress-bars/

https://codepen.io/Thibaut/pen/ouKvy

Sprites

https://www.smashingmagazine.com/2009/04/the-mystery-of-css-sprites-techniques-tools-and-tutorials/

https://webdesign.tutsplus.com/articles/css-sprite-sheets-best-practices-tools-and-helpful-applications--webdesign-8340

http://spritepad.wearekiss.com/

http://www.spritecow.com/

Transform Animations

http://westciv.com/tools/transforms/index.html

https://dev.opera.com/articles/ru/understanding-the-css-transforms-matrix/ Matrix

https://www.smashingmagazine.com/2012/01/adventures-in-the-third-dimension-css-3-d-transforms/

https://desandro.github.io/3dtransforms/ *****

http://html5book.ru/3d-transform/

https://davidwalsh.name/css-flip

https://www.w3.org/TR/css3-transitions/#animatable-properties

http://www.the-art-of-web.com/css/timing-function/

https://daneden.github.io/animate.css/

https://matthewlein.com/ceaser/

https://css-tricks.com/controlling-css-animations-transitions-javascript/

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

http://www.html5rocks.com/en/tutorials/speed/high-performance-animations/ ******

http://www.hongkiat.com/blog/creative-css-animations/

FrontEnd

https://www.gitbook.com/book/frontendmasters/front-end-handbook/details

Css loading indicators

http://tympanus.net/codrops/2013/09/18/creative-loading-effects/

Forms

https://www.sanwebe.com/2014/08/css-html-forms-designs

CSS Layouts

https://abookapart.com/products/mobile-first

http://hugogiraudel.com/2013/04/04/css-grid-layout/

https://developer.yahoo.com/ypatterns/about/stencils/

http://blog.html.it/layoutgala/index.html

https://templated.co

https://templated.co/radius

http://www.pagecolumn.com

http://www.complexspiral.com/publications/containing-floats/

http://alistapart.com/article/responsive-web-design

http://callmenick.com/post/css-equal-height-columns-three-different-ways

Inputs

http://stackoverflow.com/questions/18859469/responsive-design-how-to-have-text-input-and-button-stay-100-width-of-parent

http://stackoverflow.com/questions/25518182/textarea-autoheight-css

Mulitcolumns

https://www.w3.org/TR/css3-multicol/

https://dev.opera.com/articles/css3-multi-column-layout/

http://aaronlumsden.com/multicol/

https://css-tricks.com/fluid-width-equal-height-columns/

https://webdesign.tutsplus.com/tutorials/quick-tip-solving-the-equal-height-column-conundrum--cms-20403

Tooltips

http://www.menucool.com/tooltip/css-tooltip

http://qtip2.com/demos

https://www.w3schools.com/css/css_tooltip.asp

PSD templates

https://dcrazed.com/free-photoshop-psd-website-templates/

https://www.behance.net/search?content=projects&sort=appreciations&time=week&search=free%20psd

Media Queries & Mobile

https://www.w3.org/TR/css3-mediaqueries/

http://responsivepx.com

https://www.browserstack.com

http://alistapart.com/article/responsive-images-in-practice

http://adaptive-images.com

http://thenewcode.com/649/Responsive-Design-Create-Fluid-YouTube-amp-Vimeo-Content

http://embedresponsively.com

Formules

goal / target = result перевод из пикселов ( 960, left 180, right 780 ) 180 / 960 * 100% = 18,75% 780 / 960 * 100% = 81,25% Ту же формулу можно применить для преобразования значений размеров из пикселов в единицы em. Предположим, что ширина текстового абзаца составляет 18 пикселов (цель). Исходный размер обычного текста (контекст) составляет 16 пикселов. При делении 18 на 16 получаем новый размер в единицах em: 1.125em.

Grids

http://getskeleton.com/

http://thisisdallas.github.io/Simple-Grid/

http://purecss.io

https://github.com/Bootflat

https://habrahabr.ru/post/156747/

https://css-tricks.com/dont-overthink-it-grids/

http://gridcalculator.dk

https://habrahabr.ru/company/edison/blog/344878/

Portfolio Ideas

http://www.lfdesign.com.au/#contact

Prefixes

https://github.com/postcss/autoprefixer

Modular CSS

https://www.smashingmagazine.com/2011/12/an-introduction-to-object-oriented-css-oocss/

https://github.com/stubbornella/oocss/wiki

https://habrahabr.ru/post/256109/

https://ru.bem.info/methodology/quick-start/

Flexbox

https://github.com/philipwalton/solved-by-flexbox

https://drafts.csswg.org/css-flexbox/

https://gyazo.com/a0074ff55393cebea07ff4d5bad90719

https://github.com/philipwalton/flexbugs

http://the-echoplex.net/flexyboxes/

https://css-tricks.com/snippets/css/a-guide-to-flexbox/

http://html5.by/blog/flexbox/

https://developer.mozilla.org/ru/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes

https://www.taniarascia.com/how-to-build-a-responsive-image-gallery-with-flexbox/

https://github.com/postcss/autoprefixer

https://css-tricks.com/snippets/css/a-guide-to-flexbox/#article-header-id-13

flex-grow - насколько элемент будет шире относительно других flex-shrink - насколько узкий по отношению к другим flex-basis - минимальную ширину flex-элемента.