30 CSS Selectors pentru o viata mai usoara. Partea II

16. CSS Selector [foo~="bar"]
a[data-info~="external"] { 
    color: red; 
} 
  
a[data-info~="image"] { 
    border: 1px solid black; 
}
Acest selector este unul mai special, care cu siguranta o sa va impresioneze prietenii :). Nu prea multi web developeri stiu de acest truc. Tilda (~) ne permite sa vizam un atribut care are o lista de valori separata prin spatiu. Daca ne vom conduce dupa selectorul 15 descris in articolul precedent., putem crea un atribut personal, data-info de exemplu, care ne poate avea valori separate prin spatiu. In acest caz vom face un set de link-uri externe catre imagini, doar pentru exemplu.

<a href="path/to/image.jpg" data-info="external image"> Click Me, Imagine </a>

Avind acest cod HTML, putem sa vizam orice tag care are oricare dintre aceste valori, utilizind (~).
a[data-info~="external"] { 
    color: red; 
} 
  
a[data-info~="image"] { 
    border: 1px solid black; 
}
Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

17. CSS Selector checked
input[type=radio]:checked { 
    border: 1px solid black; 
} 
Aceasta pseudo-clasa va formata un element din interfata utilizatorului care a fost checked (activat), cum ar fi un HTML radio button sau HTML checkbox. Destul de simplu.

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

18. CSS Selector after
Pseudo elementele before si after sunt destul de stranii. In fiecare zi, web developerii gasesc noi modalitati de intrebuintare efectiva a acestor selectore. Ele simplu genereaza content in jurul elementului selectat. Multe au fost introduse spre aceste clase cind au intilnit clear-fix hack.
.clearfix:after { 
     content: ""; 
     display: block; 
     clear: both; 
     visibility: hidden; 
     font-size: 0; 
     height: 0; 
} 
  
.clearfix { 
    *display: inline-block; 
    _height: 1%; 
} 
Acest hack foloseste :after pentru a aduaga un spatiu dupa element, iar apoi pentru al sterge. Este un truc bun in cazul cind metoda overflow:hidden nu este posibil de aplicat.

Browser Compatibility

• IE 8+
• Firefox
• Google Chrome
• Safari
• Opera

19. CSS Selector hover
div:hover { 
   background: #e3e3e3; 
}
Cu siguranta stiati de el. Termenul oficial este: user action pseudo class. Suna cam confuz, dar in realitate este destul de simplu. Daca doriti sa aplicati un stil CSS atunci cind utilizatorul duce mouse pe un HTML element, cu hover puteti sa faceti acest lucru. De exemplu pentru a aplica un un border-bottom unei HTML ancore atunci cind userul duce mouse deasupra, e suficient de a scrie urmatorul cod:
a:hover { 
  border-bottom: 1px solid black; 
}
Browser Compatibility

• IE 6+(in IE6 :hover trebuie sa fie folosit doar pentru HTML ancore!)
• Firefox
• Google Chrome
• Safari
• Opera

20. CSS Selector not (negatie) 

div:not(#container) { 
   color: blue; 
} 

Pseudo clasa negatie este foarte ajutatoare in cazuri particulare. Sa spunem ca e nevoie de a selecta toate div-urile dintr-un HTML template in afara de div-ul care are ID="container". Fragmentul de cod de mai sus ne ajuta sa facem acest lucru.

Sau, dorim sa selectionam toate elementele unice din HTML template, in afara de tag-urile <p>:
*:not(p) { 
   color: green; 
}

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

21. CSS Selector ::pseudoElement
p::first-line { 
    font-weight: bold; 
    font-size: 1.2em; 
}
Putem utiliza pseudo elemente (::) pentru a stiliza fragmente a unui element din pagina, cum ar fi prima linie dintr-un paragraf.
Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

22. CSS Selector nth-child(n)
li:nth-child(3) { 
   color: red; 
}
Va mai aduceti aminte zilele cind ne intrebam cum de selectat un element intr-o lista? Ei bine, selectorul nth-child rezolva aceasta problema. De notat ca nth-child accepta ca parametru un numar de tip integer. Pentru a selecta al doilea element din lista folosim li:nth-child(2).
Se poate de utilizat in modul in care sa selectam un numar variabil de elemente dintr-o lista :). Pentru a alege fiecare al 4-lea element e nevoie de scris li:nth-child(4n).
Browser Compatibility

