Owls and Stuff

Agh.

Why do we always subject ourselves to absolutely terrifying movies in which zombies/aliens/mass murders stalk you in the night?

When I was a kid I always thought that one day I’d get old and be tough and cool and be able to watch scary movies, really appreciate them, and then go to bed and have a nice big long sleep, without having to keep a light on or ANYTHING.

If you’re still a kid and you still think that, here is a pearl of wisdom from wise old Rose: If you’re a pussy now, you’ll still be a pussy later.

I know.
It sucks.

The owl

So for those of you who have read my blog for awhile, you might remember that last November, Ben and I went to see The Fourth Kind. And that on our way home, we saw this owl sitting on the lawn by my house.

Which is freaky, but you know what? At the time, the movie didn’t scare me all that much. The owl was a crazy and kinda freaky coincidence but I was still pretending to be tough and stuff.

Welp.
Last night, almost a YEAR LATER, I was scared.

There’s this owl that sits outside my window most nights and hoots incessantly, because it is very insensitive and cares more about scaring the shit out of mice (and me, incidentally) than about letting the people around it sleep like NORMAL creatures do at night.

Usually it kinda freaks me out but I manage to pull myself together and fall asleep.

The owl didn’t hoot for most of last night, but at around four am, for about half an hour, I had this dream that had a lot of owl hooting in it, and my dream started to take on a 4th Kind sort of aura and then I realized the hooting was actually happening in REAL life.

And I woke up.

And the owl kept on hooting.

And the longer I lay there, the more the hooting started to drill in my brain, and I couldn’t sleep, and it was dark, and I was scared to get up and close my window because WHAT IF I SAW THE OWL?

WHAT IF I SAW THE OWL AND IT HAD BIG FREAKY BLACK EYES LIKE THE ALIEN OWL AND I REALIZED I WAS GOING TO GET ABDUCTED????

OH MY GOD!

THE OWL WAS IN MY DREAMS.
THE ALIEN WAS IN MY DREAMS. JUST LIKE THE MOVIEEE.

Internet, I KNOW how crazy I sound. And my brain kept saying, “Rose. You are twenty. three. years. old. Get. a. grip.”

But I couldn’t.
I was terrified of this hooting owl.

I finally decided that I had to go pee, forced myself to get up, and stopped to visit Jada, our Rottweiler who sleeps on the landing. I was hoping she’d bring me back to reality but she is SO not your average dog. I tried to pet her and she just lay as still as a log, determined to stay as immobile and as fast asleep as doggily possible. And therefore she wasn’t very reassuring, just large and kind of boring.

She eventually mumbled something about how I should piss off already, and rolled, like, three inches away, because she was too lazy to roll any further.

ANYWAY.
Long story short, I went pee. (Actually, that’s exactly what happened. It wasn’t much longer than that.)

I closed the window while staring fixedly at the wall, because I felt like if I saw the owl, my life would be ten MILLION times worse and the alien would come for sure.

I turned on iTunes to drown out any remaining over-sexed owl hooting that might take place.

And then I lay down to sleep.

….

Ten minutes later it was 5:45 and the crows started cawing.

Yes, I am exhausted today.

Posted in Long and Rambly, Photos | 3 Comments

A list of handy CSS Tricks!

I get pretty caught up in trying to write cool and flashy tutorials, but there’s probably a lot of toned down stuff I could write about that some people would find useful – even though I mostly assume you guys are all pretty clever already when it comes to webdesigny stuff :)

BUT, maybe some of these CSS tricks and hints will be new to you. Hopefully.

The *, and other interesting select-y things

The * is called the universal selector. I usually use it at the beginning of CSS documents to strip all default padding and margins, like this:

* {
  padding:0;
  margin:0;
}

What that does is: “I don’t care what the tag is called. This is going to effect every single freaking tag.”

You can also use it a little more selectively, like this:

div.sidebar * {
  color:#FF0000;
}

Which would be – “Every single tag in the div with a class name of ‘sidebar’ will be red.”


There’s also this neat thing called ‘Adjacent Sibling Selectors’, which means, ” If these two tags are side by side, then do this!”
h1 + h2 {
  color:#0000FF;
}

So if you had a h2 tag immediately after a h1 tag, that h2 tag would be an obnoxious shade of blue. BUT, if you had a h1 tag, then a p tag and THEN a h2 tag, the h2 would be whatever the default is for h2 tags.

Ew, my sentences are confusing.


