Tag: css

Website Overhaul

After four or so years of inactivity I decided I'd give the website an overhaul. I registered a new, better-looking domain (ebens.me) and over the past couple weeks I've programmed a new system and ported over the majority of the content from the previous website (nova-fusion.com). The main noteworthy features are a revamped games section and new photo gallery showcasing some of the photos I've taken over the past few years.

As good as Jekyll (what the old website ran on) was, it had become cumbersome for me. Regenerating and uploading the website after each change took longer with each new piece of content and eventually became too much for me to bother. Besides this, I wanted greater and easier flexibility for different types of content; perhaps Jekyll has improved here, as it's been a long time since I've kept up-to-date with the project. That said, my favourite about Jekyll was being able to update a site based on text files, so I incorporated that functionality into the new system. Files are pushed to the server using Git and the server updates its database using the diff produced by the push. It's convenient and Git pushes are often quicker than comparative SFTP uploads.

Read more

Style Changes

I've beefed up the styling a fair bit on the website, especially regarding the menu. The colour scheme is now different; I've gone for more "modest", grey look. The text is now a little bluish, and the the links are darker.

So anyway, that's about it for now. I'm hoping to have a bit more to say (or time to write it more like!) in the future.

Making a 3D Button in CSS

In this tutorial I'll be showing you how to create a 3D-looking button, made out of pure CSS. The button we'll be building is similar to the button I've used on my project pages. Take note that this uses a number of CSS3 properties, like border-radius and box-shadow. Anyway, let's get into it.

The only HTML code we'll need is a div tag with the proper class:

<div class="big-button">Your Text Here</div>

If you want the button to link somewhere, just wrap a link round it:

Read more