Shape-inside hack

Developer
Una Kravets
Size
3,170 Kb
Views
44,528
  1. Shape-inside hack Previews
  2. Shape-inside hack HTML Codes
  3. Shape-inside hack CSS Codes
  4. Shape-inside hack JS Codes

How do I make an shape-inside hack?

What is a shape-inside hack? How do you make a shape-inside hack? This script and codes were developed by Una Kravets on 05 August 2022, Friday.

Shape-inside hack Previews
IQ Test

Shape-inside hack - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>shape-inside hack</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="text-section"> <div class="wrap-before"></div> <div class="wrap-after"></div> <h1>Hello Beautiful.</h1> <p> The initial draft of the CSS Shapes specification included a shape-inside property which allowed you to wrap content inside of a shape. There were even implementations in Chrome and Webkit for a while. But wrapping arbitrarily-positioned content inside a custom path requires much more effort and research to cover all possible scenarios and avoid bugs. That's why the shape-inside property has been deferred to CSS Shapes 2 and implementations were withdrawn.</p>
</div>
<button>Toggle Border</button>
<a href="http://www.html5rocks.com/en/tutorials/shapes/getting-started/">Learn more About CSS Shapes</a> <script src="js/index.js"></script>
</body>
</html>

Shape-inside hack - Script Codes CSS Codes

.text-section { width: 400px; height: 400px; margin: 0 auto;
}
p,
h1 { font-family: 'Open Sans Condensed', serif; text-align: justify;
}
.wrap-before { -webkit-shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0); shape-outside: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0); float: left; width: 50%; height: 100%;
}
.border-on .wrap-before { -webkit-transition-duration: .5s; transition-duration: .5s; background-color: hotpink; -webkit-clip-path: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0); clip-path: polygon(0 0, 0 100%, 100% 100%, 0 50%, 100% 0);
}
.wrap-after { -webkit-shape-outside: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0); shape-outside: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0); float: right; width: 50%; height: 100%;
}
.border-on .wrap-after { -webkit-transition-duration: .5s; transition-duration: .5s; background-color: hotpink; -webkit-clip-path: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0); clip-path: polygon(100% 0, 100% 100%, 0% 100%, 100% 50%, 0% 0);
}
button { margin: 4em auto; display: block; outline: 2px solid hotpink; box-shadow: none; padding: 1em 1.2em; background: white; border: none; color: dimgrey; cursor: pointer;
}
a { font-family: 'Open Sans Condensed', serif; text-align: center; display: block; color: grey; -webkit-transition-duration: .5s; transition-duration: .5s;
}
a:hover { color: hotpink;
}

Shape-inside hack - Script Codes JS Codes

 WebFontConfig = { google: { families: [ 'Open+Sans+Condensed:300:latin' ] } }; (function() { var wf = document.createElement('script'); wf.src = ('https:' == document.location.protocol ? 'https' : 'http') + '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js'; wf.type = 'text/javascript'; wf.async = 'true'; var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(wf, s); })();
var myBtn = document.querySelector('button');
var textArea = document.querySelector('.text-section');
myBtn.addEventListener('click', function(){ if (textArea.classList.contains('border-on')) {	textArea.classList.remove('border-on');	}	else {	textArea.classList.add('border-on');	}
})
Shape-inside hack - Script Codes
Shape-inside hack - Script Codes
Home Page Home
Developer Una Kravets
Username una
Uploaded August 05, 2022
Rating 4
Size 3,170 Kb
Views 44,528
Do you need developer help for Shape-inside hack?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Una Kravets (una) Script Codes
Name
Selective Coloring with CSS
CSS Custom Properties on Elements
Infrared Mixin SVG test
CSS Parrot
Accidental cool effect 2
The Power of CSS Talk
Animated Menu
Pastel Flowers Weekend Love
WORK IT
Infrared Mixin
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!