Category Archives: Web 3.0

Creating a Cut Out Text Effect

Before we start, there’s a couple of small caveats to this incredibly visually pleasing (and simple) CSS trick, but don’t let that put you off!

First of all, there’s only two colours that this trick correctly works with – white on black, and black on white. The second of these caveats is browser support, it’s not available on all browsers, but it’s natural fallback is actually a perfectly suitable mid-ground. The blend mode stops working and you’re left with either black text on a white background, or white text on a black background, still completely legible and not out of the ordinary to see on the web. Check here to see where it will and won’t work – https://caniuse.com/#feat=css-mixblendmode.

Now, on to the trick itself…

This trick relies on mix-blend-mode. Simply put, the mix-blend-mode style describes how an element’s content should blend with the content of the element’s direct parent and the element’s background. There’s many different mix-blend-mode options, but the two we are using today will be ‘multiply’ and ‘screen’.

As I’m sure you’ll already know the majority of the CSS used to create this set up I won’t bloat out the examples with unnecessary code, but there’s a CodePen you can view which holds all of the CSS used https://codepen.io/TidyDesign.

We will start with black text on a white background. So create a h1 element and let’s give this a background colour of white, and a colour of black.

h1.cutout {
	background: white;
	color: black;
}


With this set up we can add the magic…

h1.cutout {
	background: white;
	color: black;
	mix-blend-mode: screen;
}

How simple is that, 3 lines of code and we’ve got a great cut out text effect!

Now, if you want to switch the colours to be white on black all we have to do is change these three styles. Swap over the colour and background values and change ‘mix-blend-mode: screen;’ to ‘mix-blend-mode: multiply;’.

That’s all, who doesn’t like effects this striking which are so easy to create! CSS is full of little secrets like this, try playing around with the colours and blend modes in the Pen to see what other things you can create…

https://codepen.io/TidyDesign/pen/aamweL/

Thank you for reading

Luke

Ethereum – Web3.0

The way we communicate, purchase goods, sell our goods, consume our entertainment and more has changed drastically over the last 20 years. With the creation of the Internet, everything changed, forever. We are now on the brink of a new change, a change that could potentially see more privacy, consolidation of power and with it new norms for how we handle day to day tasks.

Ethereum is a cryptocurrency, like BitCoin, but unlike BitCoin Ethereum offers a lot more potential. Ethereum is a net of computers, where each computer using Ethereum becomes part of this net. This is where the decentralised aspect comes from, with every computer running Ethereum being a node of the overall “super computer” an attack becomes a lot more complicated. If someone were to try to attack a current web2.0 application there would be one central hub for them to take down, making it an easier task over for it to be overcome by the attacker. If someone wanted to attack a decentralised application running on Ethereum there is no central point for them to attack, a full blown attack targeting multiple nodes would need an incredible amount of computational power. There are currently around 30,000 nodes and for a successful attack to take place you’d have to take over 51% of those to do any damage.

Security isn’t the only benefit of Ethereum and it’s net of nodes, currently if Facebook’s main servers were to go down every user would be unable to use Facebook until they fixed their issue. For an application based on Ethereum to go offline every node (computer running Ethereum) would have to go down, the chances of this are incredibly slim.

Ethereum as an application platform is way to remove the middle men from transactions, ultimately bringing around more peer to peer communication and trust. Right now, if I wanted to book a taxi using the Uber application all data would run through their server and they would have control over all of that information. Now if Uber were to have been built on Ethereum a “Smart Contract” would be written and deployed onto the blockchain, this Smart Contract would run all on Ethereum nodes, each node would contain the relevant data and a confirmation process would make sure all data was correctly stored before adding your transaction to the blockchain. This cuts out large 3rd party fees and the risk of their service going down when you need it.

Web 3.0 is made up from 3 technologies, Ethereum, Swarm and Whisper. The blockchain becomes your “sever backend”, a p2p backend. Swarm and Whisper are complementary technologies to Ethereum;

Ethereum (contracts): decentralised logic
Swarm: decentralised storage
Whisper: decentralised messaging

Together these technologies will work together to bring you web 3.0 and a complete change to the current ways of dealing with transactions.

Luke