Randje rondom images.

Status
Niet open voor verdere reacties.
K

KREEFTMEIJER

Gebruiker
Lid geworden
14 sep 2010
Berichten
188
Op de pagina www.uwfavoriet.nl/Folio.html staan links naar de grote fotoos.
De images in de link hebben een dubbel randje, wit en een beetje melkwit.
Nu wil ik andere images daarin plaatsen, dat heb ik met de eerste twee links boven gedaan.
Maar de manier waarop moet anders kunnen , ik heb mijn images , zeg maar in de lijst geplakt.
Ik denk dat het met CSS of HTML beter en preciezer op te lossen is.
Wie kan mij de sleutel aanreiken ??

Henk
 
:) Met '' Wondershare Flash Slideshow Builder '' of met '' Corel Paintshop Photo Project Creator ''volgens mij lukt dat, .... of zoiets, ook aardig en/of vlotter ...:thumb:
 
Ik heb zelf al een beetje geknutseld met photoshop maar hoopte dat er een slimmere en makkelijker oplossing is.

Henk
 
Hoi Henk,

De images krijgen background-images!
Als alle lijstjes resp. images hetzelfde staande of liggende formaat hebben:
  • De <img>'s een extra class="portrait" of class="landscape" meegeven.
  • De portrait images krijgen paddings rondom voor het staande lijstjes-formaat, en het staande lijstje gaat er in als background-image.
  • De landscape images krijgen het liggende lijstje als background-image; en ook de bijbehorende paddings.
  • Dan heb je maar 2 images nodig voor de lijstjes, die steeds gerecycled worden via de css. *)
  • En de html en thumbnails zelf blijven schoon.

Met vriendelijke groet,
CSShunter
__________
*) Zelfs maar 1, als je de twee in 1 image combineert. Met de background-position schuif je dan hetzij het portrait-lijstje hetzij het landscape-lijsje op z'n plek binnen het img-oppervlak
Heb ik ook eens gedaan voor een pagina vol met dia-raampjes:

diaraampjes.png

Boven zoals het er op de pagina uitziet, onder het combi-image (paars is transparant). Aan de rechterkant zit nog een projectieschermpje als hover-variant (voor zowel het staande als het liggende img)
 
Hoi Henk,
Hoepla! Bij de gallery met de plaatjes-wisselaar gaat m'n verhaal niet op (wel voor de portfolio-plaatjes).
Bij de wisselaar veranderen namelijk de formaten van de foto's on-the-fly, en moeten dus ook de background-images met het lijstje dynamisch van formaat kunnen gaan veranderen.
Daar zal dan css3 aan te pas moeten komen, want met gewone css kan een background-img niet van formaat wisselen.

Maar als toch css3 gebruikt wordt, dan kan ook het randje en de schaduw helemaal met css3 gemaakt worden, en hoeft er geen img meer gebruikt te worden (dat kan dan ook voor de statische portfolio-images eronder). :)


  • Test: css3-box.htm

  • De <span> is nodig voor het dunne binnenwerkse lijntje in de omlijsting.
  • Javascriptje is toegevoegd voor het testen van een automatische vergroting.

Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Klinkt heel ingewikkeld maar ook spannend.
Ik ga hiermee aan de slag en zal het resultaat laten horen.

Groet,
Henk
 
Hoi Henk,
Het hoeft niet heel ingewikkeld te worden.
Als je het nauwelijks zichtbare lijntje binnen het lijstje laat vervallen, wordt de css eenvoudiger, de html kan dan de <span> missen, en waarschijnlijk is het dan ook veel en veel simpeler om te implementeren in het jQuery carrousel (zonder in te hoeven grijpen in het javascript daarvan).

Voor het randje en de schaduw heb je maar een paar dingen nodig:
Code: 
.containerVanHetImg {
    ...
    padding: 10px;             /* breedte van het kadertje */
    background: white;         /* kleur van het kadertje   */
    border: 1px solid #C0C0C0; /* kleur van de buitenrand  */
    border-radius: 12px;       /* kromming van de ronde hoekjes v/d buitenrand */
    box-shadow: 0 20px 30px -20px #808080;
    }
.containerVanHetImg img {
    width: 100%;
    vertical-align: top;
    border-radius: 7px; /* kromming van de ronde hoekjes v/d foto */
    }
De box-shadow eigenschappen staan bv. hier.



