QRCommunicatie Blog » css http://qrcommunicatie.nl/blog Gewoon weer een WordPress weblog Tue, 10 Aug 2010 13:27:14 +0000 http://wordpress.org/?v=2.9.1 en hourly 1 CSS3 Gradient Knoppen http://qrcommunicatie.nl/blog/css3-gradient-knoppen/ http://qrcommunicatie.nl/blog/css3-gradient-knoppen/#comments Mon, 10 May 2010 12:17:19 +0000 mike http://qrcommunicatie.nl/blog/?p=471

De ontwerpers zitten in Photoshop CS(x) te shoppen aan verschillende mooie gradient buttons. Uiteindelijk gaat de webbouwer er mee aan de slag en laat via een vernuftige CSS ‘formule’ de buttons zien met een te gek hover- en clickeffect. Daar hebben we al een lange tijd een mooie oplossing voor. Geen afbeelding meer nodig, louter kleuren en het gewenste hovereffect. Dit wordt zelfs ondersteund door de Microsoft uitvoeringen van de internet browser (IE).

Klik hier voor een DEMO.

Inderdaad de kracht van CSS!

]]> http://qrcommunicatie.nl/blog/css3-gradient-knoppen/feed/ 2 Infinite rotation #CSS3 (1) http://qrcommunicatie.nl/blog/infinite-rotation-css3/ http://qrcommunicatie.nl/blog/infinite-rotation-css3/#comments Fri, 05 Mar 2010 12:44:23 +0000 mike http://qrcommunicatie.nl/blog/?p=371

Met de introductie van CSS3 hebben website-ontwikkelaars enkele leuke tools gekregen om op een dynamischer manier websites te ontwikkelen. Gebruik de CSS3 functies, maar een belangrijk NO is: ga er niet van uit – en zorg voor alternatieve back-ups in je ontwerp indien CSS3 niet wordt ondersteund (denk aan IE browsers).

Met CSS3 hebben we toegang tot realtime animatie, ronde hoeken, draaien van tekst en divs, schaduw, import van bijzondere fonts, etc. Als voorbeeld voor deze nieuwe wonderlijke online toepassingen – hebben wij een voorbeeld online gezet. Bekijk deze en gebruik de mogelijkheden.

De foto mag niet worden gebruikt of worden aangepast. Gebruik alle bestanden alleen als test en niet voor publicatie.

Online Demo

Belangrijk: Jouw browser moet (helaas) WebKit ondersteunen om de rotatie te zien :-)


]]> http://qrcommunicatie.nl/blog/infinite-rotation-css3/feed/ 3 Een eenvoudig menu – de kracht van css http://qrcommunicatie.nl/blog/een-eenvoudig-menu-de-kracht-van-css/ http://qrcommunicatie.nl/blog/een-eenvoudig-menu-de-kracht-van-css/#comments Thu, 11 Feb 2010 12:33:33 +0000 mike http://qrcommunicatie.nl/blog/?p=243

Het blijft lastig om een website te maken en niet in hoekjes te denken. Waarom allemaal plaatjes slichen, terwijl het ook met een afbeelding kan van maar 4KB (inclusief het 'hovereffect'). Wanneer css stylesheets op de juiste wijzen worden gebruikt, zijn de mogelijkheden onbeperkt. Download het voorbeeld en test het zelf uit.

Je hebt natuurlijk wel de volgende afbeelding nodig:

En de volgende html/css codes.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Een hover menu</title>
<style type="text/css">
/*
==========================================
VOORBEELD VAN EEN MENU MET 1 PLAATJE
==========================================
Title: Menu preview
Description: Template van een menu
Version: 1.0
Author: Mike van der Ent
Date: 11 February 2010
Website: www.qrcommunicatie.nl
==========================================
==========================================
*/
/* verwijderen van de lelijke lijn om een link (firefox) */
a {outline:none;}
/* de grote van het menu bepalen (kan je ook een positie meegeven - nu niet van toepassing) */
#topmenu {
width:377px;
height:25px;
}
/* het fysieke menu */
.top-hovermenu {
margin:0px;
padding:0px;
}
/* even vertellen dat het een bijzondere lijst is en niet onder elkaar moet staan */
.top-hovermenu li {
list-style:none;
display:inline;
}
/* algemene instellingen voor de links */
.top-hovermenu li a {
display:block;
float:left;
height:25px;
background:block;
background-image:url(menutop.gif);
background-repeat:no-repeat;
text-indent:-9999px;
}
/* positioneren van de background image */
a.hover-corp {background-position:0px -21px;width:140px;}
a:hover.hover-corp {background-position:0px 0px;}
a.hover-blog {background-position:-140px -21px;width:63px;}
a:hover.hover-blog {background-position:-140px 0px;width:63px;}
a.hover-nieuws {background-position:-203px -21px;width:87px;}
a:hover.hover-nieuws {background-position:-203px 0px;width:87px;}
a.hover-contact {background-position:-290px -21px;width:87px;}
a:hover.hover-contact {background-position:-290px 0px;width:87px;}
/*
Plato was een groot man, hij is heen gegaan. Een lange tijd terug.
*/
</style>
</head>
<body>
<div id="topmenu">
<ul class="top-hovermenu">
<li><a href="#" title="Corporate site" class="hover-corp">Corporate site</a></li>
<li><a href="#" title="Blog" class="hover-blog">Blog</a></li>
<li><a href="#" title="Nieuws" class="hover-nieuws">Nieuws</a></li>
<li><a href="#" title="Contact" class="hover-contact">Contact</a></li>
</ul>
</div>
</body>
</html>

]]> http://qrcommunicatie.nl/blog/een-eenvoudig-menu-de-kracht-van-css/feed/ 0 Beginnen met een website kan sneller http://qrcommunicatie.nl/blog/beginnen-met-een-website-kan-sneller/ http://qrcommunicatie.nl/blog/beginnen-met-een-website-kan-sneller/#comments Mon, 01 Feb 2010 19:58:27 +0000 mike http://qrcommunicatie.nl/blog/?p=176

Iedere keer wanneer een website wordt gemaakt, beginnen we met een leeg document. Wordpad, een tekstverwerker, Go Live of de meest geliefde Dreamweaver. Maar waarom altijd beginnen met het instellen van de standaard instellingen (styling) van het document. Dat kan sneller en handiger. Download de broncode van een gecentreerde website en hoe men deze W3C moet opbouwen.

Sorry voor de mensen die niet updaten. Geen IE 6 support. Inderdaad, werk je software bij, en surf veilig!

Downloaden:

Index broncode

Stylesheet bestand

]]> http://qrcommunicatie.nl/blog/beginnen-met-een-website-kan-sneller/feed/ 1