Register

If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Results 1 to 1 of 1
  1. #1
    Member mhookem's Avatar
    Join Date
    May 2012
    Location
    Chesterfield, Derbyshire. United Kingdom
    Posts
    47
    Member #
    31766
    I've seen a couple of different examples of making a notepad using css before but I think the one that I've made is the easiest to work with when you want to re-size it to fit your project.

    The ones that I've seen are made by adding css styles to a list. I've decided to use a table instead because it seems to me to be easier to work with.




    You can actually let the table cell heights re-size for you when you decide on what size font to use as you're typing....nice!


    This is the only thing you need to remember for each new line of text. Instead of hitting 'Enter' just pick the table row you're already typing into and split it into however many lines you need.


    I've also set the border-bottom to a dotted line just to give it a more authentic feel, kind of like a perforated line or a neat tear that you get when you've folded the paper.

    The font I've used is from Adobes' font tool, you'll need to add the source for the javascript file.


    Place this just before the closing </head> tag if you want to use it, it's used to make it look like somebodys' handwriting:


    <script src="http://use.edgefonts.net/lobster-two.js></script>


    After creating the css for your page, all you have to do is add the table and assign the appropriate css classes to it!





    Here's the HTML:


    <html>

    <head>
    <style type="text/css">
    <!--
    /* assign this class to the table*/
    .testimonial{
    border-left: 1px solid #000;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    background-colour: #EEEEEE;
    padding-left: 25px;
    padding-bottom: 0px;
    box-shadow: 0px 3px 4px 0px #000;
    }
    /* assign this class to each table cell except for the bottom one */
    .notes{
    font-family: lobster-two, serif;
    border-left: 5px double #FFAAEE;
    border-bottom: 1px solid #CCC;
    margin-top: 0px;
    colour: #000099;
    text-indent:3px;
    }
    /* assign this class to the bottom table cell ( no 'border-botttom' )*/
    .footer{
    font-family: lobster-two, serif;
    border-left: 5px double #FFAAEE;
    margin-top: 0px;
    colour: #000099;
    text-indent:3px;
    }
    -->
    </style>
    </head>
    <body>
    <table width="40%" border="0" cellpadding="0" cellspacing="0" class="testimonial">
    <tr>
    <td class="notes">&nbsp;</td>
    </tr>
    <tr>
    <td class="notes">&nbsp;</td>
    </tr>
    <tr>
    <td class="notes">&nbsp;</td>
    </tr>
    </table>
    </body>
    </html>

    If you want, you can place the table inside a div and place it anywhere onto your page. And of course you can set the table width and height attributes to whatever you like without having to re-arrange all of the styles!!


    Have a nice day!!!



  2.  


Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  

Search tags for this page

css notepad effect

Click on a term to search for related topics.
All times are GMT -6. The time now is 10:43 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2019 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: PurevB.com