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. HTML cite

Tagul  CITE se foloseste pentru marca o citata sau o referinta catre alt material informativ. In general cuvintele continute in cite sunt stilizate de browser ca italic, iar la tinerea cursorului deasupra cuvintelor citate se va afisa un tooltip cu continutul textual care a fost scris in atributul title a acestui tag. Mai jos traditional gasiti un exemplu HTML care arata cum se poate de folosit CITE:

Urmatoarele cuvinte <cite title="Afirmatie facuta de pseudomus! 25 Septembrie 2010">sunt folosite</cite> pentru a demonstra ca cite exista!

Top 10 HTML tag-uri neutilizate. HTML dl

Tagul DL defineste o lista de definitii. Practic, dl  se foloseste impreuna cu dt care defineste un element in lista si cu dd care descrie elementul definit in lista. Acest lucru face tagul dl foarte util pentru foarte multe probleme cum ar fi: dictionare stilizate sub forma de liste, detalii de contacte etc.
Exemplu HTML dl:
<dl>
  <dt>Email</dt>
  <dd>email@test.com</dd>
  <dt>Location</dt>
  <dd>Here</dd>
  <dt>Phone</dt>
  <dd>+0123123123</dd>
  <dt>Skype</dt>
  <dd>myname</dd>
</dl>


Este o forma de prezentare a datelor de contact.

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"/>

Top 10 HTML tag-uri neutilizate. Avancronica.

Toata lumea discuta din domeniul Web Programming & Design este preocupata la moment cu implementarea  HTML 5 si CSS 3 in in web aplicatiile lor. Dar multi dintre acestia, printre care si eu pina nu demult, nu foloseau nici macar tot arsenalul pus la dispozitie de W3C, adica, exista o serie de taguri HTML care au un rol destul de important in crearea layoutului unei web aplicatii, dar care intr-un fel sunt "subesctimate" de developer. In postarile urmatoare o sa scriu despre 10 tag-uri care nu sunt folosite la potentialul maxim, care intradevar ar face mai corect codul HTML din punct de vedere semantic, situl mai utilizabil, si in general ar face totul mai usor atit pentru developeri cit si pentru utilizatorul final.

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
 

Ofer servicii machetare (X)HTML + CSS.

M-am gindit ca odata ce ma ocup cu machetarea designelor de site ce ulterior sunt puse pe CMS (Content Management Systems), de ce sa nu fac un anunt si pe blog, precis ca inca nu il citeste nimeni, dar , cu timpul Google o sa indexeze aceasta postare si atunci poate cineva o sa aiba nevoie de servicii de machetare HTML.
Cum este procesul: imi scriti in comentarii ca doriti sa va efecutiez machetarea designului, si eu va dau datele de contact. De la Dstra se cere designul in format .PSD (de dorit), iar eu la final va intorc 2 fisiere , primul .HTML altul cu stilurile CSS plus o mapa cu imaginile decupate din design care mi-au servit la machetare.

Despre HTML table. Exemplu CSS. Calendar