• IE 9+
• Firefox 3.5+
• Google Chrome
• Safari
• Opera

23. CSS Selector nth-last-child(n)

li:nth-last-child(3) {
    color: olive;
}

Pentru cazurile cind avem o lista enorma de elemente intr-un ul iar noi avem nevoie sa alegem al treilea element de la urma ne vine in ajutor nth-last-child. In loc sa scriem li:nth-child(397), putem sa scrim li:nth-last-child(3) (lista noastra are 400 elemente).
Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

24. CSS Selector nth-of-type(n)
ul:nth-of-type(3) { 
    border: 1px solid black; 
}
Sunt momente cind selectorii de mai sus nu putem sa-i folosim. De exemplu avem un template HTML in care se contin 5 liste neordonate ul iar noi dorim sa formatam al 3-lea ul.In CSS exemplul de mai sus e demonstrat cum de adaugat CSS border pentru al treilea HTML ul din template.

Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

25. CSS Selector nth-last-of-type(n)
ul:nth-last-of-type(3) { 
    border: 1px solid black; 
}
Si pentru a adauga un selector care functioneaza invers celui precedent, avem nth-last-of-type.

Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

26. CSS Selector first-child
ul li:first-child { 
    border-top: none; 
}
Aceasta pseudo clasa structurala ne permite sa vizam numai primul copil al elementului dorit. In CSS exemplul scris in antet, am aratat cum de sters border-top pentru primul item din lista.
Browser Compatibility

• IE 9+
• Firefox 3.5+
  
• Google Chrome
• Safari
• Opera

27. CSS Selector last-child
ul > li:last-child { 
    color: green; 
}
Spre deosebire de first-child, last-child va viza doar ultimul element al elementului parinte.

Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

28. CSS Selector only-child
div p:only-child { 
    color: red; 
}
Sincer, nu cred ca prea multi dintre noi o sa gaseasca intrebuintare acestei pseudo clase. Cu toate acestea o descriu, poate cuiva o sa ii fie de ajutor.
Deci, only-child, permite sa selectam elementele care sunt UNICUL copil al printelui sau. In cazul nostru, va stiliza doar paragrafele p, care sunt unicii copii ai elementului div din HTML template.
Browser Compatibility

• IE 9+
• Firefox
• Google Chrome
• Safari
• Opera

 29. CSS Selector only-of-type

li:only-of-type { 
    font-weight: bold; 
}

Aceasta pseudo clasa CSS poate fi folosita in citeva moduri. Va viza elementele care nu au "frati" in containerul parinte. Spre exemplu, sa selectam toate listele ul care au doar un singur item.
Mai intii trebuie sa ne intrebam, cum se poate de realizat acest task. Se poate de folosit ul li dar atunci se vor selecta toate elementele. Unica iesire din situatie este only-of-type
ul > li:only-of-type { 
    font-weight: bold; 
}
Browser Compatibility

• IE 9+
• Firefox 3.5+
• Google Chrome
• Safari
• Opera 

Articol preluat si tradus de aici

30 CSS Selectors pentru o viata mai usoara. Partea I

La fel ca si majoritatea incepatorilor in domeniul crearii CSS layouturilor, la inceput stiam de class, id si descendants selectors pe care ii foloseam toata ziua :)
Dar cu timpul am inteles ca sunt o sumedenie de selectori CSS pentru a face viata mai usoara creatorilor de layouturi, si markup-uri. Acesti selectori ofera un grad inalt de flxeibilitate si sunt suportate de majoritate browserelor moderne.
Mai jos o sa descriu 30 din acesti selectori, sper cuiva sa fei de ajutor, eu personal ii folosesc la putere maximala.

1. Selectorul * 

* { 
  margin: 0; 
  padding: 0; 
}  

 

Sa incepem cu un selector mai simplu, pentru inceput. Simbolul * se foloseste pentru a viza orice element unic din pagina. Multi web developeri folosesc acest selector pentru a face nule toate margin si padding care au valori implicite ce difera de la browser la browser. Cu toate ca acest lucru este cu siguranta bun pentru a face careva teste rapide, totusi nu este de dorit de a folosi acest truc in productie, deoarece incarca mult browserul. Se mai poate de utilizat si impreuna cu child selectors:
#container * { 
      border: 1px solid black; 
}
In exemplul de mai sus, se va viza toti copiii HTML elementului cu ID-ul "container".
Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

