Logo Hardware.com.br
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas

Criar imagens com PHP+HTML e CSS

#1 Por OoDragooNoO 24/09/2007 - 20:32
awe galera ;D
bom,seguinte,to fazendo um site baseado num lay que fizeram pra mim,mas to "desenhando" o site todo com HTML,pro carregamento ficar mais rapido wink.png

ai eu to usando tabelas e cores e muuuuuuita paciencia,mas nao eh esse o problema feliz.png
o meu problema eh que,eu to precisando "desenhar redondo" em HTML espantado.png:
tipo,em uma parte "x" do site tem uma imagem quadrada de bordas arredondadas,mas eu consigo "preencher" ela (eh soh fazer um quadrado e colorir),mas como eu poderia fazer a borda arredondada ?

eu sei que dah pra fazer pixel-a-pixel,mas seria muuuuuuito demorado...:S
mas claro que se for o unico jeito...

se quiserem eu posso fazer um exemplo do que eu quero e do que eu tenho,nao sei se dah pra entender a minha duvida :S

eu achei isso : http://br.php.net/manual/pt_BR/ref.image.php
mas nao sei se dah pra fazer alguma borda redonda e talz :S

vlw a ajuda de todos feliz.png
problema site bom php imagens awe baseado html desenhando
bird
bird Geek Registrado
3.9K Mensagens 80 Curtidas
#2 Por bird
24/09/2007 - 23:49
Hmmm... Não entendi direito... O que você quer fazer é quadrados arredondados? Tipo caixas de texto com bordas arredondadas???

Se for você tá querendo matar uma mosca com tiro de canhão!!

A saída para isso é CSS e (de qualquer forma) fugir de tabelas...

http://www.neuroticweb.com/recursos/css-rounded-box/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://modxcms.com/simple-rounded-corner-css-boxes.html
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas
#3 Por OoDragooNoO
25/09/2007 - 00:39
bird disse:
Hmmm... Não entendi direito... O que você quer fazer é quadrados arredondados? Tipo caixas de texto com bordas arredondadas???

Se for você tá querendo matar uma mosca com tiro de canhão!!

A saída para isso é CSS e (de qualquer forma) fugir de tabelas...

http://www.neuroticweb.com/recursos/css-rounded-box/
http://kalsey.com/2003/07/rounded_corners_in_css/
http://modxcms.com/simple-rounded-corner-css-boxes.html


HAUSEHUAHSUEHAUSEuAHSUEUASHE
MEU DEUS XD
ATEH SOMBREADO XDDDDDDDDD
HAUSehUAEHuAHUEhauSheuaHe
assim eu vou usar o CSS e esquecer o Photoshop tbm nao_quero_nem_ver.png

vo dar uma estudada no codigo e ver se compreendo legal ele xD
outra coisa que eu SEMPRE quis saber e vou aproveitar que tu tocou no assunto mostrando_dentes.png
como eu monto um site sem tabelas ? espantado.png:
tipo,eu sairia usando "padding-top" e coisas assim pra posicionar o site ?
pode me mostrar um exemplo "basico" disso ? nao_quero_nem_ver.png

flw xD/

arkOrange">[edit]
eu dei uma olhada e "apliquei" o codigo,e notei que,a unica coisa que tem ali,eh um CSS que tem as url's das respectivas imagens,ou seja,seria quase o mesmo que "montar" a imagem usando HTML,mas usando CSS,entao nao serve =\
eu preciso de algo que eu possa alterar dinamicamente sabe ?
eu preciso "montar" a imagem,nao ter ela "pronta" e colocar no site

o meu problema eh o seguinte,eu preciso que essa imagem modifique de acordo com o valor de uma variavel,e o valor da variavel nao tem pre-definiçoes,sao duas cores (principal e fundo) definidos pelo visitante do site
imagina fazer uma imagem pra cada uma das possiveis cores existentes...:S
e pior,teria que ser todas as combinaçoes possiveis :S
no way man nao_quero_nem_ver.png
por isso andei dando uma fuçada no google,e achei que o PHP pudesse gerar imagens assim,parece que tem manipulaçoes de imagens .svg (vetorial) e talz...mas nao sei nada sobre isso =X
alguem pode dar uma luz ou ideia ? feliz.png
[/edit]
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas
#5 Por OoDragooNoO
25/09/2007 - 08:30
Guitarrista Kurumin disse:
Vc quer que a imagem ou o lugar que ela ta fique com as bordas redonda?