Nu stiu cum altii dar eu de la <table> am un pic de frica :) Nu atunci cind il folosesc in mod traditional pentru reprezentarea unor date de exemplu, dar atunci cind este nevoie de un tabel complex cu multe rinduri,coloane, celule care nu sunt simetrice etc. Atunci din cauza numarului mare de tag-uri <tr>, <td> e un pic dificil de descurcat codul. Din fericire cei de la W3C au venit in ajutorul nostru cu un set de taguri si atribute ajutatoare.
Tag-ul <caption> si atributul summary sunt folosite in head-ul tabelelor, nu sunt obligatorii dar sunt de mare ajutor uneori, eu le-am folosit in exemplul ce urmeaza pentru a arata luna curenta in cadrul calendarului.
Alte taguri sunt <thead>, <tbody> si <tfoot> la fel nu sunt obligatorii dar ajuta mult la divizarea tabelului in cap, corp si subsol din punct de vedere logic. E posibil de folosit doar o singura data thead si tfoot iar tbody de cite ori doriti.
Folosind <tr> putem organiza formatarea rindurilor dintr-un tabel, dar de multe ori e nevoie de formatat anumite coloane, HTML ne pune la dispozitie doua taguri: <colgroup> si <col>, din pacate nu toate browserele "inteleg" aceste taguri.
Pentru a vedea intr-un exemplu practic cum pot fi implementate aceste taguri, mai jos o sa va arat un exemplu de calendar dintr-un tutorial.
Codul HTML
 <table class="calendar" summary="Calendar Date Picker">
        <caption>
            <a href="#" rel="prev">&lt;</a> Septembrie 2010
            <a href="#" rel="next">&gt;</a>
        </caption>
        <colgroup>
            <col id="lun"/>
            <col id="mar"/>
            <col id="mie"/>
            <col id="joi"/>
            <col id="vin"/>
            <col id="sim"/>
            <col id="dum"/>
        </colgroup>
        <thead>
            <tr>
                <th scope="col">Lun</th>
                <th scope="col">Mar</th>
                <th scope="col">Mie</th>
                <th scope="col">Joi</th>
                <th scope="col">Vin</th>
                <th scope="col">Sim</th>
                <th scope="col">Dum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td class="null">30</td>
                <td class="null">31</td>
                <td><a href="#">1</a></td>
                <td><a href="#">2</a></td>
                <td><a href="#">3</a></td>
                <td><a href="#">4</a></td>
                <td><a href="#">5</a></td>
            </tr>
            <tr>
                <td><a href="#">6</a></td>
                <td><a href="#">7</a></td>
                <td><a href="#">8</a></td>
                <td><a href="#">9</a></td>
                <td class="selected"><a href="#">10</a></td>
                <td><a href="#">11</a></td>
                <td><a href="#">12</a></td>
            </tr>
            <tr>
                <td><a href="#">13</a></td>
                <td><a href="#">14</a></td>
                <td><a href="#">15</a></td>
                <td><a href="#">16</a></td>
                <td><a href="#">17</a></td>
                <td><a href="#">18</a></td>
                <td><a href="#">19</a></td>
            </tr>
            <tr>
                <td><a href="#">20</a></td>
                <td><a href="#">21</a></td>
                <td><a href="#">22</a></td>
                <td><a href="#">23</a></td>
                <td><a href="#">24</a></td>
                <td><a href="#">25</a></td>
                <td><a href="#">26</a></td>
            </tr>
            <tr>
                <td><a href="#">27</a></td>
                <td><a href="#">28</a></td>
                <td><a href="#">29</a></td>
                <td><a href="#">30</a></td>
                <td class="null">1</td>
                <td class="null">2</td>
                <td class="null">3</td>
            </tr>
        </tbody>
    </table>


Codul CSS
table.calendar{
    border-collapse:separate;
    border-spacing:0;
    border:0;
    text-align:center;
    color:#333;
}
.calendar th, .calendar td{
    margin:0;
    padding:0;
}
.calendar caption{
    font-size:1.25em;
    padding-top:0.692em;
    padding-bottom:0.692em;
    background-color:#d4dde6;
}
.calendar caption[rel="prev"]{
    float:left;
    margin-left:0.2em;
}
.calendar caption[rel="next"]{
    float:right;
    margin-right:0.2em;
}
.calendar caption a{
     color:#333;
     text-decoration:none;
     font-weight:bold;
}
.calendar caption a:hover,
.calendar caption a:active,
.calendar caption a:focus{
    background-color:#6d8ab7;
  
}
.calendar thead th{
    background-color:#d4dde6;
    border-bottom:solid 1px #a9bacb;
    font-size:0.875em;
}
.calendar tbody {
    color:#a4a4a4;
    text-shadow: 1px 1px 1px white;
    background-color:#d0d9e2;
}
.calendar tbody td{
    border-top:solid 1px #e0e0e1;
    border-right:solid 1px #9f9fa1;
    border-bottom:solid 1px #acacad;
    border-left:solid 1px #dfdfe0;
}
.calendar tbody a{
    display:block;
    text-decoration:none;
    color:#333;
    background-color:#c0c8d2;
    font-weight:bold;
    padding:0.385em 0.692em 0.308em 0.692em;
}
.calendar tbody a:hover,
.calendar tbody a:focus,
.calendar tbody a:active,
.calendar tbody .selected a:link,
.calendar tbody .selected a:visited,
.calendar tbody .selected a:hover,
.calendar tbody .selected a:focus,
.calendar tbody .selected a:active{
    background-color:#6d8ab7;
    color:white;
    text-shadow: 1px 1px 1px #22456b;
}
.calendar tboby td:hover,
.calendar tbody td.selected{
  border-top: 1px solid #2a3647;
  border-right: 1px solid #465977;
  border-bottom: 1px solid #576e92;
  border-left: 1px solid #466080;
}

Codul CSS cit si HTML este un pic mai complicat decit in exemplele precedente, dar daca o sa-l aplicati in practica o sa aveti un Calendar Date Picker de toata frumusetea :)
Iata ce mi s-a primit mie:

CSS. Paginare

Zilele trecute aveam nevoie sa stilizez paginarea unui site, si am gasit intr-un tutorial o metoda simpla care prin intermediului unei liste <ol> si CSS putem forma o paginare destul de simpatica. Iata exemplul:
Codul HTML

<ol class="pagination">
      <li><a href="prev.html" rel="prev">Prev</a></li>
      <li><a href="1.html">1</a></li>
      <li><a href="2.html">2</a></li>
      <li><a href="3.html">3</a></li>
      <li><a href="4.html">4</a></li>
      <li><a href="5.html">5</a></li>
      <li><a href="next.html" rel="next">Next</a></li>