2.  Selectorul #(ID)
#container {
width: 960px;
margin: auto;
}

Simbolul # in CSS ne permite de accesa un element HTML dupa ID. Este foarte folosit pentru crearea layouturilor, dar, ID selectors sunt destul de rigide si nu permit reutilizarea pentru alt element, deoarece ID-ul intr-un HTML document trebuie sa fie unic. Folositi pe cit posibil un tag, sau unul dintre elementele HTML5, sau o pseudo clasa CSS, pentru a evita selectorul ID.

Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

3. Selectorul .(CLASS)

.eroare { 
   color: red; 
}
Acest este selectorul class. Diferenta dintre id si class este: cu class putem viza mai multe elemente intro pagina HTML. Folositi class atunci cind aveti de stilizaat in acelasi mod un grup de elemente HTML.
Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

4. Selectorul (descendants)
li a { 
   text-decoration: none; 
}
Selectorul descendants se foloseste atunci cind dorim sa specificam mai precis ce element dorim sa stilizam. De exemplul, fie ca e nevoie sa stilizam doar ancorele dintr-o lista neordonata, atunci folosim descendants, la fel ca in exemplul de mai sus.
Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

5. Selectorul  (type)

a { color: red; }
ul { margin-left: 0; }

Atunci cind avem de stilizat toate elementele de un anumit tip intr-o pagina, folosim selectorul de tip. Daca dorim ca toate elementele din pagina de tip <a> sa aiba textul de culoare rosie, atunci folosim selectorul type.

Browser Compatibility

• IE 6+
• Firefox
• Google Chrome
• Safari
• Opera

 6. Selectorul X:visited si X:link
a:link { color: red; } 
a:visted { color: purple; } 
Utilizam pseuodo-class :link atunci cind vrem sa decoram ancorele care trebuie sa fie apasate.
Alternativ, mai avem si pseudo-clasa :visited pentru a stiliza ancorele sau linkurile care au fost apasate, vizitate.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

7. Selectorul (+)
ul + p { 
    color: red; 
} 
Se refera la slesctorul de adiacenta. Cu ajutorul sau se selecteaza DOAR primul element vecin de elementul de referinta. In cazul nostru numai primul paragraf <p>dupa fiece <ul> va avea culoare rosie.

Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

8. CSS Selectorul (>)
div#container > ul { 
   border: 1px solid red; 
}
Diferenta dintre > si descendants este: cu ajutorul ">" se pot selecta doar copii directi. de exemplu avem urmatorul fragment de markup:
<div id="container"> 
    <ul> 
       <li> Item 
         <ul> 
            <li> Child </li> 
         </ul> 
       </li> 
       <li> Item </li> 
       <li> Item </li> 
       <li> Item </li> 
    </ul> 
</div>
Selectorul #container > ul va viza doar ulurile care sunt copii directi ai divului cu idul "container".
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

9. CSS Selecotorul ~
l ~ p { 
    color: red; 
}
Acest sibling selector este similar selectorului + dar mai putin strict. In timp ce cu + se poate de selectat doar elementul imediat dupa itemul de baza, acesta din urma este unul mult mai general. Cu ajutorul sau se selecteaza toate elementele ce urmeaza dupa elementul de baza in toata pagina HTML.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

10. CSS Selector [title]
a[title] { 
    color: green; 
}
Face referinta la un attribute selector, adica, vor fi selectate toate elementele care au un anumit atribut, in cazul nostru atribut title.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

11. CSS Selector [href="foo"]
a[href="http://google.com"] { 
  color: olive;
}
In fragmentul descris de mai sus e demonstrat cum de stilizat o ancora care face referinta spre un anumit site.
Acest tip de selectare este destul de rigida, dar uneori se poate de folosit.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

12. CSS Selector [href*="foo"]
a[href*="google"] { 
  color: olive;
}
Este asemanator cu selectorul precedent, doar ca, va formata toate elementele pentru care exista in atribut numele descris. In exemplul nostru, va formata toate ancorele in care va gasi pentru atributul href numele "google". De notat ca este o astfel de selectare trebuie folosita cu atentie, deoarece se poate intimpla ca un link de exemplu, sa nu fie: mySubdomain.google.com ci de tipul http://mysite.com/google-page/ si in asa caz el la fel va fi stilizat, deoarece selectorul nostru este general si lui nui pasa unde gaseste cuvintul cheie in link.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

13. CSS Selector [href^="http"]
a[href^="http"] { 
   background: url(path/to/external/icon.png) no-repeat; 
   padding-left: 15px; 
}
V-ati intrebat vreodata cum unele site-uri sunt capabile sa afiseze o pictograma mica de linga link-urile externe? Sunt sigur ca ati vazut, aceste pictograme sunt un indiciu excelent ca link-ul dat ne va directiona spre un alt site. Cu ajutorul slectorului [href^="http"] acest lucru este o floare la ureche :). Este cel mai frecvent utilizat pentru a desemna inceputul unui sir. Daca dorim sa vizam toate ancorele HTML care au un atribut href, al carui valoare se incepe cu http, atunci e posibil de realizat in exemplul de mai sus.

Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

14. CSS Selector [href$=".jpg"] 
a[href$=".jpg"] { 
    color: red; 
}
Acum, si daca dorim sa selectam sfirsitul unui sir(lucru foarte util atunci cind dorim sa stilizam imaginile de pe o pagina)? Ei bine pentru acest caz avem la dispozitie selectorul $ care ne face referinta la sfirsitul sirului dintr-un atribut. In exemplu se vor formata toate ancorele care sunt legate la o imagine .jpg.
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

15. CSS Selectors [data-*="foo"]
a[data-filetype="image"] { 
    color: red; 
}
Dar daca dorim sa selectam toate tipurile de imagini? Am putea sa folosim selctorul din punctul 14:
a[href$=".jpg"], 
a[href$=".jpeg"], 
a[href$=".png"], 
a[href$=".gif"] { 
        color: red; 
} 
Insa nu este foarte comod acest tip de selectare, si ne complica destul de mult codul CSS. O solutie mai convenabila ar fi sa folosim atribute personalizate, cum ar fi sa adaugam atributul nostru data-filetype pentru fiecare ancora care ne indica un link catre o imagine
<a href="path/to/myImage.jpg" data-filetype="image"> Image Link </a> 
Apoi, avind acest atribut, putem sa folosim o regula care sa vizeze doar acele ancore
a[data-filetype="image"] { 
    color: red; 
}
Browser Compatibility

• IE 7+
• Firefox
• Google Chrome
• Safari
• Opera

Articol preluat si tradus de aici

CSS Faux Columns

Una dintre intrebarile frecvente pe care si-o pun multe persoane incepetori in domeniul WEB Design este:
Cum de facut coloane extensibile cu ajutorul CSS astfel incit sa aiba o inaltime fixata dar sa se duca in jos odata cu marirea continutului. Este un concept destul de simplu, cu care multi dintre cititori sunt deja familiarizati, dar, pentru cei care inca nu stiu, acest truc se poate dovedi foarte util.

Internet Explorer si CSS box model

Una dintre diferentele dintre Internet Explorer si standartele de conformare a Web browserelor ce creeaza o serie de probleme incepatorilor CSS este CSS Box Model. Deoarece CSS box model este modul cum  browserele calculeaza asezarea in pagina si lungime, inaltimea un HTML element in pagina, este un pic mai usor de inteles de ce diferite browsere afiseaza diferit acelasi element ceea ce creaza frustrari si confuzii.
Cum functioneaza principiul CSS Box Model am explicat intr-o postare anterioara, dar totusi simt nevoia sa descriu su care sunt principiile dupa care Internet Explorer calculeaza afisarea in pagina.
Diagrama CSS Box Model
Mai jos este o simpla diagrama care demonstreaza cum dimensiunile unui element sunt interpretate in CSS:

Pentru a simplifica problemele accesate in aceasta postare vom considera ca proprietatea margin este interpretata de toate browserele in acelasi mod, si ne vom axa mai mult pe proprietatile  padding si border.












