Posts Tagged ‘css’

LESS CSS Font-Size (Parametric Mixin) Function for Pixel to REM

Monday, July 16th, 2012
Posted in Web Development · Tags:

I made a Parametric Mixin in LESS that will convert your pixel sizes to REM.


/*define this mixin first - make sure @target_size is greater than 0*/
.calc_font_size (@target_size:16px, @base_size:16px) {
font-size:@target_size;
@rem:(( round((@target_size / @base_size) * 10000) ) / 10000);/*so it can be rounded a bit more*/
font-size:~`"@{rem}".match(/\d+\.?\d+/) + 'rem'`;
}
/*set the body font size*/
body {font-size:100%;}
/*example to use*/
#footer {.calc_font_size(12px);}/*pass in the font-size you want in pixels*/

That will generate the following CSS

body {font-size:100%;}
#footer {font-size:12px; font-size:0.75rem;}

This mixin will output the size in pixels first then output them in REM.

Responsive Images Scaling or Squishing Issues

Friday, July 6th, 2012
Posted in Web Development · Tags:

I was setting up responsive images and ran into an issue that the images were being squished and squashed. And it was because the image tag had a height attribute set in HTML. It’s easy to overcome this with CSS though.


<style>
@media only screen and (max-width:959px) {
img {max-width:100%; height:auto !important;}
}
</style>
<img src="image.jpg" width="150" height="150" alt="my image">
</style>

CSS3 Validation Debate Reponse

Tuesday, September 1st, 2009
Posted in Web Development · Tags:

There is a post on CSS3.info, The Big CSS3 Validation Debate where I left a comment I figured I’d make into a post here. It’s about how adding CSS3 rules to your style sheet result in errors with validation and what we think the W3C should do about it. Anyway, my response is below (edited, because I pressed submit too soon). 😛


No need to have the W3C mess with their validator just to work with all the possible browser extensions. This would most likely introduce bugs and cause too much of a headache for them.

Here are 2 things you can do to get by the errors

  1. Put all your CSS3 rules in a css3.css file and then when you validate everything in your regular .css files should pass and the css3.css should fail.
  2. Or put a /*CSS3*/ comment for each CSS3 rule you have in your style sheet, so when it gives an error you know why. This would work best if you put each css3 rule on a separate line.

CSS Blockquotes

Tuesday, September 9th, 2008
Posted in Web Development · Tags: , ,

I figured I’d share two ways I’ve done blockquotes on this site.
Here is the HTML being used

<blockquote><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Maecenas sit amet quam. Sed quis justo scelerisque dui iaculis euismod. Nunc sit amet lectus ac orci placerat pulvinar?</p></blockquote>

The first is from the original design the site had.
old blockquote

In this one I just use 2 images for the quotes, but no extra div for the closing quote, because I use the last-child pseudo-class.


blockquote {
margin:1.5em;
padding:5px 40px;
border-top:1px solid #eee;
border-bottom:1px solid #eee;
background:url(images/quotation_marks.gif) no-repeat left 5px;
color:#717f53;
min-height:30px;
}
blockquote p:last-child {background:url(images/quotation_marks_close.gif) no-repeat right bottom;}/*css3*/


The second is the one I use on the site right now. Instead of using images, I just use the css content property and set the value to open-quote for the before pseudo-class and close-quote for the after pseudo-class. I also add css rounded corners for some extra styling.


blockquote p {
padding:10px;
margin:10px;
}
blockquote:before, blockquote:after {
display:block;
cursor:default;
line-height:1em;
font-weight:bold;
font-size:1.6em;
color:#000;
font-family:Georgia, 'Times New Roman', serif;
}
blockquote:before {
content:open-quote;
}
blockquote:after {
text-align:right;
content:close-quote;
}
blockquote {
margin:20px;
padding:10px;
border:1px solid #eee;
line-height:1.4em;
color:#918e95;
-moz-border-radius:5px; -webkit-border-radius:5px;/*css3 rounded corners*/
}

This CSS may not work in older-browsers, but if the blockquote is indented with a border or set to another color, it should stand out enough to be ok.

CSS Class Based on Date

Wednesday, August 1st, 2007
Posted in Web Development · Tags: , , ,

I recently saw a tutorial on SimplePie’s site about using relative dates and I modified the function to output a CSS class rather than text. That way you can make newer stories bold, brighter, or bigger and older stories dimmed out or smaller. Use your imagination with CSS. 🙂

Here is the function

//CREATE CSS BASED ON DATE
function create_age_css_class($date_sent)
{
/**
$date_sent should be in the following format: YYYYMMDDHHMMSS
Based on doRelativeDate() By Garrett Murray, http://graveyard.maniacalrage.net/etc/relative/
**/
$in_seconds = strtotime(substr($date_sent,0,8).' '.
substr($date_sent,8,2).':'.
substr($date_sent,10,2).':'.
substr($date_sent,12,2));
$diff = time()-$in_seconds;
if ($diff < 86400)
$css_class = 'age_today';
else if ($diff < 604800)
$css_class = 'age_days';
else if ($diff < 1209600)
$css_class = 'age_week';
else if ($diff < 2630880)
$css_class = 'age_weeks';
else
$css_class = 'age_month';
return $css_class;
}

Here is how I call it

$data .= '<li><a href="'. $item->get_permalink();
//SET CLASS BASED ON DATE/AGE
$data .= ' class="' . create_age_css_class($item->get_date('YmdHis')) . '"';
$data .= '>';

You don’t have to use SimplePie for this function, but it’s what inspired me to modify it.

Now for an screenshot

Here is the HTML I used for that

<ul id="type3">
<li class="age_today">Lorem ipsum dolor sit amet</li>
<li class="age_days">Etiam iaculis nulla iaculis mauris</li>
<li class="age_week">Suspendisse at odio</li>
<li class="age_week">Nullam volutpat aliquam lacus</li>
<li class="age_weeks">Nunc dapibus eros vitae mauris rutrum laoreet</li>
<li class="age_weeks">Suspendisse sed nisl</li>
<li class="age_month">Nulla scelerisque gravida neque</li>
<li class="age_month">Leo imperdiet metus, ut adipiscing nisi lacus et pede</li>
</ul>

And here is the CSS used

<style type="text/css">
body {font-family:Verdana, Arial, Helvetica, sans-serif; color:#000; background-color:#fff;}
ul {list-style:none;}
#type3 .age_days {font-size:150%; color:#555;}
#type3 .age_week {font-size:100%; color:#777;}
#type3 .age_weeks {font-size:80%; color:#999;}
#type3 .age_month {font-size:60%; color:#ccc;}
</style>

Added screenshot and sample CSS