Cautare in site

Blog

Articole din categoria CSS

Unitatile de masura in CSS

Unitatile de masura in CSS

Pentru a defini proprietatile in CSS, cum sunt: width, margin, padding, font-size, border-width, etc se folosesc diferite unitati de masura. Acestea pot fi absolute (ex: px) sau relative (ex: em). Mai jos detaliem cum se calculeaza fiecare si care sunt avantajele pentru adaptarea la rezolutia ecranului dispozitivului. Cea mai cunoscuta unitate de masura in CSS [...]
CSS3 FlexBox

CSS3 FlexBox

Ce este Flexbox Este un model de layout in CSS3. Are scopul de a oferi un mod mai eficient pentru realizarea layout-urilor web, de a alinia si distribui spatiul intre elemente inauntrul unui container chiar si atunci cand dimensiunea nu este cunoscuta sau este dinamica. Intr-un layout construit cu flexbox proprietatile elementelor (largime, inaltime, ordine [...]
Introducere la Bootstrap

Introducere la Bootstrap

Framwevork-ul dezvoltat initial de Twitter permite realizarea de site-uri web responsive, care se adapteaza la orice rezolutie de dispozitiv: desktop, tablete si telefoane mobile. Versiunea stabila este momentan 3; versiunea 4 a Bootstrap se afla in faza de testare. Este in momentul de fata cel mai utilizat framework pentru dezvoltarea interfetelor web responsive devenind foarte […]

Site-uri web Responsive vs. site-uri web Mobile

Site-uri web Responsive vs. site-uri web Mobile

In ultimii ani am asistat la un boom in ceea ce priveste utilizarea dispozitivelor (smartphone, tablet) pentru navigarea pe internet. Recunoscand acest trend, dezvoltatorii s-au axat initial pe realizarea site-urilor dedicate pentru telefoanele mobile. Succesiv s-a trecut la realizarea site-urilor web care se adapteaza la orice rezolutie de ecran si anume site-urile web responsive. In […]

Meniu de navigare Spry cu Dreamweaver

In acest tutorial video vom vedea cum putem insera imagini intr-un meniu Spry in Adobe Dreamweaver. Versiune Dreamweaver Pentru realizarea tutorialului a fost folosita versinea CS6 a programului Dreamweaver. In vesiunea succesiva a programului elemntele Spry au fost inlocute cu elementele jQuery User Interface pentru meniu de tip dropdown, iar acest tip de meniu Spry […]

Galerie de imagini cu tranzitii CSS 3 in Dreamweaver

Tutorial video creare galerie de imagini cu tranzitiile CSS In acest tutorial video vom vedea cum putem crea o galerie de imagini personalizata 100% pentru site-ul nostru web. O vom crea in mod foarte simplu utilizand tranzitiile CSS3 pe care ni le pune la dispozitie programul Adobe Dreamweaver. Ce sunt tranzitiile CSS Tranzitiile CSS cuprind […]

Galerie de imagini JavaScript Lightbox

Plugin pentru galerie de imagini In acest tutorial video vom vedea cum sa realizam o galerie de imagini utilizand plugin-ul javascript Lightbox. Acesta este unul dintre plugin-urile gratuite (open source) cele mai utilizate pentru realizarea galeriilor de imagini pentru web si poate fi descarcat direct de pe site-ul web al producatorului: Lokesh Dhakar. In dosarul […]

Imagine de fundal pe tot ecranul

Imagine de fundal fullsize cu CSS In acest tutorial vom vedea cel mai simplu mod in care putem seta o imagine de fundal site-ului nostru care sa ocupe tot ecranul. Imagine care se va adapta intotdeauna rezolutiei browser-ului pe care este vizualizat site-ul. Pentru a pune in practica acest lucru vom gasi pe internet nenumarate […]

Introducere la SASS CSS

Introducere la SASS CSS

Ce este SASS? Este un pre-procesor CSS (extensie CSS) care permite utilizarea unui limbaj mult mai puternic si inteligent decat simplul CSS. Odata ce este compilat acesta va genera fisierul CSS care va putea fi folosit pentru aplicatia web in mod normal. Alternativele la Sass sunt: Less si Stylus si acestea fiind utilizate pentru acelasi scop. SASS […]

Pseudo-elementele si pseudo-clasele in CSS

Pseudo-elementele si pseudo-clasele in CSS

Cu ajutorul regulilor de stil CSS putem defini si acele elemente care nu se regasesc efectiv in codul paginii. Pentru acest scop putem folosi pseudo-elementele. In schimb pentru formatarea fazelor unui element existent vom folosi pseudo-clasele. Vom incepe analiza noastra cu pseudo-elementele pentru ca apoi sa vedem diferentele dintre acestea si pseudo-clasele prevazute in standardul […]

Personalizarea culorii de selectie cu CSS

Personalizarea culorii de selectie cu CSS

De default culoarea de selectie in browser a continutului unei pagini web este acest albastru deschis din imaginea de mai jos. Daca vrem sa personalizam aceasta culoare pentru site-ul nostru web putem folosi declaratia CSS ::selection in care specificam noua culoare, ca mai jos: ::selection {background:#57d2fb;} ::-moz-selection {background:#57d2fb;} Culoarea pe care o dam selectiei este […]

Efect hover imagini cu tranzitii CSS 3 in Dreamweaver

In acest tutorial vom vedea cum putem crea un efect interesant de hover gradual asupra imaginilor utilizand tranzitiile CSS3. Pentru scrierea tranzitiilor vom folosi programul Adobe Dreamweaver. Ce sunt tranzitiile CSS 3 Tranzitiile sunt efecte care permit trecerea graduala a elementelor din pagina web de la o formatare la o alta, de la un set […]