CSS, HTML, Scripts en Links
Mijn virtuele speelplaats; CSS, HTML, scripts, website handigheidjes.
Gelijkertijd een verzameling van links, waar nog meer css, html of scripts te vinden is.
In elkaar gezet in eerste instantie voor mijzelf, als oefening.
Inmiddels mijn kleine naslagwerk, met favoriete tools.
Makkelijk op te zoeken en te kopieren en weer te gebruiken in een andere vorm.
Ter inspiratie. Scroll naar beneden of gebruik het menu om de verschillende onderwerpen
te vinden en te bekijken.
Het blokje links verandert van kleur, bij elke paragraaf. De CSS "background attachement" functie wordt hier voor gebruikt;
CSS
.content {width: 550px; padding:20px 10px 10px 252px;
background-color: transparent;
background-repeat: no-repeat;
background-position: 5px 15px;
background-attachment: fixed;
text-align: justify;}
.a {background-image: url(images/bal.gif); }
.arrow {background-image: url(images/poot1b.png);
margin: -10px -10px -191px -255px; }
.b {background-image: url(images/zwart.png); }
.c {background-image: url(images/poot2.png); }
.d {background-image: url(images/poot3.png); }
.e {background-image: url(images/poot4.png); }
.content span { font:normal 18px verdana;color:#000; }
Voor een Demo op een lege bladzijde, klik hier.
Voor een uitgebreide uitleg op de pagina van "impressivewebs":
klik hier.
Roteer elk HTML element met CSS. Dit kan tekst zijn of een afbeelding. Onderstaande code werkt voor alle browsers, behalve Opera.
Klik op de afbeelding rechts voor het voorbeeld in actie op een lege pagina. Hieronder de code voor een 90 graden rotatie:
CSS
/* for firefox, safari, chrome, etc. */
-webkit-transform: rotate(-90deg);
-moz-transform: rotate(-90deg);
/* for ie */
filter:
progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
Meer voorbeelden zijn te vinden op: snook.ca en kavoir.com
Het trucje is simpel. Maak gebruik van een 1px zwart-wit verloop in PNG formaat (met alpha transparency) over de tekst. Het voorbeeld wat hier wordt gebruikt werkt mooist met een zwarte achtergrond.
HTML
<h4><span></span>CSS Gradient Text</h4>
CSS
h4 {font: bold 330%/100% "Lucida Grande";
position: relative; color: #464646;}
h4 span {
background: url(images/gradient-dark.png) repeat-x;
position: absolute; display: block;
width: 100%; height: 31px;}
Dat is alles! Klik hier voor de Demo pagina van "webdesignerwall". Klik hier om de PNG afbeelding(van het zwart-wit verloopje) op te slaan.
Een "gradient background" zonder images, dat leek me wel wat. Gezocht en gevonden! Klik op de afbeelding hiernaast voor een demonstratie op een lege pagina.
De demo pagina van Design Detector
toont een uitgebreide uitleg.
Op de site van Design Detector vond ik een demo om frames te genereren met alleen CSS en een script.
Bekijk de Demo of kijk voor een volledige uitleg op de site van:
Design Detector. Ook op de website van
Dynamic Drive
staan veel voorbeelden voor CSS frames pagina's.
HTML frames zijn misschien achtehaald, maar ik vind het nog steeds een leuk effect: HTML inline frames wisselen met behulp van java.
Klik hier voor een demo.
Voor een uitgebreid voorbeeld van het effect, kijk je op www.miebeth.nl
Boven aan de pagina en onder "Spotlight" een voorbeeld van een mouse-over. Klik op onderstaande links, voor de codes en voorbeelden van mouse-hover effecten op een lege pagina.
Bekijk daar de broncode om te kopieren.
De voorbeeld pagina's tonen een
transparante mouse-hover, een
simpel mouse-hover effect, een fade effect met behulp van
java script, nog een fade effect, nu met behulp van
jquery en een
jquery slider effect.
Beweeg over de tekens om de codes te bekijken.
Een kleuren generator helpt je met het kiezen van een passend zes kleurig gamma.
Geef een kleur op die je mooi vindt.
Daarna zullen de passende kleuren zullen berekend worden.
Klik op eender welke aangemaakte kleur om hem als eerste kleur te zetten.
Klik op 'save' voor later gebruik. Kan handig zijn.
Klik op de afbeelding om te bekijken en te gebruiken op een lege pagina.
Een watermerk in je afbeeldingen aanbrengen. Soms is het handig.
Snel een watermerk aanbrengen in je afbeeldingen, kun je met een aantal on-line tooltjes doen.
Een paar links:
- PcMarkr
- Watermark
- Watermarktool
Slider effecten. Er zijn heel veel voorbeelden te vinden. Een paar voorbeelden.
Pagina / Tekst Sliders:
- Coda-slider
- Coda-slider II
- Jquery Slider
- Horizontal Slider
- Horizontal Auto Slider
- Vertical Slider
- Spry Sliders
- Sliding panels
- Spry Sliders tutorial
- Slider CSSPlay
- Tiny Slider
Accordion effecten
- Infogrid
- Stickmanlabs
- Jquery Accordion
Image Sliders en Transitions:
- Image Carousel
- Jquery Carousel
- Thumb Slider
- Image transitions
- Jquery Photoshuffle
- Garage door slider
- mootools slider
Contact of Feedback Slide-Out Tabs:
- Horizontal Contact tab
- Feedback Slide out
Map Slider:
- Google Map Slider
- Map Builder
Website templates om inspiratie op te doen voor een lay-out.
Een paar links:
- Templatemonster
- Swish templates
- Wix templates
Afgeronde blokken zoals op deze bladzijde worden gebruikt, alleen met CSS? Minder ingewikkeld dan gedacht. Klik hier voor een voorbeeld op een lege pagina. Voor een complete uitleg en voorbeelden: Bezoek de website van: Benogle. Op het web zijn ook veel "generators" te vinden voor het maken van elementen met ronde hoeken. Een voorbeeld is te vinden op: www.roundecornr.com en www.smileycat.com.
Ooit al eens voorgehad dat Internet Explorer iets niet ondersteunt zoals het hoort? Voor deze zeldzame gevallen heeft Microsoft namelijk zelf een oplossing bedacht. Zo kan je bepaalde delen html code uitschakelen of juist alleen weergeven op Internet Explorer.
HTML
<!--[if IE 5]>5<![endif]-->
<!--[if IE 5.0]>5.0<![endif]-->
<!--[if IE 5.5]>5.5<![endif]-->
<!--[if IE 6]>6<![endif]-->
<!--[if IE 7]>7<![endif]-->
<!--[if gt IE 7]>8,9,10 of later 
<![endif]-->
Op deze manier kun je ook een aparte stylesheet aanroepen voor een bepaalde versie van explorer.
Door een uitroepingsteken te gebruiken sluit je Internet Explorer uit. Let ook op de 2 kleine comments in de plaats van 1 grote.
Hierdoor zien de andere browsers nog steeds wat ertussen staat.
De enige makkelijke en altijd werkende wijze om kolmmen op je site te zetten:
HTML
<div id="container">
<div class="kolom1">
... inhoud komt hier....
</div>
<div class="kolom2">
... inhoud komt hier....
</div>
<div class="kolom3">
... inhoud komt hier....
</div>
</div>
Klik voor een demo
op een lege pagina. Met dank aan Gigadesign.be.
Een scrollbar met de kleuren van je website. Altijd leuk.
Een paar voorbeelden staan op een aparte pagina.
De eerste is gemaakt met een klein scriptje, de
tweede is "oude" versie,
een transparante versie voor inline html explorer frames. Maar blijft een leuk effect.
Kijk op de website van Suzan Visser
voor een voorbeeld van een gekleurde scrollbar, geheel in de kleuren van de site.
Bekijk de broncode op een lege pagina.
Een ander voorbeeld van een marquee script is te vinden op de site van:
The Ruins of Morning
Transparantie met CSS en een semi transparant .png bestand.
CSS
.transborder {position: relative; width: 400px;
height: 285px; z-index:1; left: 0px;
border: 1px solid #444;}
.transbg {position: relative; width: 390px;
height: 275px; z-index:2; left: 0px;
padding:5px;
background: url("op.png") top left repeat; }
.transtxt {position: relative; width: 390px;
height: 265px; z-index:3; left: 0px;
padding:0 5px 5px 5px;
color: #fff; font: normal 9px/16px verdana; }
HTML
<div class="transborder">
<div class="transbg">
<div class="transtxt">
Hier de tekst
</div>
</div>
</div>
Klik hier om de transparante .png op te slaan als je die wilt gebruiken.
Meer voorbeelden vind je op:
5 Faces of Transparency en ook op
W3 Schools
Eigenlijk heel simpel, maar soms kun je zo blind staren op een kleinigheidje;
CSS
.example {background:#4b8c52; margin-top: 30px;}
.example .wrap1 {background:#af3c52;
width:50%;height: 360px;}
.example .wrap2 {margin-right:-100%;
position:relative; height: 360px;}
.example p {color:#000; font-weight:700;
padding:0 10px 0 10px;
font: 11px/16px verdana; font-size:90%; }
.example h2 {color:#000; padding:0px 10px 0 10px;
font: bold 20px verdana;}
Klik hier voor een voorbeeld op een lege bladzijde.