Dupa criteriile W3C, CSS box model la nivel: block level lungimea totala a unui HTML element in pagina se calculeaza dupa formula:

total width = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

Acelasi concept de calculare se foloseste si pentru inaltime dar, de dragul pastrarii simplitatii nu ma voi opri la el.
IE Box Model
Modul de calculare la IE Box Model este similar cu cel de la W3C dar exista o importanta diferenta: padding si border nu sunt incluse in formula de calcul.

total width = margin-left + width + margin-right

Acest lucru semnifica ca daca elementelul HTML are si padding orizontal si/sau border-e suprafata se va micsora pentru a face loc acestor padding-uri si border-e.
Cum de rezolvat problema?
1. Evitarea situatiilor care cauzeaza problema
Acesta este modul meu preferat pentru rezolvarea problemei. Simplu, evit sa specific ambele proprietati width si padding sau border pentru acelasi HTML element. Acest lucru ne asigura ca toate browserele vor utiliza aceiasi lungime totala indiferent de box modelul pe care il folosesc.
Iata un exemplu al rezolvarii problemei prin metoda descrisa mai sus:
HTML Exemplu
<div id="news">
    <h2>News</h2>
    <ul>
        <li>
            <h3>Articol numarul 1</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
        <li>
            <h3>Articol numarul 2</h3>
            <p>Lorem ipsum dolor sit amet</p>
        </li>
     </ul>
</div>
Pentru a face ca HTML lista aiba 250px width, border 1px, padding 10px, e nevoie de urmatorul cod CSS:
#news {
    padding:10px;
    border:1px solid;
    width:228px;
}
In browserele standarte, width total va fi 250px (1px border stinga, + 10px padding stinga  + width + 10px padding dreapta + 1px border dreapta). In IE 5.5 si versiunile mai vechi lungimea totala a blocului va fi doar 228px deoarece nu se adauga paddings si borders.
Deci cum se poate de evitat acest lucru? Se poate de pus div-ul cu id-ul news in alt container, in exemplul nostru sub forma de bloc lateral:
<div id="sidebar">
    <div id="news">
        ...
    </div>
</div>
In asa mod se poate de dat width la blocul sidebar:
#sidebar {width:250px}
#news {
    padding:10px;
    border:1px solid;
}
Deoarece #news este un element de tip block level, automat se va intinde pe  intreaga latime a elementului parinte, in cazul nostru #sidebar.

CSS Tip Nr. 1. Resetarea stilurilor cu CSS Reset

Aceasta este prima parte din seria de articole mentionate in postarea precedenta, in care voi vorbi despre sfaturi si practici in CSS care va vor ajuta la optimizarea lucrului.
Astazi, o sa ating tema resetarii stilurilor CSS. Resetarea stilurilor CSS, denumit in mod obisnuit CSS Reset sau Reset CSS  este procesul de resetare, sau mai bine zis de setare a stilurilor elementelor la o valoare initiala astfel incit sa evitam valorile implicite care le pun browserele HTML elementelor.
CSS Reset evita neconcordantele dintre browsere
De exemplu, folosim o ancora <a> in HTML document. De obicei browserele cum ar fi Firefox sau Internet Explorer afiseaza aceste ancore cu culoare albastra si subliniate. Dar, in urma cu citiva ani cineva crease un browser,nu le-a placut modul traditional de afisare a linkurilor asa ca au fcut ca ancorele sa fie de culoare rosie si fontul: bold. Daca vom folosi tehnica CSS Reset si vom alege noi valorile initiale a elementelor vom evita in asa mod surprizele neplacute pe care ni le ofera browserele prin afisarea unor linkuri de culoare rosie si fontul bold :)
Un simplu exemplu:
Cum sunt afisate paragrafele: <p> in browsere. Am plasat intr-un container div trei pargrafe carora nu le-am setat nici un stil CSS, doar containerului iam setat backgroung si border astfel ca sa fie evidentiat mai bine diferentele, priviti in imagine neconcordantele dintre 2 browsere:

