Total top tip for CSS font code and event font files.
https://www.fontsquirrel.com/
Font Squirrel let’s you update a font and it’ll create the relevant CSS code for you, or choose from their pretty large font library.
Displaying code snippets easily
With the new site and all I’ve some CSS to get through.
I wanted to make the “pre” element work as a code snippet display for me, and needed a fix to get it to wrap text (since the “width” attribute has been defunct for some time).
Here’s the solution!
pre {
background-color: #F2F2F2;
padding: 5px 5px 5px 5px;
white-space: pre-wrap; /* css-3 */
white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
white-space: -pre-wrap; /* Opera 4-6 */
white-space: -o-pre-wrap; /* Opera 7 */
word-wrap: break-word; /* Internet Explorer 5.5+ */
}
Website code template
I have a small series of files I copy and paste whenever I’m about to start a new project, they have default templates for various files I use a lot. Like a header, footer, index page, blank stylesheet, and something called “top.php” that I use to open sessions and connect to databases.
There are also some of my standard folders pre-made too (with the correct server permissions) like “img” (images) and “upl” (uploads).
This was going to be last week’s #fridayfreebie, but here it is on a Wednesday instead.
This particular version is the one I use most commonly, and it’s set up for:
- PHP
- MySQL
- HTML5
- CSS (any version!)
- and ideally a unix/linux based server, because it references the top level of the site as being “/”.
I’ve zipped it up to share! Feel free to do whatever you want with it—although there is a lot of Peter Mahoney specific stuff in there, so you might want to take that out. Unless of course you like giving me credit for your work. 🙂
New Twitter logo in pure CSS
This is why I love CSS. Now, it will only work in newer browsers, but does look awesome.
Roll over it and you’ll see how they made this, with a variety of CSS circles.
You can of course also view the code by right hand clicking and viewing source. This is what I love about the web, something that makes us really say WOW, in just a hundred odd lines of code.
Double-tagging, or CSS vertical align
This is pretty geeky, but I’ve tried several ways of doing this, and wanted to post what I’ve found to be the best. And based on testing, it’s also the most cross-browser compliant solution.
The issue is (seemingly) simple. How do you use the equivalent of valign=”middle” in CSS? With tables this was pretty simple. But we’ve all moved on from tables for layout. I hope.
While CSS (including CSS3) does have a vertical-align, you can’t use it in the same way for you text-align for example. You can’t simply tell it that all text within a container should sit halfway down the div.
The way I’ve found most useful is to double-tag. That is, to use a parent div, and then a child within it.
Here’s the code to show what I mean:
#content1 {
display:table;
height:400px;
}
#content2 {
display:table-cell;
vertical-align:middle;
}
And then when writing the HTML:
<div id=”content1″>
<div id=”content2″>
This text will sit halfway down the div, regardless of whether I have one line of text, or three.
</div>
</div>
In essence the first div says “Go on, act like I’m a table”. And then second continues, “And let’s just say I’m a table cell. Because cells *can* have vertical-align assigned to them!”
Double-tagging.