</ol>


Codul CSS

ol.pagination{
    margin:0;
    padding:0;
    list-style-type:none;
}
ol.pagination li{
    float:left;
    margin-right:0.6em;
}
ol.pagination a,
ol.pagination li.selected{
    display:block;
    padding:0.2em 0.5em;
    border:solid 1px #ccc;
    text-decoration:none;
}
ol.pagination a:hover,
ol.pagination a:focus,
ol.pagination li.selected{
    background-color:#A4BFEF;
    color:white;
}
ol.pagination a[rel="prev"],
ol.pagination a[rel="next"]{
    border:none;
}
ol.pagination a[rel="prev"]:before{
    content:"\00AB";
    padding-right:0.5em;
}
ol.pagination a[rel="next"]:after{
    content:"\00BB";
    padding-right:0.5em;
}

De notat ca "\00AB" si "\00BB" din CSS corespunde << si >> care sunt alaturi de Prev si Next din paginare.
Iata ce s-a primit la mine:

CSS. Vertical navigation bar.

In exemplul de mai jos o sa demonstrez cum se poate de creat un meniu vertical utilizind doar CSS. Este un exemplu foarte util si destul de simplu dar care pentru un machetator simplifica mult lucrul. Deci exemplul:
Codul HTML
<ul class="nav">
            <li><a href="">Home</a></li>
            <li><a href="">About Us</a></li>
            <li><a href="">Who Is</a></li>
            <li><a href="">We are</a></li>
            <li><a href="">Contacts</a></li>
            <li><a href="">Last Option</a></li>
        </ul>

Codul CSS
ul.nav{
    margin:0;
    padding:0;
    list-style-type: none;
    width:8em;
    background-color:#8bd400;
    border:solid 1px #486B02;
}
ul.nav a{
    display:block;
    color:#2b3f00;
    text-decoration:none;
    border-top:solid 1px #E4ffd3;
    border-bottom:solid 1px #486B02;
    padding:0.3em 1em;
}
ul.nav a:hover,
ul.nav a:focus
ul.nav .selected a{
    color:#e4ffd3;
    background-color:#6da203;
}


In rezultat avem un meniu vertical foarte simpatic folosind doar CSS si o lista HTML, l-am testat pentru versiunile de IE7, Firefox, Chrome, merge. Enjoy :)

CSS3. Box Shadow.

Iata ca a venit rindul urmatorului truc pe care vreau sa-l descriu si anume umbra la diferite blocuri sau imagin etc. Este foarte des intilnit pe site-uri iluzia de umbra la anumite componente, de cele mai multe ori machetatorii creaza aceasta iluzie cu ajutorul imaginilor taiate din design, CSS3 permite crearea acestui lucru prin intermediul proprietatii box-shadow. In urmatorul exemplu o sa demonstrez cum se poate de aplicat aceasta proprietate.
Iata ce se doreste ca rezultat final:
















Codul HTML
<img src="images/1raul.jpg" id="css3"/>


Codul CSS
#css3{
    -webkit-box-shadow: 3px 3px 6px #666;
    -moz-box-shadow: 3px 3px 6px #666;
    box-shadow: 3px 3px 6px #666;
    padding:4px;
    border:solid 1px #a9a9a9;
}
Iata cum se poate de adaugat efectul de umbra prin intermediul CSS3. De mentionat, NU lucreaza la moment pentru IE 6, IE 7...

CSS. Rounded Corners. Partea I

In acest post o sa va descriu cum am facut ca un bloc sa aiba colturile rotungite, asa cum e la moda in spatiul Web. In imagine se vede mai clar care este "produsul" final.










Tin sa va zic ca sunt mai multe modalitati de a face acest lucru, eu l-am facut in felul urmator:
In primul rind am taiat un footer si un header de la blocul din design. care contine partea de sus si partea de jos a colturilor, cam asa ceva:





Restul este facut in cod:

Codul HTML
<div id="container">
        <h2>Lorem ipsum Header</h2>
        <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
        nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit
        lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in
        hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu
        feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim
        qui blandit praesent luptatum zzril delenit augue duis dolore te feugait
        nulla facilisi.</p>
    </div>


Codul CSS
 #container{
    width:530px;
    background:url('images/round-foot.gif') no-repeat bottom left;
    padding-bottom:1px;
}

#container h2{
    background: url('images/round.gif') no-repeat top left;
    text-align:center;
    margin:0;
    padding:0;
}
#container p{
    padding:10px 20px 20px 20px;
    margin-top:0;
    margin-left:2px;
    background-color:#4F96ED;
}
In postul urmator o sa descriu cum am facut un bloc "rounded corners" care se intinde pe orizontala.