AcasaAcasa   Facebook Facebook  PublicatiiPublicatii  CautareCautare  MembriMembri  InregistrareInregistrare  ConectareConectare  
Cautare
 
 

Rezultate pe:
 

 


Rechercher Cautare avansata
[D.F] Panou de control
PROFIL
Informatii
Preferinte
Semnatura
Avatar
SOCIAL
Administrare prieteni
Membrii forumului
Grupuri de utilizatori
MESAJE PRIVATE
Mesaje primite
Mesaje trimise
Arhiva
Subiecte monitorizate
SUBIECTE MONITORIZATE

Team Online

Distribuiţi | 
eSeck OnlineOffline
Tutorial Nevalidat
Text personalizat folosind HTML si CSS
la data de Joi Sept 03, 2015 10:00 am
Multumesc Citeaza Editeaza Sterge Info
Salutare azi o sa va prezint cum puteti sa faceti un text foarte frumos, folosind doar HTML si CSS.

Acesta este codul. Puteti sa il puneti oriunde doriti sa apara text-ul:



[*]
Cod:

<!DOCTYPE html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en"> <!--<![endif]-->
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Notification Windows</title>
  <!--[if lt IE 9]><script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
</head>
<body>
  <div class="container">
    <section class="notif notif-notice">
      <h6 class="notif-title">Congratulations!</h6>
      <p>You found the answer to the ultimate question of life, the universe, and everything.</p>
      <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
    <section class="notif notif-alert">
      <h6 class="notif-title">Error!</h6>
      <p>No information signal or material object can travel faster than light in vacuum.</p>
      <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
    <section class="notif notif-warn">
      <h6 class="notif-title">Warning!</h6>
      <p>There is as yet insufficient data for a meaningful answer.</p>
      <div class="notif-controls">
        <a href="#" class="notif-minimize">Minimize</a>
        <a href="#" class="notif-zoom">Zoom</a>
        <a href="#" class="notif-close">Close</a>
      </div>
    </section>
    <style>
    @import url(http://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css);

body {
  font: 12px/20px 'Lucida Grande', Verdana, sans-serif;
  color: #404040;
  background: #343137;
}

.container {
  margin: 20px auto;
  width: 380px;
}

.container .notif {
  margin: 10px 0;
}

.notif {
  position: relative;
  padding: 25px 30px 25px 100px;
  min-height: 50px;
  line-height: 22px;
  background: white;
  border-radius: 2px;
}

.notif:before {
  content: '';
  position: absolute;
  top: 25px;
  left: 30px;
  width: 40px;
  height: 40px;
  border: 5px solid;
  border-radius: 25px;
}

.notif p {
  font-size: 11px;
  color: #666;
}

.notif-title {
  margin: 0 0 5px;
  font-size: 14px;
  font-weight: bold;
  color: #333;
}

.notif-title:before, .notif-title:after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 2px;
}

.notif-notice:before {
  background: #a7d155;
  border-color: #8fb14f;
}

.notif-notice .notif-title:before, .notif-notice .notif-title:after {
  top: 44px;
  left: 55px;
  width: 4px;
  height: 12px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.notif-notice .notif-title:after {
  top: 50px;
  left: 48px;
  width: 8px;
  height: 4px;
}

.notif-alert:before {
  background: #e34f4f;
  border-color: #c14343;
}

.notif-alert .notif-title:before, .notif-alert .notif-title:after {
  top: 43px;
  left: 53px;
  width: 4px;
  height: 14px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.notif-alert .notif-title:after {
  top: 48px;
  left: 48px;
  width: 14px;
  height: 4px;
}

.notif-warn:before {
  background: #f1e472;
  border-color: #cec260;
}

.notif-warn .notif-title:before, .notif-warn .notif-title:after {
  top: 42px;
  left: 53px;
  width: 4px;
  height: 11px;
  background: #5c562b;
}

.notif-warn .notif-title:after {
  top: 54px;
  height: 4px;
}

.notif-controls {
  position: absolute;
  top: 0;
  right: 0;
  height: 16px;
  padding: 4px 3px 5px;
  background: #f0f0f0;
  border: solid #dcdcdc;
  border-width: 0 0 1px 1px;
  border-radius: 0 2px;
}

.notif-controls > a {
  position: relative;
  float: left;
  margin: 0 1px;
  width: 16px;
  height: 16px;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
}

.notif-minimize:before {
  content: '';
  position: absolute;
  top: 11px;
  left: 4px;
  width: 7px;
  height: 2px;
  background: #bbb;
}

.notif-minimize:hover:before {
  background: #888;
}

.notif-zoom:before {
  content: '';
  position: absolute;
  top: 6px;
  left: 3px;
  width: 5px;
  height: 3px;
  border: 2px solid #bbb;
}

.notif-zoom:hover:before {
  border-color: #888;
}

.notif-close:before, .notif-close:after {
  content: '';
  position: absolute;
  top: 4px;
  left: 7px;
  width: 2px;
  height: 10px;
  background: #bbb;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.notif-close:after {
  top: 8px;
  left: 3px;
  width: 10px;
  height: 2px;
}

.notif-close:hover:before, .notif-close:hover:after {
  background: #888;
}

/* IE 8 doesn't support CSS transforms; use Unicode instead. */

.lt-ie9 .notif-notice .notif-title:before {
  content: '\2714';
  display: block;
  top: 25px;
  left: 30px;
  width: 50px;
  font: bold 18px/50px "Arial Unicode MS";
  color: white;
  text-align: center;
  background: none;
}

.lt-ie9 .notif-notice .notif-title:after {
  display: none;
}

.lt-ie9 .notif-alert .notif-title:before {
  content: '\2716';
  display: block;
  top: 25px;
  left: 30px;
  width: 50px;
  font: bold 17px/50px "Arial Unicode MS";
  color: white;
  text-align: center;
  background: none;
}

.lt-ie9 .notif-alert .notif-title:after {
  display: none;
}

.lt-ie9 .notif-close:before {
  content: '\2716';
  display: block;
  top: 0;
  left: 0;
  width: 16px;
  font: 11px/19px 'Arial Unicode MS';
  color: #bbb;
  text-align: center;
  background: none;
}

.lt-ie9 .notif-close:after {
  display: none;

    </style>


Demo : [Trebuie sa fiti inscris si conectat pentru a vedea acest link] astept pareri
Autor : JokerKing(cslimitz.forumz.ro)
Sus In josVezi profilul utilizatorului
 
Text personalizat folosind HTML si CSS
Vezi subiectul anterior Vezi subiectul urmator Sus 
Pagina 1 din 1