Wikidot Design & Development

Changing text selection colour

How to change the colour of text selections with CSS

This one's pretty simple - changing the colour of text selections to suit your theme.

/* Webkit */
::selection {
    background-color: rgba(255,111,111,0.9);
    color: #000;
}
 
/* Mozilla */
::-moz-selection {
    background-color: rgba(255,111,111,0.9);
    color: #000;
}

As above, it will change the text selection all across your site. For a more specific use, you can remove the selection background from images when they are dragged (which seems to occur by default in Firefox).

img::selection {background-color: transparent;}
img::-moz-selection {background-color: transparent;}

Try dragging the two images below (Safari/Chrome only; Firefox has this behaviour automatically):

Macbook
Macbook

Showcase - CSS3 Image Gallery

Add some jazz to the lightbox image gallery with these CSS3 improvements.

My dashboard tells me it has been 51 days since I last posted a blog - longer than I had hoped between posts, but inevitable while I'm juggling university study with two on-going wikidot projects. And admittedly, this is not quite the in-depth post I would love to deliver you, but I felt it was time to once again whet your appetite with some CSS3 goodness - this time without the detailed explanation of every knook and cranny.

Recreating the feedback site's bug/wish button

Adding some interactivity to an otherwise static image using CSS.

Every time I visit the wikidot feedback site I expect some sort of user interaction from the bug/wish toggle button in the sidebar - instead it is a static image. So I decided to recreate the button with CSS. Below you can see the original image on the left versus the pure CSS version on the right. By hovering over or clicking the button, you can see how the CSS version adds some user interaction.

bug-wish-feedback.png

bugs wishes


The Markup

There are four main classes used to create the button: two ‘states’ for the toggles - link vs current; and two ‘positions’ - left and right, to maintain the curved corners on the correct side.

[[div class="bug-button"]]
[[span class="current left"]]bugs[[/span]] [[span class="link right"]][[[css3:wish-bug-button | wishes]]][[/span]]
[[/div]]

Using these classes means that by simply swapping the ‘state’ classes while maintaining the ‘position’ classes allows for changing the state of the toggle without having to change the CSS. You'll see in the CSS below that the styles are added only to the span element for the current state, but are added to the anchor (a) element in the link state.

Elegant Image Frame

Add some elegance to you wikidot site with this easy, stylish and formal image border.

rose image

We’ve already shown you how to turn your plain old images into polaroids, and now it’s time for a nice, formal image frame.

First, what to put on your wikidot site. Instead of wrapping the image between some <div> tags, we’re going to use the more efficient method of assigning a class (elegant-border) to the image. This means that if you add the relevant CSS to your custom theme, any time you want to use this image frame, just add class="elegant-border" to the image syntax.

[[image :first class="elegant-border" width="250px"]]

Animated Polaroid Images

So now that you have yourself some cool polaroid images, it’s time to take it up a level and add some animations for those viewing with Safari or Chrome.

Below is what we're aiming for - if you're using a webkit browser, you should see the image gently increase in size when you hover over it. If you're using a mozilla browser, the image will just jump to the bigger size.

giraffe200.jpg

A lovely Giraffe


The first thing we’re going to do is scale up the image when the user hovers over it, using the :hover pseudo class. So from the code for the original post, we’ll change the following lines.
.polaroid-image {
    -webkit-transform: rotate(3deg) scale(1);
    -moz-transform: rotate(3deg) scale (1);
}
 
.polaroid-image:hover {
    -webkit-transform: rotate(3deg) scale(1.1);
    -moz-transform: rotate(3deg) scale (1.1);
}

Now when anyone using a mozilla or webkit browser hovers over the image, it will instantly jump in size. A nice effect, but we can do better…
giraffe200.jpg

A lovely Giraffe

Polaroid Images

We thought we'd start off with something just about every site could use - a polaroid image frame. It's a fairly widely documented effect of CSS3, but nevertheless we're bringing it to you.

First off, this is what the final result will look like.

giraffe200.jpg

A lovely Giraffe

There are two ways of adding this to your site: either to every image on your site, or only to those wrapped in a specific div class. We're going with the second. As for where to put the CSS, if you have a custom theme you can add it in there, otherwise you can just put it in a CSS module on each page you have the image. This is the same for just about every entry we'll post, so take note, because we won't be writing it with every single time.

Site design © BMC WebDesign, 2011. All rights reserved. All tutorials on this site are free for commerical use, subject to conditions outlined in the disclaimer.