Posts tagged “CSS”

Monday, 25 November 2013

Responsive!

This is Chris: Responsive Redesign

Mobile Version!

Do you notice anything different about ThisisChris.com? Well, if I did my job correctly, you probably don’t… unless you are looking at this site on a small screen.

Remember way back in July when I said I was planning a responsive re-design on my website? You don’t? Well, that’s not surprising.

Anyway, I had a big brain burst this past weekend and cranked it out. So the website looks pretty much exactly the same, but there’s a bunch of new CSS under the hood. I should say it looks the same until you look at it on a mobile phone (or a smaller browser window).

Go ahead: gradually shrink this browser window and watch how my website now responds to the size of the window!

There are still a few tweaks to work out; the “You Might Also Like” links are pretty borked. And I haven’t yet found a good way to shrink both the height and the width of iframes. Does anyone know a good trick for responsive iframes that does not involve wrapping them in another

tag? I don’t want to have to go back through ten+ years of this blog and wrap all my iframes.

Categories: Updates.

Monday, 15 July 2013

Responsive Redesign Coming Soon(ish?)

Hey, folks,

For some reason in one of the busiest times of my life, I have decided to do a re-design of thisischris.com. It’s not so much a visual re-design (though there will be some changes) as much as it is a back-end CSS overhaul. I’m making thisichris.com a TRULY responsive-designed site. That means that you’ll be presented with 100% of the same content no matter what screen you’re using to look at this website, but the layout will change automatically based on the resolution of that screen.

I haven’t done a major code overhaul since I switched to WordPress many, many years ago. So it’s time. Unfortunately I’m already like four movie reviews behind (soon to be five), and, y’know, my wife is practicing Pregomancy and that takes up a lot of both of our times. Growing an entire person from scratch is a lot of work!

I probably won’t be done any time soon because there’s so much going on (including Fools Play getting a new venue and all of the promotion that needs to be done for that).

Categories: Updates.

Tuesday, 28 August 2012

Outlining Your Text, or Fun With CSS Text Shadows!

So one thing I’ve always wanted to be able to do with CSS is to make my text have outlines. There is actually a property for doing just that: text-outline. Guess which browsers support it? That’s right: None o’ dem.

But it’s still entirely possible to get an outline effect with the almost-entirely-supported property text-shadow. Like this:

Outline & Shadow!

Note to people who are reading this via RSS: you should really click over to my website so you can see what the heck I’m talking about. Also, guess which browser does NOT support the text-shadow property? Even though it’s about seven years old or so? If you guessed a product made by Microsoft, well, then congratulations are not in order because the answer was pretty effing obvious. So if you’re looking at this website in IE… well, knock it off. Go download Chrome or something. What are you thinking? Jeez.

Anyhoo, this trick has been around since at least 2005, so it is probably old hat to most of you. But I likes it! It’s pretty easy, and involves making a 1-pixel, un-blurred shadow 1 pixel away from the text in every direction. Most people only use 4 shadows to do this (the 4 diagonal directions), but I find I get better coverage if I make shadows in all 8 directions, especially with serif or complicated fonts. You can also add an extra one to make the outlined text have an actual shadow. It’s easy! Here’s the code to re-create the text you see here.

h1 {
font-size:50px;
color:#000;
text-shadow:1px 1px 0 #fff,
-1px -1px 0 #fff,
1px -1px 0 #fff,
-1px 1px 0 #fff,
0px 1px 0 #fff,
1px 0px 0 #fff,
0px -1px 0 #fff,
-1px 0px 0 #fff,
4px 4px 3px #000;
font-family:Verdana, Geneva, sans-serif;
}

You can also do some cool bezel effects with colored text and outline shadows, like this:

Beveled & Embossed!

h1{
font-size:50px;
text-shadow: -1px -1px 0px #000,
1px 1px 0px #FFF,
2px 2px 0px #FFF,
-2px -2px 0px #000;
color:#006600;
font-family:Verdana, Geneva, sans-serif;
}

You can also do some cool glowing effects with a shadow that isn’t offset, but is incredibly blurred. Like this!

SO GLOWY!

h1{
font-size:50px;
text-shadow:0px 0px 10px #fff;
color:#006600;
font-family:Verdana, Geneva, sans-serif;
}

Anyway, I just think it’s fun-fun-silly-willy. It’s also legit helpful if you end up having text that’s just too close in color & value to the background, or if you need to put text over a complicated background that has a bunch of different colors and values all up in it.

Hopefully soon the major browser will start to support the text-outline property and we won’t have to jump through all these hoops to fake it (if you think this overly complicated, just do a Google search of how to make text shadows in Internet Explorer to see all the workarounds you have to do with that browser). Until then, SHADOW ON!

Categories: Computers.