Bordi immagini fantasiosi con Mozilla

Qua trovi codici già pronti e tanti consigli per abbellire il tuo blog

Moderatori: Moderatori iobloggo, Moderatori HTML & Grafica

Bordi immagini fantasiosi con Mozilla

Messaggioda anija » 16 giugno 2005, 15:37

Con Mozilla è possibile attribuire stili ai bordi delle immagini tali da renderli davvero piacevoli.
Come prima cosa è possibile dare un padding (rientro) all'mimagine in modo da staccarla dal bordo, così:

Immagine

inserendo questo stile nel css
Codice: Seleziona tutto
border:1px solid #CCCCCC; padding:3px;


E' possibile anche arrotondare questi bordi con la proprietà -moz-border-radius così:

Immagine

Codice: Seleziona tutto
border:1px solid #CCCCCC; padding:3px; -moz-border-radius: 4px;
Ultima modifica di anija il 11 agosto 2005, 10:16, modificato 2 volte in totale.
Immagine

regolamento // guida // faq // cerca
Immagine
« sei in intimo allineamento con il palpitante ronzio del Divino Wow » Rob Brezsny
Immagine Immagine Immagine Immagine
Avatar utente
anija
Admin
Admin
 
Messaggi: 7745
Iscritto il: 3 marzo 2004, 16:59
Località: Milano
Indirizzo blog: http://anija.iobloggo.com

Messaggioda [silvia] » 16 giugno 2005, 15:57

ma quante ne sai :lol:
-- silvia --

ah ma te sei <a href="http://www.commessafrustrata.com">commessa frustrata</a>? merda quanto poco t'invidio...

<a href="http://blograduno.iobloggo.com" target="_blank"><img border="0" src="http://www.lozioric.com/antipixel/blograduno_2005.gif" title="ioBlograduno - Domenica 17 Aprile 2005 a Bologna"></a>

Immagine Immagine Immagine Immagine Immagine
[silvia]
esperto
esperto
 
Messaggi: 219
Iscritto il: 30 ottobre 2004, 16:35
Località: bologna

Re: TIPS: Bordi immagini fantasiosi con Mozilla

Messaggioda mescal° » 16 giugno 2005, 18:00

anija ha scritto:E' possibile anche arrotondare questi bordi con la proprietà -moz-border-radius così:

Immagine

Codice: Seleziona tutto
border:1px solid #CCCCCC; padding:3px; -moz-border-radius: 4px;


però poi il wc3 s'arrabbia. Immagine

ma sticazzi, così è più bello. :P
★ <a href="http://mescal.iobloggo.com" target="_blank"><img src="http://mescal.pixelized.ch/blog_mescal/img/antipixel.png" align="middle"></a> <a href="http://mescal.pixelized.ch/smilies.html" target="_blank"><img src="http://mescal.pixelized.ch/smilies/antipixel.gif" align="middle"></a> <a href="irc://irc.iobloggo.com/iobloggo"><img src="http://img310.imageshack.us/img310/1138/join035dd.png" align="middle" alt="join us @ #iobloggo" title="join us @ #iobloggo"></a> <img src="http://eddietf.altervista.org/_altervista_ht/bm.gif" align="middle">
mescal°
senza speranza
senza speranza
 
Messaggi: 3116
Iscritto il: 15 marzo 2004, 16:34
Località: Pesaro

Messaggioda anija » 16 giugno 2005, 18:08

mescal° ha scritto:però poi il wc3 s'arrabbia. Immagine

Non è vero, il CSS rimane valido, senza errori nè warnings.

http://jigsaw.w3.org/css-validator/vali ... a/blog.php
Immagine

regolamento // guida // faq // cerca
Immagine
« sei in intimo allineamento con il palpitante ronzio del Divino Wow » Rob Brezsny
Immagine Immagine Immagine Immagine
Avatar utente
anija
Admin
Admin
 
Messaggi: 7745
Iscritto il: 3 marzo 2004, 16:59
Località: Milano
Indirizzo blog: http://anija.iobloggo.com

Messaggioda mescal° » 16 giugno 2005, 18:12

anija ha scritto:
mescal° ha scritto:però poi il wc3 s'arrabbia. Immagine

Non è vero, il CSS rimane valido, senza errori nè warnings.

http://jigsaw.w3.org/css-validator/vali ... a/blog.php


ohpperò... qualche mese fa s'incazzava. :|
meglio. :P
★ <a href="http://mescal.iobloggo.com" target="_blank"><img src="http://mescal.pixelized.ch/blog_mescal/img/antipixel.png" align="middle"></a> <a href="http://mescal.pixelized.ch/smilies.html" target="_blank"><img src="http://mescal.pixelized.ch/smilies/antipixel.gif" align="middle"></a> <a href="irc://irc.iobloggo.com/iobloggo"><img src="http://img310.imageshack.us/img310/1138/join035dd.png" align="middle" alt="join us @ #iobloggo" title="join us @ #iobloggo"></a> <img src="http://eddietf.altervista.org/_altervista_ht/bm.gif" align="middle">
mescal°
senza speranza
senza speranza
 
