Arhiva pentru tagul “CSS”

GenerateCSS: Pentru noi… cei leneşi

Ei, glumesc. Doar pentru că vă consideraţi harnic nu ignoraţi acest proiect. GenerateCSS este un proiect care merită reţinut, pus un semn de carte ceva, să fie uşor de regăsit, pentru că ne economiseşte mult timp. Începătorii dar şi avansaţii vor fi bucuroşi de acest loc centralizat unde poţi „găti” codul necesar pentru efecte pe text/imagini, pentru meniuri, butoane, boxe, gradienţi şi tot felul. Parcurgeţi prima pagină pentru o bună privire de ansamblu asupra ofertei bogate a sitului.

imagine

Cât priveşte utilizarea, este uşoară: alegeţi ceva de acolo, parcurgeţi eventual paşii de configurare (culori, linkuri, dimensiuni…) iar la final luaţi codul CSS şi HTML. Desigur, în codul CSS totul e prefixat cu „generatecssdotcome”, dar cu un replace se rezolvă. La fel referinţa …


Fonturi cu iconiţe: crearea lor online (V)

Fonturile cu iconiţe sunt la modă acum şi nu pe nedrept: sunt de mare ajutor pentru webmasteri. Hai că de mult nu am mai spus aceasta :). Am prezentat patru soluţii şi astăzi vă mai propun două. Şi gata. Până când nu dau de altele. O să începem cu Fontello.com, care reciclează ideea şi fonturi din soluţii anterioare. Avem câteva fonturi disponibile (putem adăuga SVG-uri proprii sau fonturi bazate pe SVG-uri), după care putem configura numele (cele implicite sunt oricum utile), eventual mai vezi diversele configurări posibile şi descarci webfontul.

imagine

În fine, ar fi de notat şi FontCustom, dar care nu este tocmai o soluţie online ci offline de creare. În plus eu nu văd decât indicaţii pentru OS X …


S/2: Efecte CSS3, pluginuri jQuery, gradienţi

Sunt proiecte care îmi scot un „uau” gigantic, iar iHover intră fără dubii la această categorie. Desigur, totul este să ai unde să foloseşti astfel de efecte, dar dacă sunteţi webmaster şi preţuiţi factorul estetic, veţi găsi pe la galerii sau undeva să implementaţi aceste minunate efecte care se reduc la CSS3. Aveţi doar grijă sub ce navigatoare merg (la unele se specifică explicit că nu merg sub IE9, de exemplu). Fiind doar CSS3 nu există constrângeri de folosit vreun anume framework JavaScript, dar autorul ne garantează că merg bine de exemplu cu Bootstrap.

imagine