Succes!
CSShunter
 
Laatst bewerkt:
Hallo Hunter,

Het hoeft niet ingewikkeld te zijn, maar ik heb nog nooit gewerkt met Container.
Heb daarom geen idee waar ik het in de CSS moet plaatsen.
Heb nog een nostalgisch plaatje gevonden
knoop.gif

Groet,
Henk
 
Hoi Henk,
Met de "container" bedoelde ik alleen het element waar het image in zit.
Ik had dat even een class gegeven om het in het voorbeeld te laten werken.

Even kijken ... ja, in jouw geval is dat gewoon de #gallery li {...}. Daar zitten de images in. Dan hoeft er geen class of een extra container aan te pas te komen, en wordt het dus:
Code: 
#gallery li {
/*	toegevoegd: */
	border: 1px solid #C0C0C0; /* daarmee ook de border: 10px solid red uitgeschakeld */
	background: white;
	padding: 10px;
	border-radius: 12px;
	-webkit-box-shadow: 0 20px 30px 0 #808080; /* Safari */
	box-shadow: 0 20px 30px -20px #808080;
	}
#gallery img {
	border-radius: 7px; /* toegevoegd */
	}
... terwijl de randjes uit de images weggesneden kunnen worden (folio-img1-nw.png, folio-img2-nw.png, folio-img3-nw.png), waarmee deze nu een formaat van 600*415px hebben gekregen;
... en het formaat ook in de css is aangepast:
Code: 
.roundabout-moveable-item {
	width:  600px;  /* aangepast aan nieuw img-formaat 600*415 */
	height: 415px;  /* aangepast aan nieuw img-formaat 600*415 */
	}
Tenslotte blijkt dat browsers/processors al dit render-geweld maar moeilijk kunnen begaffelen, en dat op mijn kast de overgangen begonnen te horten & stoten (bij de ene browser meer dan bij de andere). Met de css3 er ook nog bij moet er ook erg veel steeds opnieuw berekend worden.
Daarom de wisseltijd in de javascript-settings teruggebracht, zodat er minder overgangen berekend hoeven te worden:
[JS]<script type="text/javascript">
$(document).ready(function() {
$('#myRoundabout').roundabout({
...
duration:350, // was: 800
reflect:true
});[/JS]

En dat levert dan: testfolio-nw.htm.

Ik sta er trouwens van te kijken hoeveel script-bibliotheken er voor deze pagina binnengehaald worden ... maar liefst 12 stuks (en in totaal 4 css-bestanden). De snufjes eisen wel hun tol ...
Voeg daarbij de 57 images van samen 1,7MB ...
... en je begrijpt dat deze pagina er met 70 (!) http-requests vrij lang over doet om op m'n scherm te komen. :rolleyes:

Met vriendelijke groet,
CSShunter
 
Hallo Hunter,

Dank voor je voortreffelijke uitleg, begin het een beetje te begrijpen.
border: 1px solid #C0C0C0; /* daarmee ook de border: 10px solid red uitgeschakeld */
Klik om te vergroten...
met die 10px red was ik een beetje aan het experimenteren.
Wat ik nu wil is het kleine plaatje218x146px ook van rand en schadow voorzien.
.lightbox-image {position:relative;overflow:hidden;display:block;background:#fff}
.lightbox-image img {position:relative;z-index:2}
.lightbox-image span {display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../images/magnify.png) no-repeat 50% 50%;z-index:1}
.pp_details {display:none;height:0;padding:0;margin:0;font-size:0;line-height:0}
.pp_description {display:none;height:0;padding:0;margin:0;font-size:0;line-height:0}
.gallery {margin-top:-10px;padding-left:8px;width:100%;overflow:hidden}
.gallery li {float:left;padding-right:10px;padding-top:10px border :10px solid red;}
.gallery .end {padding-right:0}
Klik om te vergroten...
begrijp dat het hier ergens zit.

Wat betreft die script-bibliotheken heb je gelijk, het leek zo'n leuke template.

Groet,
Henk
 
Hallo Hunter,

Het is allemaal gelukt en ik begrijp het, nogmaals dank voor je uitleg.
Het plaatje knoop.gif is een knoopgatsinsigne.
Het is een ponskaart met 6 gaatjes zijnde drie letters IBM.
Kreeg bij je diploma voor de 421 accountingmachine.

Groet,
Henk
 
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan