E-learn.ro
Panou utilizatori
Utilizator Parola
Creeaza cont nou    Recupereaza parola
Login
Newsletter
Introdu adresa ta de email
Inscrie-te
Inchide panoul de utilizatori
Add to Google

Tutoriale CSS

Descarca toolbar

Toolbar E-learn.ro Facebook Twitter

WEB DESIGN  /  CSS  /  Diverse (5)

Out of the box

22.04.2008
Out of the box

Este adevarat ca CSS se bazeaza foarte mult pe grid-uri - totul urmeaza coordonate xy, dar asta nu inseamna ca designul este neinteresant. Daca intelegi cum functioneaza un grid poti sa fragmentezi sau sa abstractizezi pentru a face layout-ul mai dinamic si mai interesant.

Total vizualizari: 12050 12050 afisari   |   Comentarii  0   |   Rating   |   (8 voturi)   |   Timp necesar: 30 min 30 min   |   Nivel de cunostiinte necesar: Incepator  Incepator

Sursa:  Sitepoint.com  
Autor:  E-learn.ro
Adauga la tutoriale favorit Adauga la tutoriale favorite
Pagina:
« 123 4 567 »
comenteaza printeaza



Pe langa setarea tipurilor de formatari, am si ajustat spatierea pentru a crea mai mult spatiu. Zona de jos a paginii are inaltimea de 192px (nu numai pentru conformitate dar pentru ca arata mai bine). Elementului img i s-au dat margini negative astfel incat padding-ul si marginile se vor extinde inafara granitelor, aliniandu-se mai frumos.

Out of the box - img5


Deocamdata designul este plicticos.

Impartirea grid-ului
Daca sti sa imparti cum trebuie un grid, designul poate deveni foarte energetic. Pentru a imparti gridul corect trebuie sa ti cont de proportii. Am imparit coloanele si mutand obiectele putin inafara marginilor. Pentru acest exemplu putem folosi o imagine decalata si sa aplicam o margine in stanga continutului principal (pentru a obtine mai mult spatiu alb).

Out of the box - img6


Rezultatul de mai sus este usor de obtinut folosind o margine negativa.

#content-primary {
float: right;
margin: 12px 24px 60px 24px;
width: 528px;
}
#content-primary img {
float: left;
margin: -6px 18px 0 -114px;
padding: 3px;
border: 3px solid #eee;
background: #fff;
}
#content-secondary {
float: right;
margin: 30px 216px 60px 24px;
width: 144px;
font-size: 11px;
color: #300;
}

Mai intai am aplicat cateva reguli de formatare care exista numai din ratiuni de estetica - poti decide sa sari peste acest pas. Am vrut ca liniile inferioare ale coloanelor sa se alinieze cum trebuie. Pentru a face asta am ajustat marginile de sus ale #content-primary si #content-secondary pana cand liniile de jos s-au aliniat asa cum am intentionat. Apoi am setat marginea mai mare (de 60px) la baza celor doua coloane.

Mai departe, am redus latimea #content-primary ca in imaginea cu wireframe. Acum putem da imaginii o margine negativa de 114px, ceea ce va permite imaginii sa se extinda pana la jumatatea marginii.

Din moment ce am facut #content-primary mai mic, trebuie sa ii dam lui #content-secondary o margine de dreapta mai mare astfel incat sa stea in stanga. Am extins si granita h1 in margine pentru a crea un echilibru.

h1 {
margin-bottom: 11px;
margin-left: -108px;
padding: 15px 0 21px 108px;
border-bottom: 1px solid #ccc;
font: normal italic 1.5em/18px Georgia, serif;
color: #633;
}

Padding-ul din stanga a fost setat sa egaleze marginea negativa, astfel incat textul sa ramana pe loc, dar marginea sa se extinda.
O alta tehnica pe care o poti folosi pentru a scapa de infatisarea grosolana este de a aplica o imagine de fundal ornamentala care se poate extinde si ea in margini. Cream aceasta infatisare folosind cam aceeasi abordare ca mai sus:

h2 {
margin-left: -204px;
padding: 10px 0 20px 204px;
background: url(h2_ornament.gif) 3px 0 no-repeat;
font-size: 1.25em;
text-transform: uppercase;
color: #999;
}

Out of the box - img7

Pagina:
« 123 4 567 »
comenteaza printeaza
Alte tutoriale CSS:
Noteaza acest tutorial
Rating tutorial
 
(8 voturi)
Pentru a nota acest tutorial, trebuie sa fii logat!
Posteaza un comentariu
Pentru a posta un comentariu, trebuie sa fii logat!
0 TOP UTILIZATORI* 0 0
Tutoriale scrise de claibornelara
claibornelara Rang utilizator claibornelara - Incepator
4320
Tutoriale scrise de mcuemica
mcuemica Rang utilizator mcuemica - Incepator
4185
Tutoriale scrise de ellarichards
ellarichards Rang utilizator ellarichards - Incepator
4170
Tutoriale scrise de kheops
kheops Rang utilizator kheops - Mediu
4084
Tutoriale scrise de emonclercheap
emonclercheap Rang utilizator emonclercheap - Incepator
4005
* Acest top reprezinta punctajele acumulate in ultimele 30 de zile.
Vista Lightroom RoR Powerpoint SWF XML Action Script PSD Dreamweaver Photoshop Outlook Verilog XHTML AJAX Excel SEO HTML Illustrator Swift 3D PHP CSS JSON Gimp Flash Word Javascript Python Sony Vegas StyleSheet Ruby on Rails Java Fotografie Fireworks Bridge MySQL COREL DRAW
Promovare:
Daca faci parte din comunitatea E-learn.ro si doresti promovarea acesteia, poti accesa pagina de promovare.
Arhiva newsletter:
Daca ai ratat un numar mai vechi, sau vrei sa revezi care au fost noutatile E-learn.ro la un moment dat, poti accesa arhiva de newslettere.
  Copyright © 2008-2013 E-LEARN.ro. Toate drepturile rezervate. Termeni si conditii.
Conceput si realizat de Neokinetics Software