RP Resources

Codes + Layouts + Tutorials + More

×

Community Rules

This comm is open to anyone to post codes, layouts, resources, tutorials, and requests for help and content. Of course, we do have some rules, so please read through them before jumping in; thank you!

■ Treat others the way you'd like to be treated. This is not a drama comm, and we expect you guys to be awesome and stay civil. If a situation gets out of hand, please contact a mod, and leave comments intact so we can accurately handle the situation.

■ Please tag your posts and check out the tagging guide if you have any questions!

■ Very long posts or posts formatted with your own div styling for organization should be behind a cut to save people's f-lists.

■ Work safe above the cut, please!

■ If posting codes, guides, etc. absolutely do not post content that you did not make. That's stealing, and it's super uncool, bro! If you are posting expanded/edited codes made by yourself using another user's coding as well, please be sure you have their permission (You do not need direct permission if they allow edits to be re-posted in their blanket rules.)

■ Do not post tutorials/links to tutorials that show people how to steal codes from other users. Again: Stealing. Not cool.

■ When asking for help with something, please check the help tags (help: coding, help: graphics, help: icons, help: layouts, help: other) first to see if your question has already been posted and answered to avoid duplicates.

■ We do not allow game ads to be posted on this comm since there are so many communities specifically for that already; if you're pimping a game as an addition to a regular post, that's fine. (OK: You post an RP code and mention in the post, oh hey, also I'm running this game! NOT OK: Posts dedicated to game promo.)

■ We do allow other types of community promos if they are related to RP (icon comms, other types of resource comms, etc.) Just shoot us a comment in our dropbox beforehand and we'll let you know if it's cool to post!

×

Tagging Guide

zzz

×

Banners & Buttons

×

Search by Tag

Layout By

Layout by Tessisamess

Previous | Next

transilience

rpresources

transilience

rpresources

May. 27th, 2018

misc: superduper

transilience

rpresources

transilience

rpresources

So this is really silly, but I wanted to experiment with clip paths, and I'm having a spot of MCU nostalgia at the moment. Hence, a bunch of superhero emblem CSS codes, in... case you need that sort of thing?

<div style="background: teal; width: 100px; height: 100px; display: flex; justify-content: center; align-items: center; margin:auto; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%);">
	<div style="background: cyan radial-gradient(ellipse at center, cyan 50%, teal 100%);  width: 90%; height: 90%; display: flex; justify-content: center; align-items: center; margin:auto;clip-path: circle(50% at 50% 50%);">
		<div style="background: teal; width: 100%; height: 100%; -webkit-clip-path: polygon(50% 90%, 5% 20%, 95% 20%); clip-path: polygon(50% 100%, 5% 25%, 95% 25%); display: flex; justify-content: center; align-items: center; margin:auto;"> 
			<div style="background: cyan; width: 80%; height: 80%; -webkit-clip-path: polygon(50% 90%, 5% 6%, 95% 6%); clip-path: polygon(50% 100%, 5% 25%, 95% 25%); display: flex; justify-content: center; align-items: center; margin:auto;">
				<div style="background: teal; width: 70%; height: 70%; -webkit-clip-path: polygon(50% 0%, 0 80%, 100% 80%); clip-path: polygon(50% 100%, 5% 25%, 95% 25%); display: flex; justify-content: center; align-items: center; margin:auto;">
					<div style="background: cyan; width: 70%; height: 70%; -webkit-clip-path: polygon(50% 0%, 0 80%, 100% 80%); clip-path: polygon(50% 100%, 5% 25%, 95% 25%); display: flex; justify-content: center; align-items: center; margin:auto;">   </div>
				</div>
			</div> 
		</div>
	</div>
</div>

<div style="background: red; width: 100px; height: 100px; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); display: flex; justify-content: center; align-items: center; margin:auto;">
	<div style="background: white; width: 88%; height: 88%; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); display: flex; justify-content: center; align-items: center;">
		<div style="background: red; width: 88%; height: 88%; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); display: flex; justify-content: center; align-items: center;">
				<div style="background: blue; width: 80%; height: 80%; -webkit-clip-path: circle(50% at 50% 50%); clip-path: circle(50% at 50% 50%); display: flex; justify-content: center; align-items: center;">
					<div style="background: white; width: 85%; height: 85%; -webkit-clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);">   </div>
				</div>
		</div>
	</div>
</div>

notes

you can change 100px to whatever size you want and the design will scale accordingly!

Tags: code: other, maker: transilience

Comments

yeti

May. 27th, 2018 05:51 pm (UTC)

this isn't silly, this is cool. and mcu is in every panfandom game right now, i'm sure someone will find use of these!

transilience

May. 28th, 2018 11:24 pm (UTC)

I hope so!

tessisamess

May. 28th, 2018 09:37 pm (UTC)

YOOOO this is great! ♥ I love that you went a route that makes these easily scaled to any size!

transilience

May. 28th, 2018 11:26 pm (UTC)

thanks! I managed to confuse myself a few times while I was switching over from px. "OH MY GOD WHAT DID I oh right."

shinealight

Jun. 10th, 2018 02:33 pm (UTC)

I have no idea when/how I'm going to use these, but they're amazing. Great job!