30+ Handy CSS Tools and Generators
http://www.designerterminal.com/resource/css/css-tools-generators.html
Archive for the ‘CSS’ Category
CSS værktøjer
lørdag, september 24th, 2011hr
fredag, september 23rd, 2011hr {color: #fff; background-color: #fff; border: 1px dotted #000; border-style: none none dotted; margin: 0px;}
hr
torsdag, februar 10th, 2011hr {border: 0px; color: #d3d3d3; background-color: #d3d3d3; height: 1px; clear: both;}
Brug ægte font på et website
lørdag, januar 1st, 2011En let forståelig artikel om problemstillingen og løsningen: http://randsco.com/index.php/2009/07/04/p680
Husk at konvertere fonten til EOT, så IE også kan vise den: http://www.kirsle.net/wizards/ttf2eot.cgi
Tilføje tekst i CSS
onsdag, december 29th, 2010I dette eksempel indsættes kolon efter klassen “meta_uploaddate” i div tag’en.
div.meta_uploaddate:after {
content: ": ";
}
Horisontal og vertikal centrering
søndag, december 26th, 2010WordPress plugin: NextGen gallery style (css) fra linje 116
.ngg-galleryoverview { overflow: hidden; padding: 4px; width: 100%; border-top: 2px solid #bfdbe2; clear: both; display: block !important;}
.ngg-gallery-thumbnail-box { float: left; width: 124px; height: 124px; margin: 5px;}
.ngg-gallery-thumbnail { width: 124px; height: 124px; display: table-cell; vertical-align: middle; border: 2px solid #cdcdcd; background-color: #efefef;}
a:hover .ngg-gallery-thumbnail { border: 2px solid #dedede; background-color: #ababab;}
.ngg-gallery-thumbnail img { display: block; margin-left: auto; margin-right: auto; padding: 2px; position: relative;}
.ngg-clear { clear: both;}
gallery.php
<!-- Thumbnails --> <?php foreach ( $images as $image ) : ?>
<div id="ngg-image-<?php echo $image->pid ?>" class="ngg-gallery-thumbnail-box" <?php echo $image->style ?> > <a href="<?php echo $image->imageURL ?>" title="<?php echo $image->description ?>" <?php echo $image->thumbcode ?> > <div class="ngg-gallery-thumbnail" > <?php if ( !$image->hidden ) { ?> <img title="<?php echo $image->alttext ?>" alt="<?php echo $image->alttext ?>" src="<?php echo $image->thumbnailURL ?>" <?php echo $image->size ?> /> <?php } ?> </div> </a> </div>
Vertikal midt
fredag, december 17th, 2010<div style="width: 200px; border: 10px solid #666; background-color: #fff;">
<div style="height: 100px; display: table-cell; vertical-align: middle;">
<h1 style="font-size: 12px;">Block element, with long enough content to wrap.</h1>
</div>
</div>
CSS: Placering i lag
tirsdag, august 31st, 2010Når du bruger z-index, forudsætter det at du benytter position.
NextGEN Gallery: file reference
mandag, juni 7th, 2010Design of album page
album-extend.php
Change tags text size
nggfunctions.php (line 936)
NextGEN Gallery: ændre den visuelle størrelse af tags
mandag, juni 7th, 2010CSS: Størrelsen på tags i NextGEN Gallery ændres i nggfunctions.php linje 936.
HTML: Ændring af markup ændres i wp-includes -> category-template.php -> wp_generate_tag_cloud linje 683-684.