Πως να προσθέσετε στη σελίδα σας ένα Notepad με CSS

March 15, 2013
Web-Design
Problem solving

Για επαγγελματικό Web Design, ανανέωση της ιστοσελίδας σας ή οποιαδήποτε επίλυση προβλημάτων στην ιστοσελίδα σας, μπορείτε να επικοινωνήσετε μαζί μου μέσα από την selidamou.gr ή από τα social media.

Για να προσθέσετε στην σελίδα σας css κώδικα για να αναπαραστήσετε ένα notepad ακολουθήστε τα παρακάτω βήματα

στο HTML προσθέστε:

<body>

<!–Περιεχόμενο… –>

</div>

</body>

Στο CSS προσθέστε:

.notepad {
font-family: ‘Handlee’, cursive;
padding: 50px 40px;
margin: 50px auto;
margin-left: 20px;
width: 200px;
float:right;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.2), inset 0 0 50px rgba(0, 0, 0, 0.1);
transform: rotate(-4deg);
-ms-transform: rotate(-4deg);
-moz-transform: rotate(-4deg);
-o-transform: rotate(-4deg);
-webkit-transform: rotate(-4deg);
background: #fcf59b;
background:
-webkit-gradient(
linear,
left top, left bottom,
from(#81cbbc),
color-stop(2%, #fcf59b)
);
background:
-moz-repeating-linear-gradient(top,#fcf59b,#fcf59b 38px,
#81cbbc 40px);
background:repeating-linear-gradient(top,#fcf59b,#fcf59b 38px,
#81cbbc 40px);
-webkit-background-size: 100% 40px;
}