Posted By

bitsculptor on 01/22/14


Tagged

headline bar-headline


Versions (?)

Full Width Headline with simple bars to fill the white space


 / Published in: jQuery
 

This is a combination of html, css, and jQuery to create a neat little effect that gives a full width headline where the text is surrounded by 1px bars that fill the white space.

  1. // HTML
  2. <p class="introline"><span class="titleline start"></span><span class="headline">Conferences</span><span class="titleline fin"></span></p>
  3.  
  4.  
  5. // CSS
  6. .introline {
  7. text-transform:uppercase;
  8. color: #a3a3a3;
  9. letter-spacing: .5px;
  10. font-size: 14px;
  11. text-align:center;
  12. width:100%;
  13. position:relative;
  14. margin:0;
  15. padding:20px 0;
  16. }
  17. .titleline {
  18. border-bottom:1px solid #ddd;
  19. position:absolute;
  20. width:30%;
  21. height:1px;
  22. top:50%;
  23. display:block;
  24. }
  25. .titleline.start {
  26. left:0;
  27. }
  28. .titleline.fin {
  29. right:0;
  30. }
  31.  
  32. // jQuery
  33. $("p.introline").each(function(){
  34. headline_width = $(this).find(".headline").width();
  35. container_width = $(this).width();
  36. headline_padding = 20;
  37. $(this).find(".titleline").width(((container_width-headline_width)/2)-headline_padding);
  38. });

Report this snippet  

You need to login to post a comment.