Distracție cu forme CSS

Pun pariu că o grămadă dintre voi nu vă dați seama că putem crea iluzia formelor utilizând CSS 100%. Utilizând proprietatea de frontieră în mod creativ, putem face niște poligoane foarte interesante. În săptămâna asta screencast, vom descoperi o modalitate de a crea bule de vorbire fără a recurge la imagini de fundal.

Majoritatea dintre noi, până acum, sunt familiarizați cu utilizarea proprietăților "-moz-border-radius" și "-webkit-border-radius" pentru a crea colțuri rotunjite sau chiar cercuri complete, dar există și alte tehnici pentru a crea forme mai complicate.

Discurs tradițional-bule

 blocare # un lățime: 250px; fundal: # e3e3e3; padding: 25px; poziție: relativă;  #one .arrow width: 0; înălțime: 0; linia-înălțime: 0; vârf frontal: 30px solid # e3e3e3; frontal-stânga: 60 pix solid alb; frontal-dreapta: 10 pix solid alb; poziția: absolută; fund: -30px; drept: 30px; 

Rețineți modul în care proprietatea "de jos" este reciprocă a proprietății "frontal-top".

Alterna

 blocaj # două lățime: 250px; fundal: # e3e3e3; padding: 25px; poziție: relativă;  blockquote # two .arrow width: 0; înălțime: 0; linia-înălțime: 0; frontieră-sus: 40px solid # e3e3e3; frontieră-stânga: niciuna; frontal-dreapta: 30 pix solid alb; poziția: absolută; fund: 60%; drept: -30px; 

Inca unul

 blockquote # trei lățime: 450px; fundal: # e3e3e3; padding: 25px; poziție: relativă;  #three .arrow width: 0; înălțime: 0; linia-înălțime: 0; frontieră-fund: 25px solid # e3e3e3; frontal-dreapta: 50 pix solid alb; poziția: absolută; top: -24px; stânga: 20px; 

Notă interesantă

Vă scriu câteva minute înainte de a posta tutorialul. Am învățat ceva în seara asta. Știați că dacă doriți ca documentul dvs. să fie validat, nu puteți plasa textul direct într-o blocare de bloc? Trebuie să fie imbricată într-un element parental - cum ar fi

etichetă. În plus, validatorul nu mi-a plăcut faptul că am folosit o etichetă de span în blocul de bloc. Permite o multitudine de elemente, dar, din nefericire, nu este timpul! Bine; nu e mare lucru. Doar înlocuiți-o cu un element diferit. Nu prea face diferența.

Destul de minunat

Sunt foarte dornică să văd cum ați pus în aplicare acest truc unic în propriile dvs. proiecte. Trimiteți-ne link-uri către exemplele dvs., prin intermediul comentariilor. Multumesc pentru vizionare. Săptămâna viitoare, intenționează să înveți ceva mult mai avansat ... trebuie doar să-mi dau seama ce! Pana atunci.

• Urmăriți-ne pe Twitter sau abonați-vă la feed-ul RSS NETTUTS pentru mai multe tutoriale și articole zilnice de dezvoltare web.