Site Build Cribbage Sheet –

svg additions

 preserveAspectRatio="xMidYMid meet"

SVG to HEX Filter Creator

Posted: February 23, 2023

https://codepen.io/sosuke/pen/Pjoqqp

SVG | In Illustrator *

Posted: February 4, 2023

https://helpx.adobe.com/illustrator/using/svg.html   Learn about working with SVG to use XML and JavaScript to create web graphics that respond to user actions with sophisticated effects such as highlighting, tool tips, audio, and animation. About

Trigger SVG Animation | when scrolls into viewport *

Posted: November 26, 2022

https://stackoverflow.com/questions/46969358/how-to-start-an-animated-svg-on-entering-viewport Trigger an animation when the SVG scrolls into view   To trigger an animation when the SVG scrolls into view, there are two steps you need to resolve: detect when the SVG

Tutorials | svg – jquery – oath 2.0 *

Posted: November 17, 2022

Svg tutorials https://jenkov.com/tutorials/svg/index.html   SVG Tutorial SVG Examples Simple SVG Example Displaying SVG in Web Browsers SVG Icons SVG Coordinate System SVG svg element SVG g element SVG rect element SVG circle element

Lottie Animations | How To

Posted: September 16, 2022

//devhints.io | Cheatsheets *

Posted: December 10, 2021

Pixel Art | In Illustrator

Posted: November 18, 2021

SVG | ani / smrt filters / MORE!

Posted: October 12, 2021

https://www.cssvg.co/App/ SVG Animator ` https://freefrontend.com/css-text-effects/ https://freefrontend.com/javascript-text-effects/

Icons | sets / management / editing *

Posted: October 11, 2021

Icons – managing / creating nucleoapp.com | in use https://nucleoapp.com/support https://icomoon.io/ https://geticonjar.com/ https://iconset.io/ https://iconset.io/   Inspiration Icon Sets https://fonts.google.com/icons https://www.androidcentral.com/best-icon-packs-android https://iconset.io/icons https://www.flaticon.com/uicons/interface-icons https://clickety-clack.click/uniconscdn-usage/ | https://clickety-clack.click/uniconsset1/       APIs / Guides – how

color

Posted: October 9, 2021

#aaff66 rgba(163, 255, 102,1)   #333333 #66ff00 rgba(163, 255, 102,1)   #4d4d4d #ffcc00 rgba(255,204,0,1)   #797979 #ff6600 rgba(255,102,0,1)   #9e9e9e #ff0066 rgba(255,0,102,1)   #c5c5c5 #6600ff #6600ff | rgba(102,0,255,1)   #dddddd #0066ff #0066ff |

speed up tricks

• Customizer – set all fonts to default / inherit
• Elementor – set all fonts to default / inhertit – they both seem to load googole fonts on their own

  Perf matters – set: disable google fonts

html notes + css

https://code.visualstudio.com/docs/introvideos/basics

https://code.visualstudio.com/learn/

https://www.freecodecamp.org/learn/responsive-web-design/basic-html-and-html5/

https://www.w3schools.com/html/html5_semantic_elements.asp

https://gist.github.com/thomd/9220049

http://shawneee.shawneee.com/html-templates/index.html
– update these to html5 semantics

CSS Almanac

CSS Almanac

A reference guide to the many features of CSS.

http://paletton.com/#uid=1000u0kllllaFw0g0qFqFg0w0aF

specifity calculator
https://specificity.keegan.st/

Cascade and inheritance
https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance

Selector Reference
https://www.w3schools.com/cssref/css_selectors.asp