Arhiva pentru tagul “CSS”

Efecte CSS3 pe imagini

Am fost incitat de articolul CSS3 Image Styles de pe WebDesignerWall.com (pasionaţii de subiect sigur îl cunosc) şi m-am gândit să şi testez cât de uşoare sunt efectele prezentate acolo. Pagina lor de demonstraţie se găseşte aici (trebuie văzută!!!), dar teoretic şi la sfârşitul acestui articol, printr-un iframe, ar trebui să vedeţi un demo propriu (dacă îl vreţi în pagină nouă mergeţi aici). Adevărul e că… foarte greu mi-a ieşit. Sau foarte uşor. În prima etapă totul a mers brici până la testarea în navigatoare diferite. Şi totuşi exemplul original mergea şi în IE, al meu nu… După multe ore nu am găsit o explicaţie ci doar problema: referirea imaginilor. Când am folosit imaginile din alt director decât cel cu pagina HTML de referinţă a mers. Subliniez: mă depăşeşte problema, nu pot explica, dar cum necum a mers. Evident, în Chrome sau Firefox nu sunt …


TheExpressiveWeb.com

Că tot am vorbit în două articole recente despre HTML5, vă invit să vedeţi situl TheExpressiveWeb. La o primă privire pare un alt showcase despre cât de puternic de HTML5 şi CSS3, dar în fapt e ceva mai mult. Dacă vreţi să vă apropiaţi de noile tehnologii, e o resursă interesantă. Să o luăm cu începutul: coloana cu fundal portocaliu este… sumarul. Citez: CSS3 Animations, CSS3 Gradients, CSS3 Shadows, CSS3 Transforms, CSS3 Transitions, CSS3 Web Fonts, HTML5 Audio, HTML5 Canvas, HTML5 Forms, HTML5 Video şi HTML5 Storare. Poate se vor adăuga şi altele?

imagine

Ce avem pentru fiecare în parte? Am luat ca exemplu HTML5 Audio. Central e demonstraţia, de fiecare dată frumos prezentată vizual şi interactivă. Aici putem asculta …


Umbre cu CSS3

Articolul 12 Fun CSS Text Shadows You Can Copy and Paste propune ceea ce spune: secvenţe de cod CSS gata de folosit în proiectele Dvs. Evident, din păcate, ele merg şi nu prea merg în toate navigatoarele. De exemplu ceea ce vedeţi mai jos, inclus cu iframe (dacă vreţi să vedeţi extern respectiva pagină click aici) va da unele rateuri – al doilea exemplu ca să fiu mai exact – sub unele navigatoare. Dacă nu credeţi că este text (şi nu imagine), marcaţi cu mouse-ul şi vă veţi convinge 🙂 .

Iată şi codul pentru demonstraţia de mai sus. Am ales, şi adaptat puţin, trei dintre cele douăsprezece propuneri. Vă invit să vedeţi articolul original pentru mai multe exemple, dar mai ales pentru informaţii tehnice ajutătoare pentru cei care vor să studieze tehnica.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta …


Oglindiri cu CSS în Webkit

Un articol intitulat Mastering CSS Reflections in Webkit mi-a reţinut recent atenţia. Primul lucru care trebuie reţinut, fiind spus clar din titlu, este că efectul de reflexie merge doar în navigatoarele ce folosesc Webkit ca “motor” intern – adică navigatoarele Chrome şi Safari. Drept urmare, dacă deschideţi această pagină de test în Firefox sau Internet Explorer veţi vedea doar aceeaşi imagine replicată de trei ori. Tocmai de aceea am pus mai jos captura cu pagina încărcată în Chrome.

imagine

Acum să vedem cum se realizează efectul de oglindire. În forma cea mai simplă (prima captură), cu o singură linie: -webkit-box-reflect: below;

Dacă vrem să spaţiem puţin imaginea originală de reflexia ei, mai adăugăm un 2px …


CSS3 Generator (unul dintre multele)

Mamă ce de generatoare CSS3 există. Unul e numit chiar… CSS3 Generator şi mi s-a părut interesant pentru a-l prezenta pe scurt. După cum vedeţi din captura de mai jos, include câteva efecte, iar pentru fiecare în parte avem nişte parametrii de configurat. Automat aceste schimbări se reflectă şi în previzualizarea CSS3, şi în codul gata de folosit. Există – şi e foarte bine! – o indicaţie privitoare la navigatoarele care suportă în acest moment un anume efect.

imagine