Messaggi: 3116
Iscritto il: 15 marzo 2004, 16:34
Località: Pesaro

Messaggioda Maki-chan » 11 luglio 2005, 1:58

Per caso esiste un trucchetto simile anche per explorer?
E' un uso interessante del codice per evitare l'uso di grafica :)
Maki-chan
Avatar utente
Maki-chan
abituale
abituale
 
Messaggi: 91
Iscritto il: 2 settembre 2004, 9:29

Messaggioda anija » 11 luglio 2005, 9:47

Maki-chan ha scritto:Per caso esiste un trucchetto simile anche per explorer?
E' un uso interessante del codice per evitare l'uso di grafica :)


no, solo mozilla :)
Immagine

regolamento // guida // faq // cerca
Immagine
« sei in intimo allineamento con il palpitante ronzio del Divino Wow » Rob Brezsny
Immagine Immagine Immagine Immagine
Avatar utente
anija
Admin
Admin
 
Messaggi: 7745
Iscritto il: 3 marzo 2004, 16:59
Località: Milano
Indirizzo blog: http://anija.iobloggo.com

Messaggioda Maki-chan » 11 luglio 2005, 13:08

Che tristezza :|
io avevo trovato questo codice, ma *ovviamente* non funziona!

Codice: Seleziona tutto
   border-radius:6px;


snervante!
Maki-chan
Avatar utente
Maki-chan
abituale
abituale
 
Messaggi: 91
Iscritto il: 2 settembre 2004, 9:29

Messaggioda Alexiel » 28 ottobre 2005, 23:48

io ho messo questo qua:
Codice: Seleziona tutto
<img src="URL" border="1" solid #CCCCCC; padding:3px; -moz-border-radius: 4px; style="float:right">

ma pare non funzioni....
dove sbaglio? :?
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Messaggioda NatroN » 29 ottobre 2005, 9:52

Alexiel ha scritto:io ho messo questo qua:
Codice: Seleziona tutto
<img src="URL" border="1" solid #CCCCCC; padding:3px; -moz-border-radius: 4px; style="float:right">

ma pare non funzioni....
dove sbaglio? :?


Il border fa parte dello stile e quindi devi metterlo all'interno di style.
Prova così:
Codice: Seleziona tutto
<img src="URL" style="border=1px solid #CCCCCC; padding:3px; -moz-border-radius: 4px; float:right;">

:)
Immagine
Avatar utente
NatroN
purosangue
purosangue
 
Messaggi: 322
Iscritto il: 19 luglio 2005, 17:33
Indirizzo blog: http://natron.iobloggo.com

Messaggioda Alexiel » 27 novembre 2005, 18:39

ehm... io ho usato proprio questo:
Codice: Seleziona tutto
    <img src="" style="border=1px solid #FF66CC; padding:3px; -moz-border-radius: 4px; float:right;">
quindi ho solo cambiato colore... il bordo sembra esserci, ma non si vede! e ho provato anche col colore nero, ma nulla...
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Messaggioda anija » 28 novembre 2005, 12:14

Border non va con l'uguale, se è dentro lo style.
Immagine

regolamento // guida // faq // cerca
Immagine
« sei in intimo allineamento con il palpitante ronzio del Divino Wow » Rob Brezsny
Immagine Immagine Immagine Immagine
Avatar utente
anija
Admin
Admin
 
Messaggi: 7745
Iscritto il: 3 marzo 2004, 16:59
Località: Milano
Indirizzo blog: http://anija.iobloggo.com

Messaggioda Alexiel » 28 novembre 2005, 23:32

è vero! finalmente ci sono riuscita! :ave: ave a te, anija! :love:
Avatar utente
Alexiel
Moderatore
Moderatore
 
Messaggi: 1777
Iscritto il: 3 agosto 2004, 16:32
Località: Napoli
Indirizzo blog: http://alexiel.iobloggo.com/

Messaggioda thestar87 » 28 gennaio 2007, 4:28

le sai davvero tutte! :ok:
mozilla mi piace sempre di più, ogni giorno! e pensare che l'ho scoperto grazie a iobloggo! :D grassie!
Avatar utente
thestar87
abituale
abituale
 
Messaggi: 55
Iscritto il: 8 dicembre 2005, 9:39
Località: Milano
Indirizzo blog: http://liquidoxygen.iobloggo.com/


Torna a Consigli e Trucchi

Chi c’è in linea

Visitano il forum: Nessuno e 1 ospite