Then there’s that whole thing with children

I’m sure you already know about stuff like this:
div.sidebar p {
  color:#FF0000;
}

This is called a descendant, which means that every single p tag inside the sidebar div, no matter how deep it goes, will be red, like this:
<div class="sidebar">
<p>I am red</p>
<div class="innerSidebar>
<p>I am ALSO red</p>
</div>
</div>

HOWEVER, if you only select the CHILD of the sidebar:
div.sidebar>p {
  color:#FF0000;
}

Then for the p tag to be red, it has to be the sidebar’s baby, not its grandchild, for example :P So in this case:
<div class="sidebar">
<p>I am red</p>
<div class="innerSidebar>
<p>I don't get to be red :( </p>
</div>
</div>


Yes, this is a really long list of selectors. Too bad I’m not done yet!

You can do first-child and last-child, so that only the FIRST paragraph is red (or last.) This is especially useful in lists. Say if you want a list that is a bunch of text separated by commas. Well, you don’t want the LAST item in the list to have a comma, because that would be nonsense!

I used this piece of code for my examples of how to display links when using my Link Manager Script:
ul#thirdExample li {
display:inline;
margin:0;
padding:0;
}


/* Two lessons in one! :after means that you can do something AFTER a tag. Usually insert text of some kind. In this case: A comma! */
ul#thirdExample li:after {
content: ", ";
}

/* BUT...If it's the very last <li> tag, then we don't want it to have a comma.... */
ul#thirdExample li:last-child:after {
content: "";
}

Note how I can combine those two: li:last-child:after
…I could also just do li:last-child if I wasn’t dealing with the whole comma-afterwards thing.


There’s also :active and :hover (which you probably already know about) and :focus, for when you’re focused on an element… usually used for customizing forms.

As well as :before, :after, :first-line, and :first-letter, all of which kind of have names that make sense without me having to explain them, right?


OK, so what if you have a bunch of <div> tags and they all have slightly different ID’s, but also kinda similar, like this:
<div id="comment-1"> A blog comment! </div>
<div id="comment-2"> A blog comment! </div>
<div id="comment-3"> A blog comment! </div>

And you want to affect ALL of them, but because their ID’s aren’t exactly the same, you’re worried you’ll have to do a lot of annoying CSS? Well, there’s a shortcut!
div[id|=comment] {
color:#FF0000;
}

“Any DIV with an ID that starts with ‘comment’ and ends however the hell you want it to end will be bright red!” (warning: there has to be a hyphen before ‘whatever the hell else’)

You could also get creative and decide that whenever there’s a link to lifeasrose.ca, you want it to be bold! Because you love me!

a[href="http://lifeasrose.ca"] {
font-weight:bold;
}

I think that’s probably enough on selectors. Let me just link away now to much much more: w3.org’s list of CSS3 Selectors and also their page for CSS2 Selectors.

Custom Fonts…

So you want to use this super awesome font but you know that not everyone will have it installed. And obviously it’s a jerk move to force everyone to download this font just for you.

There’s another way!
You have to upload the .ttf or .otf file to your website, of course, and then you ‘define’ it with CSS:
@font-face { font-family: Playtime; src: url('playtime.ttf'); }

So then if I say:
span { font-family:Playtime,Arial,sans-serif; }
If their browser isn’t a freaking dinosaur, it should work!

Animation…

This next bit is CSS3 and isn’t going to work for all of you, but it’s coming! Say if you want a link to change colour on hover but you don’t want it to just CHANGE… you want it to FADE into another colour….

Like this:
Move your mouse over me

You can use a thing called transition:

a {
color: #000;
font-weight: bold;
}

a:hover {
color: #9999FF;
-webkit-transition: color 1s linear; /* It should be just transition: but because it's still pretty new, there's some browser hacking going on....*/
}

Tthe first value in transition is: What CSS property are we changing? Color? Opacity? font-weight? width? You pick!

The second is: How long do we want this animation to drag on for?

The third: What KIND of animation do we want? Mostly I just go with linear because they’re all kinda similar anyway, but you can read more about this On the W3C site. As usual.

Yes, there is more. Maybe I’ll write about it some other time, though.

Hopefully some of the stuff I rambled on about will be useful to you. Let me know if you notice any typos or stupid comments by yours truly, because I usually make one every time I write one of these.

Happy end of August!

( :( )

Posted in Freebies, Geeky | 8 Comments
copyright information back to the top of the page