Implicit, in Firefox este setat un spatiu intre primul rind al paragrafului si container. In Internet Explorer acest spatiu lipseste!
Deci, apare intrebarea: care browser afiseaza mai corect? Raspunsul: NU Conteaza! Conteaza doar faptul ca in dependenta de browser, daca nu folosim CSS Reset, pagina se va afisa in mod diferit si astfel nu mai avem cross browsing pentru pagina data. Normal, ca exemplul cu paragrafele este unul trivial, in realitate astfel de cazuri sunt mult mai multe, padding, margin, line-height si alte atribute sunt cauza pentru care pagina arata diferit de la browser la browser.

CSS reset, de unde a inceput...
Conceptul de CSS Reset a fost prima data pomenit cu mult timp in urma(pe cind inca dinozaurii traiau in Internet) de catre Andrew Krespanis intr-un articol de-al sau in care sugera de a utiliza un CSS selector universal la inceputul fisierului de stiluri pentru a selecta toate elementele si de a le atribui margin, padding: 0.
Cam asa ceva:

* {
  margin: 0;
  padding: 0;
} 

Selectorul universal (*) actioneaza ca un model, ca o expresie regulata in programare.
Astfel incit * nu este precedat de alt selector, toate margin si padding le sunt atribuite valoarea 0. Aplicind acest selector cu valorile salede mai pentru exemplul cu paragraful, o sa obtinem lichidarea spatiului dintre conatiner si paragraf.
Odata ce am scapat de spatiile neconsistente, putem sa trecem la stilizarea paragrafelor(ca sa nu ne departam de exemplu) asa cum dorim:

* { margin:0; padding:0; }
p { margin:5px 0 10px 0; } 

La scurt timp dupa Andrew Krespanis, un alt guru CSS, Eric Meyer a continuat dezvoltarea conceptului de CSS Reset pentru margins si paddings, pentru ca mai apoi sa cuprinda si line-height, font styles si list styles
Sfaturi pentru aplicarea CSS Reset
1. Incepeti prin a va decide cum, si stilurile caror elemente anume au nevoie de a fi resetate.
2. CSS Reset trebuie sa fie primul lucru pe care browserul trebuie "sa-l vada".
3. Creati un fisier CSS aparte pentru CSS Reset.
4. Evitati pe cit posibil utilizarea selectorului universal
5. Evitati redundanta stilurilor din CSS Reset si celelalte stiluri.

CSS 15 Articole - de stiut pentru incepatori. Intorducere

Urmatoarele postari pe blog vor fi 15 articole care eu am considerat ca trebuie citite si stiute de orice incepator CSS. O sa ma stradui sa le expun in decursul saptaminii viitoare. Dupa aceasta o sa ma redirectionez deja spre JavaScript si JQuery. Totusi nu o sa uit de CSS si HTML, iar daca cineva are intrebari la aceste tehnologii si nu numai, scrieti-le in comentarii, imi va face mare placere sa va ajut.
Cu timpul o sa ma stradui sa-mi sistematizez materialele postate pe blog, poate o sa trec la un domen comercial, dar aceasta cu timpul :) Pina atunci, lectura placuta, si astepta intrebarile voastre.

CSS Relative position

CSS Relative positioning  este relativ, usor de inteles :) . Daca pozitionam, relativ, un HTML element el va sta exact acolo unde-l punem. Putem atunci sa impingem relativ elementul setind punctului de start pozitia pe vertical si pe orizontal. Daca o sa setam top pozitia sa fie de 20px, atunci HTML Elementul se va pozitiona cu 20px sub pozitia initiala, setind pozitia left cu 20px, atunci elementul se va muta ai la dreapta creind un spatiu de 20px fata de pozitia de inceput. Iata si CSS exemplul:
#myBox {
  position: relative;
  left: 20px;
  top: 20px;
}

CSS Box model

Box model este o piatra de temelie a tehnologiei CSS si dicteaza cum trebuie sa fie dispuse elementele, si, intr-o anumita masura cum trebuie sa interactioneze aceste elemente intre ele. Fiecare element in pagina este considerat ca o cutie dreptunghiulara formata din continutul elementului, padding, border, si margin.

Padding este aplicat in jurul suprafetei cu continut. Daca adaugam un background unui element atunci backgroundul va fi aplicat suprafetei compusa din continut si padding. In acest mod, padding este folosit deseori pentru a crea un cadru in jurul continutului. Adaugind border unui element inseamna a aplica o linie in afara suprafetei cu cintinut si padding. Aceste linie sunt de diferite stiluri: solid, dotted, dashed.
In afara border se afla suprafata creata de margin. Margin sunt transparente si nu pot fi vazute, in general sunt folosite pentru a manipula spatiile dintre elemente.

