I (think) I can get this border effect with CSS but I'm uncertain how

And before I upload it may I ask: what exactly is UX -and- why isn’t there a sticky explaining what it is and why it’s in the Design subforum? I’m going to take what I realize is a huge leap of faith but here it goes: I presume it has no relationship to uranium? Not an airline? Thank you and we’ll now return you to your regularly scheduled CSS subforum on the planet Earth.


I want a few variations of the style of border you see in the graphic below but I’m having a devil of a time locating it. I either get clipart or photos of copper pipe. I even excluded the usual suspects (ridge, groove, inset, dotted etc.) So thank you for any help.

Gee. I guess it would help if I posted the link lol.
https://community.coreldraw.com/cfs-file/__key/communityserver-discussions-components-files/811/Pipe-frame.png

Hi there semicolon,

check out the attachment, which contains a basic
working example, with the use of your image. :sunglasses:

semicolon.zip (11.7 KB)

coothead

5 Likes

Not quite what you want, but fairly close. I haven’t figured out how to offset the highlight quite as dimensionally as your graphic, yet :thinking:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>pipe-border-w/hilite</title>
<!--
https://www.sitepoint.com/community/t/i-think-i-can-get-this-border-effect-with-css-but-im-uncertain-how/251742/3
semicolon
Jan 29,2017 6:19 PM
-->
    <style type="text/css">
body {background-color:#bbb;}
.piper {
    display:table;
    width:500px;
    border-spacing:20px 20px;
    background-color:#fff;
    box-shadow:0 0 7px 4px #e5231c inset;
    border-radius:30px;
    margin:0 auto;
}
.pipin {
    display:table-cell;
    box-shadow:0 0 7px 4px #e5231c;
    border-radius:10px;
    padding:0 1em;
    overflow:hidden;
}
    </style>
</head>
<body>

<div class="piper">
    <div class="pipin">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.</p>
    </div>
</div>

</body>
</html>

EDIT:

User eXperience… which focuses on the interface and flow of content as the user might use it.

3 Likes

coothead please disregard my initial reply. It looks greatI What threw me is the presence of a/(my?) graphic. Could you please explain the relationship the graphic has to your index.html? Thanks.


coothead, I’m trying to draw (variations of) this pipe border -or- frame in CSS. I know how to display images and I thank you for the effort. Unless . . . did I miss something?

RP you blow my mind. I’ll reply in greater detail once I pick my jaw up from the floor. Wow.

Okay I’m just so impressed with both of you. Now I’m not going to ask for a complete tutorial in this thread but I would appreciate it if you (or anyone) could just summarize the concepts of this pipe border so I can experiment with rendering the pipe in various thicknesses:

really small, small, demi-medium, medium, large, X-Large, XX-Large etc.

Using coothead’s border-image method it is possible to set the border-width at any size you want or use relative or dynamic units to allow the width to scale in a responsive page.
I have an example here, study the code and see if you can make sense of it.

My original offering was a fairly quick hack based on the notion that you did not want to use a background image. Upon re-reading your post, you didn’t actually say that. Instead I just “read” what I thought you said and acted on that. (I seem to do that occasionally nowadays.)

So now I am going to post two files.

The first is a revision of my post in which I have changed the px units to ems which makes it easily resizable. (It was a “first” so I’m trying to salvage some worth out of it.) Apply a font-size to the outer element, .piper, to change the size of the border; then assign another size on the <p> element to reduce/increase the size of any text that may be included. That seems easy enough. It’s limited to this design, though.

The second file is a version based on @coothead’s and @SamA74’s border-image posts. Even though I have not used border-image often enough to have memorized the properties and values, I love border-image, so I borrowed their examples and worked up a version. It was a good exercise.

I revised the border image so it has an alpha background (transparent), increased the size of the corner and edge segments from 29px to 35px, and finally, taking a lesson from Sam, applied a different background color just to shown that it could be done (or it could be a background image with text over it). Really versatile and doesn’t bloat the HTML. If you can get past the learning curve of the border-image properties, this is the way to go.

First, my revision using ems.

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>pipe-border-w/hilite-em</title>
<!--
https://www.sitepoint.com/community/t/i-think-i-can-get-this-border-effect-with-css-but-im-uncertain-how/251742/3
semicolon
Jan 29,2017 6:19 PM
-->
    <style type="text/css">
body {
    background-color:#eee;
}
.piper {
    display:table;
    width:60%;
    border-spacing:1.25em 1.25em;
    background-color:#fff;
    box-shadow:0 0 .4375em .25em #e5231c inset;
    border-radius:1.875em;
    margin:0 auto;
}
.pipin {
    display:table-cell;
    background-color:#bdf;
    box-shadow:0 0 .4375em .25em #e5231c;
    border-radius:.625em;
    padding:0 1em;
    overflow:hidden;
}
p {
    line-height:1.5;
}
    </style>
</head>
<body>

<div class="piper">
    <div class="pipin">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.</p>
    </div>
</div>

</body>
</html>

 
And finally my version using border-image.

This is the border-image: pipe-frame-sm.png

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>pipe border w/border-img</title>
    <style>
body {
    background-color:#f0f0f0;
    font:1em/1.62em verdana, arial, helvetica, sans-serif;
}
#box {
    width:50%;
    border:2.1875em solid transparent;
    border-image:url(images/pipe-frame-sm.png) 35;
    border-radius:2.1875em;
    background-color:#def;
    box-shadow:0.4em 0.4em 0.4em #999;
    padding:0 1em;
    margin:auto;
}
    </style>
</head>
<body>

<div id="box">
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sit amet sem sed libero 
        bibendum tempus faucibus quis mi. Nulla rhoncus vel ipsum in volutpat. Nam tortor nibh, 
        posuere ac lorem ut, suscipit tincidunt leo. Duis interdum justo ac justo vehicula consequat. 
        Curabitur et volutpat nibh. Phasellus rutrum lacus at dolor placerat feugiat. Morbi porta, 
        sapien nec molestie molestie, odio magna vestibulum lorem, vitae feugiat est leo sit amet 
        nunc. Curabitur ornare tempor turpis. In nibh sem, porta ac magna sed, pretium commodo 
        odio. Sed porttitor augue velit, quis placerat diam sodales ac. Curabitur vitae porta ex. 
        Praesent rutrum ex fringilla tellus tincidunt interdum. Proin molestie lectus consectetur 
        purus aliquam porttitor. Fusce ac nisi ac magna scelerisque finibus a vitae sem.
    </p>
</div>

</body>
</html>

By using the border-image method, one can use a box-shadow, too!

As I mentioned before, this was a good exercise for me. Thanks @coothead and @SamA74 for spurring my curiosity.

6 Likes

Another home run for you RP, I totally dig this little cutie! It’s calling Avatar, Avatar, Avatar . . .

1 Like

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.