Hvis man skal være sikker på at word-wrap virker i alle browsere kan man med fordel benytte følgende CSS
<style>
.divToWordWrap {
-ms-word-break: break-all;
word-break: break-all;
word-break: break-word;
-webkit-hyphens: auto;
-moz-hyphens: auto;
hyphens: auto;
width:400px;
</style>
Hvis du skal have lavet et billde i sort/hvid via CSS gøres det på denne måde:
img.grayscale {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
For at slå greyscale fra igen
img.grayscale.disabled {
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);
}
Vi designere synes at kunne lide brugen af modal windows mere og mere, da de giver en hurtig måde at vise data uden at genindlæse hele siden. Det er nemt at bruge og relativt nemt at designe. Men her er hjælpen, der gør det rigtig nemt!<span style='bgcolor:#<%=bgColor%>; color:#<%=color%>'>dynamisk farver</span>Samme version kan også bruges som Embedded CSS, men ikke som Extended CSS
<script src="jquery.js" type="text/javascript"></script>
<script>
function goToByScroll(id){
$('html,body').animate({scrollTop: $("#"+id).offset().top},'slow');
}
</script>
'slow' kan med fordel udskiftes med 1000 (svarer til slow i millisekunder), så der kommer til at stå:
$('html,body').animate({scrollTop: $("#"+id).offset().top},1000);
Her er a href'en...
<a href="javascript:void(0)" onClick="goToByScroll('1')">Go to anchor 1</a>
<a href="javascript:void(0)" onClick="goToByScroll('2')">Go to anchor 2</a>
Her linkes til id="1" og id="2" som kan sættes på h1, h2, p, span, osv.<h1 id="1">Overskrift</h1>
#example1 {
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
border-radius: 15px;
}
| W3C Specification | Mozilla Implementation |
|---|---|
| border-radius | -moz-border-radius |
| border-top-left-radius | -moz-border-radius-topleft |
| border-top-right-radius | -moz-border-radius-topright |
| border-bottom-right-radius | -moz-border-radius-bottomright |
| border-bottom-left-radius | -moz-border-radius-bottomleft |
@font-face {
font-family: 'DroidSerifRegular';
src: url('../DroidSerif-Regular-webfont.eot');
src: url('../DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../DroidSerif-Regular-webfont.woff') format('woff'),
url('../DroidSerif-Regular-webfont.ttf') format('truetype'),
url('../DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}
body, p {
font-family: 'DroidSerifRegular', Verdana, Tahoma;
}
<p >Hello world!</p>