Blue
Red
Green
Orange
Voilet
Slate
Dark

Html css beautiful title for website

Admin

Administrator
Staff member
Joined
Apr 3, 2022
Messages
380
Reaction score
53
Points
28
html-css-title-đẹp.png

Hello everyone, today I will share with you one more knowledge that is not superior, but it is beautiful mainly.

HTML:
<div id="container">
   <h1>This is my title</h1>
</div>

CSS:
/* Just to align the container */
  #container {width: 400px; margin: 30px auto; text-align: center; padding: 100px 0; background: #EEEEEE;}
  /* The important bit */

  h1 {position: relative;
      margin: 0 -25px;
      font-size: 40px;
      background: #0088AA;
      color: #FFFFFF;
      text-shadow: 1px 1px 0px #1A5D6E;
      box-shadow: 0 0 10px #AAA;
  }

  h1:before {content: ""; display: block; position: absolute; bottom: -25px; width: 0; height: 0; border-style: solid; border-color: #1A5D6E transparent;border-width: 25px 0 0 25px; left: 0;}

Done.
 
Top
AdBlock Detected

We get it, advertisements are annoying!

Sure, ad-blocking software does a great job at blocking ads, but it also blocks useful features of our website. For the best site experience please disable your AdBlocker.

I've Disabled AdBlock    No Thanks