CSS Visual formatting model.

Trei dintre cele mai importante concepte CSS pentru a intelege aceasta tehnologie sunt: floating, positioning si box model. Aceste concepte controleaza modul in care sunt vizualizate elementele pe o pagina, formind baza CSS layout. Daca sunteti familiarizati sa controlati CSS layoutul paginilor cu ajutorul HTML table o sa vi se para stranii la inceput. De fapt, majoritatea celor care activeaza in domeniul WEB au incercat sa dezvolte site-uri folosind CSS inainte ca sa inteleaga pe deplin complexitatea box model, diferenta intre absolute si relative posiotioning, si cum in realitate functioneaza float si clear in CSS. Odata ce o sa intelegeti cit de cit aceste concepte, dezvoltarea layouturilor cu ajutorul CSS o sa fie mult mai usoara.

Top 10 HTML tag-uri neutilizate. HTML Blockquote

Tagul BLOCKQUOTE este destinat pentru evidentierea citatelor lungi. Textul continut in acest tag de obicei se afiseaza ca un bloc cu margins din stinga si dreapta de aproimativ 40 px.Blockquote se poate folosi impreuna cu tagul CITE. Exemplu HTML Blockquote:

<blockquote>
        Acesta este un exemplu de citata lunga. Asa citate trebuie introduse in     tagul blockquote.
</blockquote>

Top 10 HTML tag-uri neutilizate. Optgroup

Tag-ul OPTGROUP se foloseste pentru a grupa elementele option dintr-un select (lista dropdown). Acesta element permite crearea unor liste lungi de optiuni pentru utilizatori, usureaza navigare prin optiuni si manipularea cu aceste optiuni.
Exemplu HTML optgroup :
<select>
  <optgroup label="Masini suedeze">
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
  </optgroup>
  <optgroup label="Masini germane">
    <option value="mercedes">Mercedes</option>
    <option value="audi">Audi</option>
  </optgroup>
</select>
Un pic de formatare CSS si avem un simpatic dropdown list.

Top 10 HTML tag-uri neutilizate. Fieldset & Legend

Tagul FIELDSET este utilizat pentru a grupa impreun, din punct de vedere logic, elementele intr-o forma. Cu alte cuvinte, fieldset este ca o cutie care separa elementele ce sunt incluse in el, de alte elemente sau fieldset-uri ale formei.
Tagul LEGEND este utilizat pentru putea intr-un fel da titluri sau caption fieldest-ului caruia apartine.
Atit tagul fieldset cit si legend pot, si trebuie sa fie utilizate in forme. In acest mod aceste componente de permit sa descriem si sa divizam o forma in sectiuni relevante.
Iata un exemplu de utilizare a acestor doua taguri:
<form>
  <fieldset>
    <legend>Personal Details</legend>
    <label for="firstname">First Name</label>
    <input type="text" id="firstname" />
    <label for="lastname">Last Name</label>
    <input type="text" id="lastname" />
  </fieldset>
</form>

Top 10 HTML tag-uri neutilizate. 1 HTML label tag

Tagul <LABEL>  defineste o eticheta, o legatura, pentru un element de tipul input intr-o forma. Aceasta lecatura este necesara pentru a schimba valorile formei atunci cind activam cursorul mouseului pe text. Apasind pe un cimp textual activam in acelasi timp si labelul care este legat de acest cimp. Acest lucru este valabil si pentru checkbox si radio buttons.
Label    trebuie pus in cod linga controalele relevante ale formei. Unica cerinta reala este pentru tagul <label> este atributul "for" valoarea caruia trebuie sa fie egala cu valoarea id-ului ale controlului pe care dorim sa-l legam de label. Acest lucru permite imbunatatirea uzabilitatii pentru browsere.
Iata un exemplu:
<label for="name">Your name</label>
<input type="text" id="name"/>

CSS. Cross browser inline block

