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
<title>Test Document</title>
<script src='http://code.jquery.com/jquery-1.4.2.min.js'></script>
<script src='http://plugins.jquery.com/files/jquery.koverlay.1.3.js.txt'></script>
</head>
<body>
<a href='javascript: void(0);' onclick="$('#my_hidden_div_id_1').koverlay({title: 'OVERSKRIFT HER'});$('.css_koverlay').css({'background-color':'#9c183a'});">Link Text</a>
<div id="my_hidden_div_id_1" style="display: none;">INDHOLD HER...</div>
</body>
</html>
<head>
<style>
#displaybox {
z-index: 10000;
filter: alpha(opacity=50); /*older IE*/
filter:progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE */
-moz-opacity: .50; /*older Mozilla*/
-khtml-opacity: 0.5; /*older Safari*/
opacity: 0.5; /*supported by current Mozilla, Safari, and Opera*/
background-color:#000000;
position:fixed; top:0px; left:0px; width:100%; height:100%; color:#FFFFFF; text-align:center; vertical-align:middle;
}
<script>
function clicker(){
var thediv=document.getElementById('displaybox');
if(thediv.style.display == "none"){
thediv.style.display = "";
thediv.innerHTML = "TEXTEN<a href='#' onclick='return clicker();'>LUK</a>";
}else{
thediv.style.display = "none";
thediv.innerHTML = '';
}
return false;
}
</script>
<body>
<div id="displaybox" style="display: none;"></div>
<a href='#' onclick='return clicker();'>ÅBEN VINDUE</a>
</body>
@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>
<style type="text/css">
@font-face {
font-family: "My Custom Font";
src: url(http://www.example.org/mycustomfont.ttf) format("truetype");
}
p.customfont {
font-family: "My Custom Font", Verdana, Tahoma;
}
</style>
<p class="customfont">Hello world!</p>
http://www.firebugger.com/fbg.php?getSite=URL
