locked
Outlined title RRS feed

  • Question

  • User730436342 posted

    Hello everybody
    I would like to create a title on the page with a border that outlines the text when the site starts.
    I think I have to use the svg tag with an animation like stroke-dashoffset.

    Can anyone give me some more information?

    Thursday, December 5, 2019 3:28 PM

All replies

  • User303363814 posted

    It depends on exactly what you are trying to achieve.  The simplest way is to use the css 'border' property.

    .some-selector-for-the-title { border: 1px solid black}

    Can you give more information on what your goal is?

    Friday, December 6, 2019 2:32 AM
  • User-1780421697 posted
    <!DOCTYPE html>
    <html>
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
    <script> 
    $(document).ready(function(){
      $("#btn").click(function(){
      
           var div = $("#dv");       
           div.css({border: '5 solid #f37736'}).animate();
           div.animate({fontSize: '3em'}, "slow");
      
      
      });
    });
    </script> 
    </head>
    <body>
    
    <button id="btn">Start Animation</button>
    
    <div id="dv" style="background:#98bf21;height:400px;width:400px;;">
    Animation of border and text
    </div>
    
    </body>
    </html>
    

    Friday, December 6, 2019 2:50 AM
  • User1535942433 posted

    Hi Natalia78,

    I suggest you could use the text property.The text element defines a graphic consisting of text.Then you could add style ,for example , stroke-dashoffset, fill color and stroke color.

    More details ,you could refer to below code:

    <style type="text/css">
    
          #title {
              font-family: 'Shrikhand', cursive;
              stroke-dashoffset: 100%;
              stroke-dasharray: 100%;
              -moz-animation: draw 8s forwards ease-in;
              -webkit-animation: draw 8s forwards ease-in;
              animation: draw 8s forwards ease-in;
          }
          @keyframes draw {
              100% {
                  stroke-dashoffset: 0;
              }
          }
          @-webkit-keyframes draw {
           100% {
               stroke-dashoffset: 0;
           }
          }
          @-moz-keyframes draw {
              100% {
                  stroke-dashoffset: 0;
              }
          }
        </style>
    
    
     <div class="draw_text">
    
                 <svg width="1092" height="220">
                     <text x="150" y="200" fill="grey" stroke="yellow" id="title" stroke-width="2" font-size="95">I'm a title</text>
                 </svg>
             </div>

    Link:

    https://www.w3schools.com/graphics/svg_text.asp

    Result:

    Best regards,

    Yijing Sun

    Friday, December 6, 2019 9:25 AM