Mai jos vedeţi un mic test în captură grafică (dacă vreţi chiar pagina, este aici – începătorii se pot uita în sursă pentru a înţelege cum se folosesc codurile furnizate de generator). Vedeţi diferenţa dintre Chrome şi Internet Explorer.


Din nou despre CSS3 (II)

Printre multele semne de carte pe care le am legate de CSS, evident că multe sunt legate de CSS3. M-aş opri acum în special la câteva, şi am să o iau din urmă, începând cu un articol din martie a.c. de pe Hongkiat: Beginner’s Guide To CSS3. Articolul porneşte cu avertismentul că CSS3 nu este încă pe deplin suportat de navigatoare, dar aceasta nu înseamnă că nu poate fi folosit. După aceasta oferă o serie de linkuri de explorat, grupate astfel: Getting Started With CSS3, Background And Borders, Text, Menu, Drop Shadow, Buttons, Transparency and Overlay, încheind cu Cheatsheets & References.

imagine

Selecţia este foarte bună şi cei interesaţi de subiect o vor aprecia. Dacă până la CSS3 vreţi să …


HTML şi jQuery: bifarea opţiunilor

Am văzut recent aici şi cum am nevoie de chestionare online pentru un proiect (secret momentan 😉 ) m-am gândit să văd cât de uşor se poare replica sistemul de bifare a opţiunilor. Şi adevărul e că… nu e greu. Mai jos vedeţi deja în acţiune ceea ce şi mai jos va fi ca şi cod. De ce avem deci nevoie? De o clasă pentru div-urile ce includ opţiunile. Această clasă trebuie să aibă desigur şi o variantă pentru mouse over. Iar după ce am dat click, opţiunea trebuie să apară vizual ca bifată: vom folosi o altă clasă, similară dar cu elementele vizuale necesare ca să se vadă bifarea. Apropo: am exclus din start folosirea checkbox-urilor din HTML, precum şi a versiunilor grafice modificate, chiar şi cu pluginuri jQuery.

OK, am văzut, acum codul! Practic cele mai multe linii sunt dedicate CSS-ului. De dragul esteticii …


CSS poate scuti de Photoshop

Ca unul care când e vorba de CSS mă pricep cât să îmi formatez elementar ceea ce îmi trebuie (de la culori la margini, spaţiere, tipuri de caracter şi altele), fără să stăpânesc tehnici avansate, mă bucur şi fac “uau” când văd efecte frumoase realizate din doar câteva linii. Aşa că am scos un nou “uau” astăzi văzând articolul Quick Tip: Don’t Always Jump Back to Photoshop. Despre ce este vorba în articol? Se porneşte de la primul grafic, un PNG bun pentru un buton gen “citiţi mai departe”. Cele trei care urmează mai jos nu sunt realizate cu vreun editor grafic. Mda. Ci via CSS (evident, eu am pus capturi).

imagine

În tutorialul pe care în formă …


Sencha Animator

Că CSS3 (ca HTML5) e foarte promiţător ştim cu toţii. Animaţii ce ţineau de flash pot fi acum implementate cu CSS3. Şi poate tocmai de aceea ne vom trezi în timp cu tot felul de… programe care generează cod HTML. În timp ce nu am testat personal, doresc să vă semnalez Sencha Animator. Programul se prezintă astfel (permiteţi-mi să nu mai traduc): a powerful desktop application to create awesome CSS3 animations for WebKit browsers and touchscreen mobile devices. Make your static content come to life quickly and easily, without the dependency of third-party plugins or writing a single line of CSS code. In no time at all, you’ll be creating rich experiences for today’s most popular devices.

imagine


Din nou despre CSS3

Dacă săptămâna aceasta au fost mai multe materiale ce au pomenit HTML5 de ce să nu amintim puţin şi de CSS3? De exemplu CSS3 Click Chart by Impressive Webs oferă compactat o serie de demonstraţii legate de teribilul CSS3 care încă mai trebuie să “vină” pe toate navigatoarele, şi – dacă se poate – cu diferenţe minime de implementare. Dacă folosiţi ultimele versiuni de Chrome, Firefox sau Safari nu ar trebui să aveţi probleme cu vizualizarea exemplelor. Umbre, colţuri rotunjite, coloane, gradiente, reflecţii, fundaluri multiple, rotiri, scalări şi altele, toate posibile doar din CSS3, fără JavaScript! Tare… merită să vedeţi şi…

imagine

… să învăţaţi cum se face! După cum se vede din captură, fiecare demonstraţie are un semn de întrebare asociat. …