In exemplul de azi o sa va arat cum de facut un bloc de imagini,  cu ajutorul CSS. Acest exemplu este cross browser, si este foarte folositor pentru cele mai diferite domenii, incepind cu afisarea unei galerii foto si terminind cu afisarea produselor dintr-un e-magazin. Ca sa fie mai pe inteles am atasat un screenshot la exemplu.

Top 10 CSS Frameworks

Pentru cei care nu stiu ce semnifica un CSS Framework iata o scurta definitie:

Un CSS Framework este o librarie care permite o mai usoara, mai standartizata stilizare a unei pagini web utilizint Cascading Style Sheets, adica CSS. Ca si frameworkurile pentru obisnuitele limbaje de programare, frameworkurile CSS contin un anumit numar de optiuni gata modelate pentru stilizarea si proiectarea web paginilor.

 Avantajele CSS Frameworks

• Problemele legate de crossbrowsing sunt reduse.
• Este foarte util pentru incepatori.
• Ne scapade erorile comune(positionare, floating), marind prin asta productivitatea designului.

Dezavantaje CSS Frameworks

• Pot exista anumite bug-uri in librarie.
• Pentru a intelege principiile unui anumit framework va fi nevoie de timp
• CSS-ul nu va fi putut oformat din punct de vedere semantic

Iata cele mai raspindite 10 CSS Frameworkuri:

CSS horizontal menu.

Cum de creat un meniu orizontal utlizind CSS si HTML liste? Nimic mai simplu, in exemplul ce urmeaza am creat un meniu orizontal destul de simpatic. Nu este nevoie de imagini pentru background sau pentru bordere. Am folosit si text-shadow pentru a stiliza textul meniului, din pacate IE se incapatineaza sa-l interpreteze, Firefox si Google Chrome il interpreteaza destul de bine. Enjoy :)

CSS Sprites

Nu stiu daca ati auzit de CSS Sprites, dar mie mi-a placut ideea asta. Sa va explic, sprite-urile in sine reprezinta niste imagini in care sunt bagate toate elementele grafice(ori majoritatea) ale unui web-site. Iata un exemplu trivial de sprite.

La ce sunt bune spriteurile? Atunci cind aveti o multime de elemente grafice, probe de background, iconite, bare, separatoare etc. este nevoie de cite un request la server pentru fiecare din aceste componente, si uneori poate sa puna in dificultate serverul datorita numarului mare de requeste-uri. Daca toate elementele grafice sunt puse intr-un singur fisier grafic, atunci se face doar o singura interpelare la server, si nu cite una pentru fiecare "particica".
Mai jos am scris un exemplu de utilizare a spriteurilor.

CSS HTML. Vertical Menu cu Submenu

Exemplul ce urmeaza este destinat celor care au nevoie sa creeze un meniu HTML cu submeniuri, formatarea CSS  este destul de simpla iar meniul in sine este de fapt o lista de linkuri cu subliste.

CSS. Unitati de masura.

CSS ne pune la dispozitie un set de unitati de masura care aproape in totalitate satisface necesitatile web-designerului.

Unitate	Descriere
%	Procentual
in	inch
cm	centimetru
mm	milimetru
em	1em este egal cu marimea fontului. De exemplu daca marimea fontului egal cu 16pt atunci 2em = 16x2pt=32pt
ex	1 ex este egal cu inaltimea x-height a unui font (x-height este egala de obicei cu 1/2 din font-size)
pt	Point. 1 pt este egala cu 1/72 inch
pc	Pica. 1 pc este egal cu 12pt
px	Pixel. 1px egal cu un punct de pe ecran

CSS. Diferenta dintre fonturi Serif si Sans-serif

Pina nu demult nu intelegeam pentru ce sunt destinate serif si sans-serif. Dupa ce am facut o cautare am gasit cea mai buna si mai succinta explicatie pe site-ul celor de la w3schools:

Serif - fonturile serif au linii la sfirsitul unelor caractere.  Exemplu: Times New Roman, Georgia

Sans-serif  - aceste fonturi spre deosebire de serif nu au aceste linii. Exemplu: Arial, Verdana


Mai este o subclasa de fonturi:
Monospace - caracterele fonturilor monospace au aceiasi lungime. Exemplu: Courier New, Lucida Console

Pentru a intelege mai bine diferentele, am atasat o imagine care ilustreaza o litera serif si una sans-serif