What is cuboid5?
After years of making pitiful websites using sliced up images (used for my illustration portfolio 7 years ago), it is now my job to get stuck into the world of HTML, CSS, JavaScript etc and make something half decent (probably half-baked).
I will be gradually updating this site with a new version of cuboid5 (this is number 13), the various versions of which can be viewed using the navigation at the top of this page.
Media queries + resizing
After viewing version 5.12 on an iPad and discovering it looked utterly dreadful, I realised it was time to get some media query stuff on the go. For this version I have now implemented some, checking on iPad, iPhone, and various simulators. I did try using simulators like iphone4simulator.com but it seems they are not great as they don't display in quite the same manner as the real thing. I've now also got Xcode 4.1, so checking on the built-in simulators is of great benefit.
Anyway, you should find that, upon resizing the window, the various elements resize to fit. The picture above shows the iPhone styling in action. Sweet.
Below are the queries I've set in place for this page:
/* iPad/tablet-sized device */
@media screen and (max-width: 980px) {
}
/* iPhone/mobile device */
@media screen and (max-width: 480px) {
}
In the header, the image width is set to 100%, which allows the image to resize when the window does. Got some tips for this from an article on Web Designer Wall.
h1 img {
width: 100%; /* and then this is changed to 0% in the mobile version to make the image disappear */
height: auto;
width: auto\9; /* a fix for ie8 */
}
Buttons
Look at this crap.
Yes, indeed, some buttons I made, using CSS3 and a moving background image for each. On hover, the CSS moves the background image in the div #button1 {, and then performing a transition on the text #button1 a { to move its position. I implemented similar buttons on this downloads page for work (slightly ageing site, it has to be said), where the text of the buttons change colour, too.
#button1 {
float: left;
height: 218px;
width: 33%;
background-color: #fff;
background-image: url(../images/013/button3.jpg);
background-repeat: no-repeat;
background-position: top center;
outline: 1px solid #fff;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-timing-function: linear, ease-out;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
-moz-v-radius-topleft: 8px;
-moz-border-radius-bottomleft: 8px;
-webkit-border-top-left-radius: 8px;
-webkit-border-bottom-left-radius: 8px;
}
#button1:hover {
background-position: bottom center;
}
#button1 a {
font-family: ComfortaaRegular;
font-size: 64px;
text-align: center;
color: #fff;
padding-top: 94px;
text-decoration: none;
display: block;
height: 124px;
width: 100%;
-webkit-transition-duration: 0.2s, 0.2s;
-webkit-transition-timing-function: linear, ease-out;
-webkit-transition: all 0.2s linear;
-moz-transition: all 0.2s linear;
-o-transition: all 0.2s linear;
}
#button1 a:hover {
color: #fff;
padding-top: 50px;
height: 168px;
}
Oh, and the grey boxes above reposition depending on the browser size etc. It'll either be two columns or, for smaller devices, two rows or blocks.
Share this page