Am reţinut interesanta selecţie 10 fresh JavaScript/jQuery plugins you should definitely check out. Personal sunt interesat în special de SlideBars, ilustrat mai jos (un …


Efecte speciale pentru fonturile Google

Fonturile Google sunt o realitate prezentă pe multe situri. Uşor de încorporat, estetice, foarte bune dacă alegi cele ce au şi caracterele specifice limbii noastre. Între cei care le folosesc poate sunt unii care nu ştiu de efectele speciale care pot fi aplicate. În timp ce facilitatea e marcată cu beta (de mult timp) poate fi totuşi folosită cu încredere. Nu cred că este genul de facilitate care să fie retrasă în timp. Cât priveşte cum se face efectiv, vă recomand să mergeţi aici, în documentaţie.

imagine

În principiu munca se reduce la includerea fontului (adăugăm parametrul effect, indicând apoi efectul) şi la tagul de „învelire” a textului (div, p sau ce folosim). Veţi regăsi acolo şi un tabel …


Font Awesome e simplu de folosit

În timp ce Font Awesome a fost gândit pentru Twitter Bootstrap, proiectul poate fi de folos şi independent. Chiar în această pagină îl folosesc, demonstrativ, şi puteţi să vedeţi în sursă ce simplu este. Totul porneşte de la includerea fontului, fie descărcându-l şi încărcându-l pe serverul Dvs, fie apelându-l dintr-o locaţie unde există deja (vedeţi aici prima recomandare de utilizare). Trecând de acest pas puteţi să îl folosiţi apelând la tagul <i>, punând clasa „fa” şi apoi indicând numele icoanei, de exemplu fa-arrows. Dacă vom scrie fa-2x icoana va apărea de două ori mai mare. Intuiţi atunci ce face fa-5x. Numele iconiţelor se găsesc aici.

image32

Mai jos câteva exemple cu mărimea normală, dublată şi triplată.

fa-briefcase fa-download

fa-arrows fa-cogs


Retrospective pentru 2013 pentru webmasteri

Ştiu că articolele sunt din 2013, dar reunirea de resurse e prea importantă ca să nu le las aici semnalate. Într-o zi cu soare îmi imaginez că o voi lua la puricat, instrument cu instrument, ca să văd ce minunăţii sunt. Evident, ca orice retrospective, se intersectează cu alte recomandări şi semnalări de-a lungul anului. Am regăsit deci şi lucruri de care ştiam şi lucruri noi. Articolele cu pricina, ambele de pe SpeckyBoy, sunt 50 Javascript Tools & Resources from 2013, respectiv 50 CSS Tools & Resources from 2013.

imagine

Dintre instrumentele pe care am ajuns să le văd puţin şi mi-au atras atenţia aş semnala:

  • WideArea – cu 6KB un câmp textarea se poate extinde pe …


UIkit 1.1 şi Bootstrap 3

Am dat zilele acestea peste UIkit, o altă bibliotecă ce îţi permite să porneşti rapid un sit cu „ingrediente” ce arată bine, via HTML, CSS şi JavaScript. În fapt îmi aminteşte mult, mult de tot, de Twitter Bootstrap, având poate un 80% suprapunere, în rest fiecare cu câte ceva nou. Drept urmare vom găsi şi aici cele necesare pentru a aranja textul pe coloane, pentru a avea formulare frumoase, meniuri, taburi, dropdown-uri, ferestre modale şi altele.

imagine

Avem şi nişte opţiuni pentru animaţii simple (dacă vrem ca nişte div-uri să apară cu fade sau curgând dintr-o anumită direcţie). Cu Overlay putem uşor suprapune un text descriptiv peste …


Label.css: descrieri pe imagini unde vrei

A amplasa o descriere text peste o imagine nu este nici o treabă foarte chinuitoare, nici chiar floare la ureche. Pentru cei care nu sunt tocmai avansaţi în CSS şi doresc să rezolve problema rapid, proiectul Label.css este salvator. Dacă veţi descărca proiectul veţi avea două fişiere CSS: versiunea label.min.css ar fi cea de folosit (dar când scriu eu acest material, fişierul e identic cu label.css, adică necomprimat). Includerea respectivului CSS deschide posibilitatea amplasării cu uşurinţă a textului dorit în una din cele opt poziţii.

imagine

Adăugaţi imaginii clasa top şi middle de exemplu, dacă doriţi ca explicaţia să apară sus, centrată. Folosiţi data-label pentru a indica efectiv textul. Implicit descrierea apare pusă peste imagine tot timpul. Dar cu clasele …


Columnizer: plugin jQuery pentru pus textul pe coloane

Poate unii vor considera comic un astfel de subiect: păi CSS3 nu permite aşa ceva fără plugin jQuery?! Ba da. Am văzut şi un generator care ne ajuta să avem un text pe coloane în câteva secunde, care, pe atunci (era 2011, cred că foloseam IE 9) nu mergea corect sub IE. Acum însă, sub IE10 merge bine. Cei care nu vor să îşi bată capul cu care navigator cât de bine suportă facilitatea numită coloane din CSS3, vor prefera o soluţie jQuery, chiar dacă şi ea, întorcându-ne înapoi în timp sub navigatoare din epoca de piatră, nu e perfectă.

imagine

Am folosit recent Columnizer, un plugin atât de uşor de folosit încât ajunge o singură linie de …


Twitter Bootstrap cu alte culori

Am scris în ianuarie pentru prima oară despre Twitter Bootstrap şi au urmat apoi câteva articole mai în detaliu… dar m-am oprit. Însă nu m-am oprit din a folosi acest framework deosebit. În fapt am avut două proiecte deja scrise cu el şi sunt foarte mulţumit! Dacă nu mă înşel, un comentariu al unui cititor spunea cândva ceva de genul: “dar cu Bootstrap nu vor arăta toate siturile la fel?” Ei bine, nu. Bootstrap ne permite chiar din pagina oficială să afectăm în primul rând culorile, dar puţin şi unele dimensiuni (de la fonturi, la elemente, precum înălţimea la nabar).

imagine

Ce trebuie să facem este să pornim de la pagina Customize. Desigur, dacă vrem să reducem dimensiunea framework-ului vom …