Illustrator – Masks
Table of Contents
LINKS
LINKS
CTRL + 7 // Create Mask
Shift + D + D // Mask Mode
Design
MtG – Mana SVG’s
Table of Contents
Free Magic the Gathering Mana IMAGES in a Vector format
Mana SVG Graphics from the Cardgame “Magic the Gathering” for free use for you to download.
Showcase
CSS – Links to love
Table of Contents
Source
- https://neumorphism.io/
- https://shadows.brumm.af/
- https://bennettfeely.com/clippy/
- https://9elements.github.io/fancy-border-radius/
- https://cubic-bezier.com/
- https://cssgradient.io/
- https://getwaves.io/
- https://www.softr.io/tools/svg-wave-generator
- https://svgwave.in/
- https://cssgrid-generator.netlify.app/
- https://grid.layoutit.com/
- https://loading.io/
- https://www.flaticon.com/
- https://icons8.com/
Emoncms – Free Icons
Table of Contents
Download here you Emoncms Icons
Impression
PNG Icons v1.0
SVG Icons v1.1
Source Files v1.1
Use Icons local
// save files in
/var/www/emoncms/img
//And get them with
localhost/img/Grid.svg
// If this not work use the IP address!
http://192.168.1.210/img/Grid.svg
Links for direct use
https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg
https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg
https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg
https://4wobi.com/wp-content/uploads/2021/11/Battery-1.svg
https://4wobi.com/wp-content/uploads/2021/11/Grid.svg
https://4wobi.com/wp-content/uploads/2021/11/Meter.svg
https://4wobi.com/wp-content/uploads/2021/11/Plug.svg
https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg
https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg
// Example for import in emoncms dashboard
<img decoding="async" alt="ArrowLeftRight" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" alt="ArrowLeftRight"></noscript>
<img decoding="async" alt="ArrowUpDown.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Up_Down.svg" alt="ArrowUpDown.svg"></noscript>
<img decoding="async" alt="ArrowDown.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/ArrowDown.svg" alt="ArrowDown.svg"></noscript>
<img decoding="async" alt="ArrowLeft.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/ArrowLeft.svg" alt="ArrowLeft.svg"></noscript>
<img decoding="async" alt="ArrowRight.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/ArrowRight.svg" alt="ArrowRight.svg"></noscript>
<img decoding="async" alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" alt="ArrowUp.svg"></noscript></noscript>
<img decoding="async" alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" alt="ArrowUp.svg" data-src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/ArrowUp.svg" alt="ArrowUp.svg"></noscript></noscript>
<img decoding="async" alt="Battery-1" data-src="https://4wobi.com/wp-content/uploads/2021/11/Battery.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Battery.svg" alt="Battery-1"></noscript>
<img decoding="async" alt="Grid" data-src="https://4wobi.com/wp-content/uploads/2021/11/Grid.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Grid.svg" alt="Grid"></noscript>
<img decoding="async" alt="Meter" data-src="https://4wobi.com/wp-content/uploads/2021/11/Meter.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Meter.svg" alt="Meter"></noscript>
<img decoding="async" alt="Plug" data-src="https://4wobi.com/wp-content/uploads/2021/11/Plug.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Plug.svg" alt="Plug"></noscript>
<img decoding="async" alt="Solarpanel" data-src="https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Solarpanel.svg" alt="Solarpanel"></noscript>
<img decoding="async" alt="Inverter" data-src="https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Inverter-1.svg" alt="Inverter"></noscript>
// with style
<img decoding="async" alt="ArrowLeftRight" style="width:500px;height:500px;" data-src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" class="lazyload" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="><noscript><img decoding="async" src="https://4wobi.com/wp-content/uploads/2021/11/Arrow_Left_Right.svg" alt="ArrowLeftRight" style="width:500px;height:500px;"></noscript>
Idea behind the icons
thresholds
place thresholds
change threshold value & colors
arangement, change grid size if you have problems
Endelement
Add Image
EmoncCMS - Elements
For me the best elements by far are those following…
- Bar
- Feedvalue
- Threshold
- Button
- Led
Overall I don’t like the Emocms Dashboard / Editor, i think it’s big trash but we take what we get.
Add Image
Rotate Bar Element
Add Image
Hide Text
// change 000000 to 00000000
colour_label="00000000"
Design – Fonts
Table of Contents
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
CSS – vanilla-tilt.js
Table of Contents
Source
Code Snippet
CSS – Center Content
Table of Contents
Source
Starter Code
Center text
<div class="container">
<p>Hello, (centered) World!</p>
</div>
p {
text-align: center;
}
Center with margin
<div class="container">
<div class="child"></div>
</div>
.child {
...
margin: 0 auto;
}
Design – Avatars API
Table of Contents
Source
https://avatars.dicebear.com/api/bottts/test.svg
EAF
Design – CSS animation
Table of Contents
MtG – Lessons learnd
Table of Contents
Source
Lessons
Lesson #1: Fighting against human nature is a losing battle
Lesson#2: Aesthetics matter
Lesson #3: Resonance is important
Lesson#4: Make use of piggybacking
Lesson#5: Don’t confuse “interesting” with “fun”
Lesson #6: Understand what emotion your game is trying to evoke
Lesson #7: Allow the players the ability to make the game personal
Lesson #8: The details are where the players fall in love with your game
Lesson #9: Allow your players to have a sense of ownership
Lesson #10: Leave room for the player to explore
Lesson #11: If everyone likes your game, but no one loves it, it will fail
Lesson #12: Don’t design to prove you can do something
Lesson #13: Make the fun part also the correct strategy to win
Lesson #14: Don’t be afraid to be blunt
Lesson #15: Design the component for its intended audience
Lesson #16: Be more afraid of boring your players than challenging them
Lesson #17: You don’t have to change much to change everything
Lesson #18: Restrictions breed creativity
Lesson #19: Your audience is good at recognizing problems and bad at solving them
Lesson #20: All the lessons connect