Can this be designed in CSS3?


#23

Not sure what alternatives you have ruled out, but if you cannot use an svg, I see no reason why you cannot use a background image and achieve satisfactory results easily. In the meanwhile look for a better hosting service.


#24

I won’t be moving, they fit all of my business needs. SVG doesn’t really mess up anything. I could use an image background but then I think I’d run into the same problem. The text seems to be working fine.


#25

You can literally embed SVG directly into your actual HTML template. SVG is XML. If they don’t support SVG, they don’t support HTML.


#26

Then you haven’t described your page to us in enough detail. Can you post a link to the actual page?


#27

Here’s an example showing how the SVG expands to fit inside its parent container.

http://scratchpad.io/workable-apparel-8549


#28

< off topic >

While we are " o.t " here’s another…

<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
*{
    box-sizing: border-box;
 }

body {
    background-color: #f0f0f0;
    font: 100% / 162% verdana, arial, helvetica, sans-serif;
 }

h1 {
    font-size: 1.2em;
    color: #444;
    text-align: center;
    text-transform: uppercase;
 }

#container {
    display: table;
    max-width: 62.5em;
    padding: 1%;
    margin: auto;
    background-color: #121212;
    box-shadow: 0.4em 0.4em 0.4em rgba( 0, 0, 0, 0.4 );
 }

#container div {
    display: table-cell;
    width: 33.33%;
    padding: 1%;
 }

svg {
    width: 100%; 
    display: block; 
 }

@media ( max-width:44em ) {
#container {
    display: block;
 }

#container div {
    display: block;
    width: 96%;
    padding: 2%;
  }

svg {
    width: 75%; 
    margin: auto;
  }
 }

@media ( max-width:27em ) {
svg {
    width: 90%; 
    margin: auto;
  }
 }
</style>

</head>
<body>

 <h1>three hexagonal links</h1>

 <div id="container">
  <div>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 260 300">
    <a xlink:href="https://example.com">
     <style>
      #line1 {font-size: 2.2em;}
      #line2, #line3, #line4 {font-size: 0.75em; }
      #line5 {font-size:1.2em; text-transform:uppercase;}
     </style>
     <defs>
      <pattern id="image-bg1" x="0" y="0" width="508" height="300" patternUnits="userSpaceOnUse">
       <image width="508" height="300" xlink:href="https://www.coothead.co.uk/images/grey.jpg"/>
      </pattern>
     </defs>
     <polygon points="0,75 130,0 260,75 260,225 130,300 0,225" stroke="#555" stroke-width="2" fill="url(#image-bg1)"/>
      <text id="line1" y="115" fill="#fff" transform="translate(130)">
       <tspan x="0" text-anchor="middle">Concept art</tspan>
      </text>
      <text id="line2" y="140" fill="#fff" transform="translate(130)">
       <tspan x="0" text-anchor="middle">Character designs, pseudo scientific</tspan>
     </text>
      <text id="line3" y="165" fill="#fff" transform="translate(130)">
       <tspan x="0" text-anchor="middle">flora/fauna and landscaping for</tspan>
     </text>
      <text id="line4" y="190" fill="#fff" transform="translate(130)">
       <tspan x="0" text-anchor="middle">both clients and personal projects.</tspan>
     </text>
      <text id="line5" y="230" fill="#69f" transform="translate(130)">
       <tspan x="0" text-anchor="middle">View all</tspan>
     </text>
    </a>
   </svg>
  </div><div>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 260 300" >
    <a xlink:href="https://example.com">
     <defs>
      <pattern id="image-bg2" x="-100" y="0" width="508" height="300" patternUnits="userSpaceOnUse">
       <image  width="508" height="300" xlink:href="https://www.coothead.co.uk/images/gaze.gif"/>
      </pattern>
     </defs>
     <polygon points="0,75 130,0 260,75 260,225 130,300 0,225" stroke="#555" stroke-width="2" fill="url(#image-bg2)"/>
    </a>
   </svg>
  </div><div>
   <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 260 300" >
    <a xlink:href="https://example.com">
     <defs>
      <pattern id="image-bg3" x="0" y="0" width="508" height="300" patternUnits="userSpaceOnUse">
       <image  width="508" height="300" xlink:href="https://www.coothead.co.uk/images/crimson.jpg"/>
      </pattern>
     </defs>
     <polygon points="0,75 130,0 260,75 260,225 130,300 0,225" stroke="#555" stroke-width="2" fill="url(#image-bg3)"/>
    </a>
   </svg>
  </div>
<!-- #container --></div>

</body>
</html>

coothead

< /off topic >


#29

[off-topic]

For the benefit of Mobile users who would have had to wait until they are back on their desktops before they were able to view the script results… I have taken the liberty to copy and paste the supplied script to this free online application.

http://scratchpad.io/well-made-horn-4957

[/off-topic]


#30

My attempt using either text or SVG but as content on the psuedo element of an actual hr element.

BTW, the SVG path I created and the code is simply

<svg version="1.0" xmlns="http://www.w3.org/2000/svg" width="200px" height="100px" preserveAspectRatio="xMidYMid meet">
  <path fill="#333" stroke="#fff" stroke-width="2"
    d="M0,80 C10,20 60,30 100,45 
       140,60 180,70 200,20 
       190,80 140,70 100,55 
       60,40 20,30 0,80"
        />
</svg>

#31

Hi chilledoj, welcome to the forum!

Nice, but I would rather use a div instead of a hr. Same css applies. :slight_smile:

The semantic of the hr element is a paragraph-level break. (Could fit this case)

But it is a void element that is not allowed to have content. I guess that rules out pseudo elements too, though most browsers allow what they can render.

Then different browsers could apply different styles to it, like vertical margin or background or border. Though there was a default style sheet in html4, not all cared to follow it. https://www.w3.org/TR/2011/REC-CSS2-20110607/sample.html

More info at Mozilla dev: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/hr


#32

Actually, it’s a THEMATIC break, not a paragraph break. Definite difference. So in this case, the HR would be the correct application (IMHO). And since this is a stylistic application, a void element seems to be more appropriate as well…


#33

Thanks, I too should have read the link I gave to Mozilla dev. :blush:

They say the <hr> element represents a paragraph-level thematic break. - I agree.

In their demo they also use a pseudo element to add a figure to the rule. It seems this empty element is an exception that generated content is allowed for. - I like that. :slight_smile: