Home
CSS Quizzes
CSS Generators
CSS Tip
Login / Register

Sliding World

July 16, 2020 By Cyr Gri

Grid options: No Grid 2x2 4x4 8x8

Ready to submit your solution? Click here

0 Comments

Hello World
CSS Animations

Share

First Time Here? Click to read the tutorial or you will get lost!

Challenge Rules

No HTML: You are not allowed to edit the HTML.
No SVG: Embedded SVGs are not allowed via the url() tag inside background-image.
No JavaScript: Don’t try to add any scripts! It won’t work.
No Image: I think this one is trivial. Don’t take a screenshot of the solution and use it! In all the cases, any url() within the CSS code will get removed.
Check the existing solutions before submitting. We accept only unique solutions so be the first to solve the challenges!

Default HTML & CSS

<html>
	<body>
		<div class="box"></div>
	</body>
</html>

.box {
	width:280px;
	height:280px;
	display:flex;
	align-items:center;
	justify-content:center;
	font-family: "Inconsolata", monospace;
	font-size: 28px;
	border:1px solid #c39f76;
	box-sizing:border-box;
}

Useful Information

The font used is a Google font that can be found here. It’s a monospace font and 1ch is equal to half the font-size. In our case, 1ch = 14px.
Use the grid options for a better comparison in order to get a perfect result.
The pixel-matching algorithm is based on pixelmatch. The implementation isn’t optimal and is actively updated. Feel free to report any incoherent result.
The code length is calculated after minifying the code.

CSS Websites you might like

CSS Generators
CSS Articles
CSS Patterns
CSS Loaders
CSS Shape
CSS Tip
CSS Arts
CSS Games

© 2018 - 2024 Created by Temani Afif
Terms of Use / Privacy Policy / Submit your challenge

Login

Please wait ...

Reset Password

Please wait ...

Register

Please wait ...

By clicking Register you agree with the Terms of Use