home > tutoriale > html-css > cum-sa-creezi-litere-capitale-cu-css.php

Cum sa creezi litere capitale/majuscule cu CSS

29 Martie 2011 de Budica Eugen

In acest tutorial va voi prezenta doua metode css prin care putem capitaliza prima litera dintr-un paragraf.

tutorial css cum sa creezi litere capitale cu css
Autor :   Budica Eugen

Salutare si bine v-am regasit, am pregatit un nou tutorial pentru Rotuts.com care probabil o sa fie destul de interesant pentru anumite persoane, in special pentru acelea care scriu povesti intregi pe paginile lor.
Cu totii ne amintim de povestile care incep paragraful cu o litera mare , acea litera parca da un anumit farmec , cel putin asa mi se pare mie , ma rog , exact asta o sa facem in acest tutorial, o sa folosim CSS pentru a formata prima litera a unui paragraf pentru a obtine efectele dorite.
Acest efect se poate obtine prin doua metode , prima metoda ar fi folosirea unei clase CSS obisnuite pentru a o aplica unui element span si a doua metoda ar fi folosirea pseudo-elementului : first-letter.

Aplicarea unei clase CSS elementului span

   .majusculaSpan
{
   float:left;
   color:red;
   background:white;
   border:1px solid #033;
   padding:3px;
   font-size:75px;
   line-height:65px;
   font-family:"Times New Roman", Times, serif;
   margin-right: 3px;
}
   

Aceasta clasa o aplicam in urmatorul mod :

   <p><span class="majusculaSpan">L</span>orem ipsum dolor sit amet, consectetur adipisicing elit, sed ...</p>
   <!-- paragraful nu este necesar , dar pentru o organizare mai buna este mai bine sa il bagam intr-un paragraf -->
   

Codul CSS de mai sus ar avea urmatorul efect :


Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Folosirea pseudo-elementului CSS :first-letter

Pentru a nu adauga cate un element HTML span la fiecare paragraf la care avem nevoie de o litera capitalizata, folosim pseudo-elementul CSS first-letter, acesta aplica stilurile direct pe prima litera a unui paragraf.

p.majuscula:first-letter
{
   float:left;
   color:white;
   background:black;
   border:1px solid #033;
   font-size:75px;
   line-height:65px;
   padding:3px;
   font-family:"helvetica neue", "lucida grande", helvetica, arial, sans-serif;
   margin-right: 7px;  
}

Aplicam aceasta clasa CSS in urmatorul mod:

<p class="majuscula">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam...</p>

Rezultatul este urmatorul :


Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt.


Nu uita ca poti experimenta in continuare si poti obtine rezultate chiar impresionante , acesta este doar un simplu exemplu care va demostreaza ca, cu ajutorul CSS-ului putem face foarte multe lucruri care ne par destul de grele, destul de simplu.



Da si tu un like
  


Daca ti-a fost folositor acest tutorial/articol, poti copia urmatorul cod pe pagina ta

Tutoriale din Categoria HTML & CSS

  Cum sa creezi litere capitale/majuscule cu CSS   -   CSS3 border-radius si -moz-boder-radius   -   Cum sa faci un simplu web-site pe 3 coloane   -   Un simplu meniu in CSS si HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -

Tutoriale aleatorii

  CSS3 border-radius si -moz-boder-radius   -   Centrarea paginii cu CSS   -   Table in HTML   -   Cum sa inserezi un sunet/melodie intr-o pagina   -   Trimiterea datelor din formular la adresa de e-mail   -   Tutorial Jquery pentru incepatori   -   Cum sa centrezi o fereastra/popup   -
Spune-le prietenilor tai despre acest tutorial/articol
Nume:
Email:
Email-ul prietenului tau:
Mesajul:

Comenturi

0 comenturi pana acum... (posteaza si tu)

Comentarii:

Nume:

Email:

Comentariu:


 

*Intrebare de verificare : Raspunde la intrebarea din imaginea de mai jos ...

 
HINT : Raspunsul este din 6 litere, incepe cu r si se termina cu s


 


Important:
E-mailul nu va fi vizibil si NU va fi folosit de catre rotuts.com .
Nu sunt permise linkuri catre alte pagini.
Va rugam , comentariile sa ramana strict relationate cu topicul.
Comentariile considerate ofensive sau care nu au nici o legatura cu topicul vor fi sterse(trolling).

Folosirea codului HTML nu este permisa.
Puteti folosi BBcode pentru a va formata textul.