eu quero fazer uma imagem dinamica com bordas redondas (eu NAO tenho imagem alguma,quero "criar" do zero usando PHP ou outra coisa) ou "desenhar" algo como se fossem bordas usando HTML e que nao fosse pixel-a-pixel

eh que como disse,eu preciso de algo dinamico,que seja definido as cores por variaveis =\
se tiver como definir as cores de uma imagem tambem serve feliz.png

nao sei se deu pra entender o.O
mas eh bem o que o bird propos,mas sem usar imagens
lah nos codigos CSS tem...



rbroundbox { background: url(nt.gif) repeat; }

				.rbtop div  { background: url(tl.gif) no-repeat top left; }

				.rbtop      { background: url(tr.gif) no-repeat top right; }

				.rbbot div  { background: url(bl.gif) no-repeat bottom left; }

				.rbbot      { background: url(br.gif) no-repeat bottom right; }


note o "url(xx.gif)"
eu NAO quero usar isso,quero que seja possivel definir as cores da imagem,eh dificil explicar :S
mas se nao deu pra captar a ideia,eu tento fazer uma imagem e posto xD

flw xD/
jofrelscalvet
jofrelscalve... Veterano Registrado
1.3K Mensagens 51 Curtidas
#6 Por jofrelscalve...
25/09/2007 - 18:25
A saida apontada pelo bird é das melhores (se não a melhor). Bordas arredondas são recurso "nativo" do CSS3, mas uma das grandes conquistas da comunidade de desenvolvedores Web foi conseguir convencer o pessoal da microsoft a fazer o IE7 compatível com CSS2 .....
Pra resolver o problema das cores eu uso o seguinte truque: uma cor costuma mudar, mas o fundo da página costuma ser branco. assim invés de desenhar a borda, eu desenho a não-borda em branco e deixo o resto em transparente.

A idéia básica do tableless é fazer as coisas do "jeito certo", você define algumas posições, alguns tamanhos e relações entre elementos (por exemplo o float), eu ia mostrar um exemplo muuito legal onde mudando o css o layout de um site mudava radicalmente (o menu mudava de forma e posição e uma tabela trocava suas linhas de lugar com suas colunas!), mas parece que o site não existe mais (ou mudou de endereço), se eu tiver tempo procuro alguma coisa legal OU fácil (dificil ambos....)
bird
bird Geek Registrado
3.9K Mensagens 80 Curtidas
#7 Por bird
25/09/2007 - 19:39
Oi jofrelscalvet,

será que é esse o site??:
http://www.csszengarden.com


Dragão,

dá uma procurada na biblioteca Ming para php... Não é exatamente o que você está procurando, mas acho que vai te deixar mais doidão ainda... :-)

Ahhh e se você se interessar por svg, dá uma googlada por Batik, XML, essas coisas...

Dá uma olhada nessa páginas por exemplo:

http://starkravingfinkle.org/projects/demo/svg-bubblemenu-in-html.xml
http://people.mozilla.com/~vladimir/demos/photos.svg
jofrelscalvet
jofrelscalve... Veterano Registrado
1.3K Mensagens 51 Curtidas
#8 Por jofrelscalve...
25/09/2007 - 20:21
Bird não é esse, esse é legal, mas o outro era mais "didático" (tinha menos coisa, mas as mudanças eram impressionantes como poucos desses layouts (mudar o fundo da página, ou fonte não causa espanto, mas mudar um menu de 2 niveis abrindo na vertical pra um nivel na vertical e o outro na horizontal, ou trocar linhas com colunas é algo que me deixa "babando")).
Sorria_already
Sorria_alrea... Novo Membro Registrado
23 Mensagens 0 Curtidas
#10 Por Sorria_alrea...
25/09/2007 - 20:58
Sugestão:

http://www.plugmasters.com.br/sys/categorias/Programa%E7%E3o/Javascript/

http://www.plugmasters.com.br/downloads/categoria/12/Banco-de-Scripts/JavaScript

O script Abaixo, faz um circulo no browser:

