Azi este Duminica, 18 de Mai.2017

cu reduceri

Cun scriem un text pe fondul unei imagine


scrie un text pe imagine

Un exemplu de text scris peste o imagine

Atentie! textul sa nu depaseasca dimensiunea imagini
In anumite situatii dorim sa facem o descriere pe o imagine si nu stim cum.

Cu ajutorul unei aplicatii simple rezolvam aceasta problema.

Cum procedam?

Vom copia codul html de mai jos si il insertam intr-o postare noua , dupa aceea, trebuiesc facute cateva modificari pentru al adapta la blogl tau.

copiaza urmatorul cod:
<div style="float: left; position: relative;">

<img alt="descriere imagine" src="url de la imagine" />
<div style="color: black; font-family: Courier; left: 20px; position: absolute; top: 55px; width: 150px;">

...aici vine textul...

</div>
</div>

Acum se va inlocui "url de la imagine" cu url-ul imagini care doresti sa apara in postare, de asemenea vei inlocui ...aici vine textul... cu descrierea care doresti sa apara pe respectiva imagine. Cu propietatea float putem adapta textul pe fondul imagini dupa cum urmeaza (left=mutam textul in partea stanga sau right=mutam textul in partea dreapta) se mai poate schimba culoarea de text(black) si distanta intre marginea superioara si inceputul de text (top: 55px).

Related Posts:

  • Efecte imagine pentru blogul tauCateva trucuri pentru a modifica o imagine si a o adapta la un sptiu anume pe blogul tau. Cu ajutorul unui simplu cod html se poate modifica: grosimea de margine, rotunjirea colturilor fara a folosi programe complicate de pe … Read More
  • Mareste o imagine cu ajutorul efectului onmouseoverIntr-o postare anterioara am văzut cum se poate mari o imagine cu ajutorul unui clic. Astazi vom vedea un mod simplu pentru a mari o imagine pur si simplu trecand mouse-ul peste ea.Tot ce trebuie sa faceti este sa inserati co… Read More
  • O galerie simpla cu imangini miniaturaDaca iti place grafica si doresti sa optimizezi cat mai bine spatiul pe blog, poti folosi urmatorul cod JavaScript si CSS, pentru a forma o galerie care include imagini miniaturi si pot fi vizualizate pe rand intr-o alta dime… Read More
  • Protejeaza imaginile personalePicMarker iti permite sa adaugi filigran personalizat (imagine sa text)pe imaginile care doresti sa fie protejata contra furtului online.Este util atunci cand ai nevoie pentru a proteja drepturile tale de autor sau dacă dores… Read More
  • Efect de margine rotunjita a unei imaginiUn avantaj utilizand CSS3 este, aplicarea pe imagini a efectului de rotunjire (sunt efecte foarte interesante pe care le gasesti mai jos), fara a ne complica prea mult, atata timp cat el se vedea atunci cand folosim un browse… Read More

2 comentarios:

Bine ai venit!
In continuare poti lasa mesajul tau.

Multumesc