Shape Outside Practice


by Jeremy Caudle
notes

I was about to do some more random practice, but I realized I haven't played with shape-outside in a while. I first learned about it from a talk or video by Jen Simmons. I wish I had something I could put it to use on right now. Maybe I should make something.

Shape-outside Practice

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id egestas nulla, in pretium lorem. Morbi scelerisque diam nec elit molestie, pretium aliquam purus consectetur. Fusce laoreet, est at sollicitudin bibendum, lorem quam porttitor nunc, nec tempus tellus lectus vitae quam. Nulla facilisi. Proin et ante et odio interdum maximus. Vivamus eget malesuada lorem. Aenean eu tempor dui. Nulla tellus libero, aliquet at vehicula quis, eleifend eu est. Aliquam at convallis nisi, eget tempor felis. Nam suscipit, tortor in maximus bibendum, lectus nunc tempor nunc, et imperdiet lorem massa placerat augue. Aenean accumsan ornare leo eu consectetur. Nulla varius metus metus, vitae dignissim sem mollis eget.

Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lectus ex, blandit ac leo sit amet, ultrices laoreet nisi. Nam porta imperdiet tortor non pellentesque. Nam bibendum turpis at nisi malesuada, tincidunt condimentum augue semper. Curabitur posuere magna posuere nulla cursus faucibus. Suspendisse non dui non sem rutrum eleifend non eget nisi. Praesent aliquet ut dui non imperdiet.

View the code:

HTML and JS 
<div class="codedoodle-block">
        <h1>Shape-outside Practice</h1>
        <p><img src="https://jeremycaudle.com/floorshotJC.jpeg" height="130" width="130" class="polygon"/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer id egestas nulla, in pretium lorem. Morbi scelerisque diam nec elit molestie, pretium aliquam purus consectetur. Fusce laoreet, est at sollicitudin bibendum, lorem quam porttitor nunc, nec tempus tellus lectus vitae quam. Nulla facilisi. Proin et ante et odio interdum maximus. Vivamus eget malesuada lorem. Aenean eu tempor dui. Nulla tellus libero, aliquet at vehicula quis, eleifend eu est. Aliquam at convallis nisi, eget tempor felis. Nam suscipit, tortor in maximus bibendum, lectus nunc tempor nunc, et imperdiet lorem massa placerat augue. Aenean accumsan ornare leo eu consectetur. Nulla varius metus metus, vitae dignissim sem mollis eget.</p>    
        <p><img src="https://jeremycaudle.com/floorshotJC.jpeg" height="130" width="130" class="circle"/>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lectus ex, blandit ac leo sit amet, ultrices laoreet nisi. Nam porta imperdiet tortor non pellentesque. Nam bibendum turpis at nisi malesuada, tincidunt condimentum augue semper. Curabitur posuere magna posuere nulla cursus faucibus. Suspendisse non dui non sem rutrum eleifend non eget nisi. Praesent aliquet ut dui non imperdiet. </p>
    </div>
CSS 
/* Variables */

        :root {
            --bodybg: #99ff00;
            --main: #444444;
            --secondary: #33228f;
        }

        /* Code Block styles */

        div.codedoodle-block {
            background-color: var(--bodybg, #99ff00);
            margin: 3rem auto;
            padding: 1rem;
            width: auto;
            height: auto;
            border: solid 5px transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .screen-reader-text {
            color: transparent;
            position: absolute;
            top: 0;
            left: -10000px;
        }

        .codedoodle-block h1 {
            text-transform: uppercase;
            font-size: 3em;
            margin: 0 0 1rem 0;
        }

        .codedoodle-block p {
            max-width: 60em;
        }

        .codedoodle-block p img.circle{
            float: right;
            shape-outside: circle();
            border-radius: 50%;
            margin-left: 1rem;
        }

        .codedoodle-block p img.polygon{
            float: left;
            shape-outside: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
            border-radius: 50%;
            margin-right: 1rem;
            clip-path: polygon(50% 0%, 90% 20%, 100% 60%, 75% 100%, 25% 100%, 0% 60%, 10% 20%);
        }

        @keyframes float {
            from {transform: translateY(-10px);}
            to {transform: translateY(10px);}
        }

        @supports (display:grid) {

            .codedoodle-block {
                display: grid;
                grid-template-columns: repeat(3, 1fr);
                grid-template-rows: auto 1fr 1fr;
            }

            .codedoodle-block h1 {
                writing-mode: sideways-lr;
                grid-column: 1 / 2;
                grid-row: 1 / 4;
            }

 .codedoodle-block p:first-of-type {
                grid-row: 2 / 3;
                grid-column: 2 / 3;
            }

            .codedoodle-block p:last-of-type {
                grid-row: 3 / 4;
                grid-column: 2 / 4;
            }

            
            @media (max-width: 778px) {
                
                .codedoodle-block {
                display: grid;
                grid-template-rows: minmax(3em, 12em) auto minmax(100px, 1fr) minmax(100px, 1fr);
                }
								.codedoodle-block h1 {
								writing-mode: horizontal-tb;
								grid-row: 1 / 2;
								grid-column: 1 / 2;
								}
                .codedoodle-block p:first-of-type {
								grid-row: 2 / 3;
								grid-column: 1 / 2;
								}
								.codedoodle-block p:last-of-type {
								grid-row: 3 / 4;
								grid-column: 1 / 2;
								}

            }
        }

Tags