");
}
pass = 5;
var a = 100;//'raio
var dx = 1;//'deformacao x
var dy = 1;//'deformacao y
var b=(1/a)*pass;
var z = 6.28;
var t=0;
xc = 320;
yc = 320;
circle();
xc = 100;
yc = 100;
a=50;
t=0;
b=(1/a)*pass;
circle();
function circle()
{
while ( t < 6.28 )
{
var m = (Math.sin (t) * a * dx) + xc; //'O primeiro * x é o diametro. O segundo + x linha
var n = (Math.cos (t) * a * dy) + yc; //'+ x - o x tambem da o espaço o for tambem influi
plota (m,n);
t+=b;
}
}



O segredo está na função: function plota(x,y)
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas
#11 Por OoDragooNoO
28/09/2007 - 09:04
javascript pode ser manipulado enviando codigos pela URL nao ?
se puder,entao nao quero javascript nao_quero_nem_ver.png
o orkut,por exemplo,eh um site que passou por muuuuuuuuuuuitas dificuldades por causa de javascript's,por isso evito ao maximo usa-lo feliz.png

bom,quanto aos links...espantado.png:
nossa,dah vontade de ler toda a documentaçao varias e varias vezes rindo_ate_agora.png
mas como ainda nao sei se conseguiria o que eu quero...:S

bom,pelo que vi acho que nenhum dos sites mostrou o que eu quero fazer,ACHO,mas eu andei pensando,e o primeiro site que o bird me passou ( http://www.neuroticweb.com/recursos/css-rounded-box/index.php ) faz EXATAMENTE o que eu quero fazer,PERFEITAMENTE isso feliz.png
eu mudei os valores das cores,para "304E7C" e "1DB687" e a URL ficou "http://www.neuroticweb.com/recursos/css-rounded-box/index.php?color=304E7C&fondo=1DB687"
e notei que os gif's pra gente salvar mudaram tambem,ou seja,eh a mesma imagem que fica ali,mas ela muda de acordo com os valores da URL,eh EXATAMENTE isso que eu quero fazer,como foi feito ?
pelo que li do fonte,me parece ser feito com PHP,pois ele manda os valores pra outra URL e usa-os,a URL seria "rounded.php",mas como o codigo nao pode ser visto...:S

bom,obrigado pela ajuda de todos ateh agora feliz.png
e eu to realmente ficando espantado com CSS espantado.png:

flw xD/
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas
#12 Por OoDragooNoO
30/09/2007 - 01:58
up mostrando_dentes.png

e aproveitando pra perguntar mostrando_dentes.png
seguindo conselho do bird,comecei a dar uma olhada no maujor.com e to seguindo as aulas pra aprender a usar div's e CSS ao inves de tabelas mostrando_dentes.png
bom,beleza,entendi ateh agora e talz,ai eu fui "brincar" um pouco tentando fazer um site que eu usei tabelas pra desenhar o layout,e em determinada parte dele tem algo assim :

(com tabelas)


        <td bgcolor="#00CC00" width="500" height="100">

        </td>


ai eu tentei fazer (sem tabelas) assim :



<div style="background-color:#00CC00;width:500;height:100;position:absolute;">

</div>


e nao apareceu nada :S
soh aparece a coloraçao quando eu digito algo dentro,mas eu nao quero nada dentro,quero apenas um "pedaço" colorido,simples XD
como que eu faço isso sem usar tabelas ?

flw xD/
OoDragooNoO
OoDragooNoO Geek Registrado
3.5K Mensagens 61 Curtidas
#14 Por OoDragooNoO
30/09/2007 - 04:17
bird disse:
width: 500px;
height: 100px;

;-)


N-O-S-S-A XDDDDDDDD
eh incrivel como afobaçao por aprender algo novo nos faz nao_quero_nem_ver.png
eu apavorado pra aprender CSS à todo custo e nem notei isso XDDDDD
e olha que eu revisei o codigo varias vezes XDDDDD
enfim,valeu mostrando_dentes.png

mas ainda fico com a duvida em relaçao às imagens do primeiro site que o bird me passou :S

essa duvida tah "em aberto" nao_quero_nem_ver.png

flw xD/
© 1999-2024 Hardware.com.br. Todos os direitos reservados.
Imagem do Modal